filter button

Author: dewanshDT

client/common/icons.jsx

@@ -23,6 +23,7 @@ import CircleTerminal from '../images/circle-terminal.svg';
 import CircleFolder from '../images/circle-folder.svg';
 import CircleInfo from '../images/circle-info.svg';
 import Add from '../images/add.svg';
+import Filter from '../images/filter.svg';
 
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -98,3 +99,4 @@ export const CircleTerminalIcon = withLabel(CircleTerminal);
 export const CircleFolderIcon = withLabel(CircleFolder);
 export const CircleInfoIcon = withLabel(CircleInfo);
 export const AddIcon = withLabel(Add);
+export const FilterIcon = withLabel(Filter);

client/images/filter.svg

@@ -2,7 +2,6 @@ import React, { useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
 import { sortBy } from 'lodash';
 import classNames from 'classnames';
@@ -81,7 +80,7 @@ const Title = styled.div`
   }
 `;
 
-const Options = styled.div`
+export const Options = styled.div`
   margin-left: auto;
   display: flex;
   /* transform: translateX(${remSize(12)}); */

client/modules/IDE/components/Header/MobileNav.jsx

@@ -9,15 +9,13 @@ import SplitPane from 'react-split-pane';
 import Editor from '../components/Editor';
 import Sidebar from '../components/Sidebar';
 import PreviewFrame from '../components/PreviewFrame';
-import Toolbar from '../components/Header/Toolbar';
 import Preferences from '../components/Preferences/index';
 import NewFileModal from '../components/NewFileModal';
 import NewFolderModal from '../components/NewFolderModal';
 import UploadFileModal from '../components/UploadFileModal';
 import ShareModal from '../components/ShareModal';
 import KeyboardShortcutModal from '../components/KeyboardShortcutModal';
 import ErrorModal from '../components/ErrorModal';
-import Nav from '../components/Header/Nav';
 import Console from '../components/Console';
 import Toast from '../components/Toast';
 import * as FileActions from '../actions/files';

client/modules/IDE/pages/IDEView.jsx

@@ -1,7 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import MediaQuery from 'react-responsive';
+import { useDispatch } from 'react-redux';
+import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import { FilterIcon } from '../../../common/icons';
+import IconButton from '../../../components/mobile/IconButton';
+import { Options } from '../../IDE/components/Header/MobileNav';
+import { toggleDirectionForField } from '../../IDE/actions/sorting';
 
 export const TabKey = {
   assets: 'assets',
@@ -31,8 +38,23 @@ Tab.propTypes = {
   to: PropTypes.string.isRequired
 };
 
+// It is good for right now, because we need to separate the nav dropdown logic from the navBar before we can use it here
+const FilterOptions = styled(Options)`
+  &.hidden {
+    display: none;
+  }
+
+  > div > button:focus + ul,
+  > div > ul > button:focus ~ div > ul {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+
 const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
+
   return (
     <ul className="dashboard-header__switcher">
       <div className="dashboard-header__tabs">
@@ -57,6 +79,51 @@ const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => {
           </Tab>
         )}
       </div>
+      <MediaQuery maxWidth={770}>
+        {(mobile) => (
+          <FilterOptions className={mobile ? 'visible' : 'hidden'}>
+            <div>
+              <IconButton icon={FilterIcon} />
+              <ul>
+                <li>
+                  <button
+                    onClick={() => dispatch(toggleDirectionForField('name'))}
+                  >
+                    Name
+                  </button>
+                </li>
+                <li>
+                  <button
+                    onClick={() =>
+                      dispatch(toggleDirectionForField('createdAt'))
+                    }
+                  >
+                    Created
+                  </button>
+                </li>
+                <li>
+                  <button
+                    onClick={() =>
+                      dispatch(toggleDirectionForField('updatedAt'))
+                    }
+                  >
+                    Updated
+                  </button>
+                </li>
+                <li>
+                  <button
+                    onClick={() =>
+                      dispatch(toggleDirectionForField('numItems'))
+                    }
+                  >
+                    # of sketches
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </FilterOptions>
+        )}
+      </MediaQuery>
     </ul>
   );
 };

client/modules/User/components/DashboardTabSwitcher.jsx

@@ -70,11 +70,15 @@
 
 .dashboard-header__switcher {
   flex: 1;
+  width: 100%;
+  display: flex;
+  align-items: center;
 }
 
 .dashboard-header__tabs {
   display: flex;
   padding-top: #{24 / $base-font-size}rem;
+  width: 100%;
 
   @include themify() {
     border-bottom: 1px solid getThemifyVariable("inactive-text-color");
@@ -96,6 +100,10 @@
       border-bottom-color: getThemifyVariable("nav-hover-color");
       cursor: pointer;
     }
+
+    @media (max-width: 770px) {
+      margin-right: #{20 / $base-font-size}rem;
+    }
   }
 
   font-size: #{12 / $base-font-size}rem;