FEATURE: Mobile menu redesign (#2474)

* Mobile menu design changed * Favorites refactored * Search result icon changed in mobile layout * Icons in mobile menu layout reorganized * Edit button added to mobile layout
origam · Feb 23, 2024 · 115790f · 115790f
1 parent 85c08d8
commit 115790f
Show file tree

Hide file tree

Showing 38 changed files with 859 additions and 314 deletions.
diff --git a/frontend-html/public/icons/search-results.svg b/frontend-html/public/icons/search-results.svg
diff --git a/frontend-html/src/gui/Components/DataViewHeader/DataViewHeaderGroup.module.scss b/frontend-html/src/gui/Components/DataViewHeader/DataViewHeaderGroup.module.scss
@@ -18,6 +18,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 */
 
 @import "src/gui/definitions";
+@import "src/gui/commonStyles";
 
 .root {
   display: flex;
@@ -28,7 +29,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
   border-right: 1px solid var(--background3);
   padding: 0 0.5em;
   overflow: hidden;
-  user-select: none;
+  @include noSelect;
 
   flex: 0 1 auto;
   min-width: 0;

diff --git a/...nts/ScreenElements/TabbedPanel.module.css → ...ts/ScreenElements/TabbedPanel.module.scss b/...nts/ScreenElements/TabbedPanel.module.css → ...ts/ScreenElements/TabbedPanel.module.scss
@@ -16,6 +16,7 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 */
+@import "src/gui/commonStyles";
 
 .tabbedPanel {
   display: flex;
@@ -27,7 +28,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 }
 
 .tabHandles {
-  user-select: none;
+  @include noSelect;
   display: flex;
   flex-direction: row;
   min-height: 20px;

diff --git a/frontend-html/src/gui/Components/ScreenElements/TabbedPanel.tsx b/frontend-html/src/gui/Components/ScreenElements/TabbedPanel.tsx
@@ -18,7 +18,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import S from "./TabbedPanel.module.css";
+import S from "./TabbedPanel.module.scss";
 import { observer } from "mobx-react";
 
 @observer

diff --git a/frontend-html/src/gui/Components/ScreenElements/Table/Header.module.scss b/frontend-html/src/gui/Components/ScreenElements/Table/Header.module.scss
@@ -18,19 +18,15 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 */
 
 @import "src/gui/definitions";
+@import "src/gui/commonStyles";
 
 .root{
   display: flex;
   flex-direction: row;
 }
 
 .noSelect {
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Old versions of Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none;
+  @include noSelect;
 }
 
 .header {

diff --git a/frontend-html/src/gui/Components/ScreenElements/Table/TableRendering/common/ValueBox.ts b/frontend-html/src/gui/Components/ScreenElements/Table/TableRendering/common/ValueBox.ts
@@ -37,6 +37,11 @@ export function ValueBox<T>() {
     _active = false;
   }
 
+  function isSet() {
+    return _active;
+  }
+
+  get.isSet = isSet;
   get.get = get;
   get.set = set;
   get.clear = clear;

diff --git a/...onents/ScreenElements/TreeView.module.css → ...nents/ScreenElements/TreeView.module.scss b/...onents/ScreenElements/TreeView.module.css → ...nents/ScreenElements/TreeView.module.scss
@@ -16,16 +16,10 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 */
-
+@import "src/gui/commonStyles";
 
 .noSelect {
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror HTML */
-    -moz-user-select: none; /* Old versions of Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
+    @include noSelect;
 }
 
 .expander{

diff --git a/frontend-html/src/gui/Components/ScreenElements/TreeView.tsx b/frontend-html/src/gui/Components/ScreenElements/TreeView.tsx
@@ -21,7 +21,7 @@ import { observer } from "mobx-react";
 import React from "react";
 import { IDataView } from "../../../model/entities/types/IDataView";
 import { action, computed, observable } from "mobx";
-import S from "./TreeView.module.css";
+import S from "./TreeView.module.scss";
 import cx from "classnames";
 import { isTreeDataTable, TreeDataTable } from "../../../model/entities/TreeDataTable";
 import { runGeneratorInFlowWithHandler } from "utils/runInFlowWithHandler";

diff --git a/frontend-html/src/gui/Components/Search/ResultGroup.module.scss b/frontend-html/src/gui/Components/Search/ResultGroup.module.scss
@@ -16,6 +16,7 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 */
+@import "src/gui/commonStyles";
 
 .resultGroupRow {
   padding-left: 15px;
@@ -25,13 +26,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
   align-items: center;
   border-bottom: 1px solid var(--background1);
   background-color: var(--background2);
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently
-                                supported by Chrome and Opera */
+  @include noSelect;
 }
 
 .groupName{

diff --git a/frontend-html/src/gui/Components/Search/ResultGroup.tsx b/frontend-html/src/gui/Components/Search/ResultGroup.tsx
@@ -41,7 +41,10 @@ export class ResultGroup extends React.Component<{
   render() {
     return (
       <div>
-        <div className={S.resultGroupRow} onClick={() => this.onGroupClick()}>
+        <div 
+          key={this.props.name}
+          className={S.resultGroupRow} 
+          onClick={() => this.onGroupClick()}>
           {this.props.group.isExpanded ? (
             <i className={"fas fa-angle-up " + S.arrow}/>
           ) : (

diff --git a/frontend-html/src/gui/Components/Search/ResultItem.module.scss b/frontend-html/src/gui/Components/Search/ResultItem.module.scss
@@ -16,6 +16,7 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 */
+@import "src/gui/commonStyles";
 
 .resultIemRow {
   padding-left: 15px;
@@ -49,7 +50,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
   white-space: nowrap;
   display: flex;
   align-items: center;
-  user-select: none;
+  @include noSelect;
   margin-right: 10px;
 }
 

diff --git a/frontend-html/src/gui/Components/Search/SearchResults.module.scss b/frontend-html/src/gui/Components/Search/SearchResults.module.scss
@@ -19,7 +19,8 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 
 @import "src/gui/commonStyles";
 
-.resultItem{
+.resultItem {
+  width: 100%;
   padding: 0 1.6667em;
   padding-bottom: 10px;
   display: flex;
@@ -86,13 +87,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
   display: flex;
   align-items: center;
   background-color: var(--background2);
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Safari */
-   -khtml-user-select: none; /* Konqueror HTML */
-     -moz-user-select: none; /* Firefox */
-      -ms-user-select: none; /* Internet Explorer/Edge */
-          user-select: none; /* Non-prefixed version, currently
-                                supported by Chrome and Opera */
+  @include noSelect;
 }
 
 .groupName{

diff --git a/frontend-html/src/gui/Components/Search/SearchResults.tsx b/frontend-html/src/gui/Components/Search/SearchResults.tsx
@@ -83,6 +83,7 @@ export class ResultGroup extends React.Component<{
         <div className={S.dropDownParent}>
           {this.isExpanded && this.props.results.map(result =>
             <Dropdowner
+              key={result.id}
               trigger={({refTrigger, setDropped}) => (
                 <SearchResultItem
                   refDom={refTrigger}

diff --git a/frontend-html/src/gui/Components/Sidebar/AlertCounter.tsx b/frontend-html/src/gui/Components/Sidebar/AlertCounter.tsx
@@ -20,8 +20,10 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import S from "gui/Components/Sidebar/AlertCounter.module.scss";
 
-export class SidebarAlertCounter extends React.Component {
+export class SidebarAlertCounter extends React.Component<{className?: string}> {
   render() {
-    return <div className={S.root}>{this.props.children}</div>;
+    return <div className={S.root + " " + (this.props.className ? this.props.className: "")}>
+        {this.props.children}
+      </div>;
   }
 }
diff --git a/frontend-html/src/gui/Components/Sidebar/SidebarSection.module.scss b/frontend-html/src/gui/Components/Sidebar/SidebarSection.module.scss
@@ -17,8 +17,10 @@ You should have received a copy of the GNU General Public License
 along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 */
 
+@import "src/gui/commonStyles";
+
 .root {
-  user-select: none;
+  @include noSelect;
   background-color: var(--background1);
   border-left: 2px solid transparent;
   flex-shrink: 0;

diff --git a/frontend-html/src/gui/Workbench/ScreenArea/ScreenArea.module.scss b/frontend-html/src/gui/Workbench/ScreenArea/ScreenArea.module.scss
@@ -34,7 +34,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
   display: flex;
   flex-direction: row;
   background-color: var(--background7);
-  user-select: none;
+  @include noSelect;
 }
 
 .TabHandle {

diff --git a/frontend-html/src/gui/commonStyles.scss b/frontend-html/src/gui/commonStyles.scss
@@ -28,6 +28,21 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
   border: 1px solid var(--background4);
 }
 
+@mixin noSelect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                supported by Chrome, Edge, Opera and Firefox */
+}
+
+.noSelect{
+  @include noSelect;
+}
+
+
 @mixin progressIndicator {
   position: absolute;
   width: 100%;

diff --git a/frontend-html/src/gui/connections/CChatSection.tsx b/frontend-html/src/gui/connections/CChatSection.tsx
@@ -46,6 +46,7 @@ export class CChatSection extends React.Component {
     return (
       <>
         <WorkQueuesItem
+          key={"new_chat"}
           isEmphasized={false}
           isOpenedScreen={false}
           isActiveScreen={false}
@@ -67,6 +68,7 @@ export class CChatSection extends React.Component {
           const activeMenuItemId = activeScreen ? activeScreen.menuItemId : undefined;
           return (
             <WorkQueuesItem
+              key={item.id}
               isEmphasized={item.unreadMessageCount > 0}
               isOpenedScreen={this.workbench.openedScreenIdSet.has(item.id)}
               isActiveScreen={activeMenuItemId === item.id}

diff --git a/frontend-html/src/gui/connections/CFavorites.module.scss b/frontend-html/src/gui/connections/CFavorites.module.scss
@@ -17,13 +17,16 @@ You should have received a copy of the GNU General Public License
 along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 */
 
+@import "src/gui/commonStyles";
+
 .favoritesList{
   height: 100%;
   width: 100%;
+  @include noSelect;
 }
 
 .forceOpenSection {
-  user-select: none;
+  @include noSelect;
   background-color: var(--background1);
   border-left: 2px solid transparent;
   flex-shrink: 0;
@@ -38,6 +41,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
 }
 
 .favoritesFolderHeader{
+  @include noSelect;
   display: flex;
   flex-direction: row;
   align-items: center;