Mobile improvements (#8724)

apps/client/src/layouts/mobile_layout.tsx

@@ -24,9 +24,8 @@ import NoteWrapperWidget from "../widgets/note_wrapper.js";
 import NoteDetail from "../widgets/NoteDetail.jsx";
 import QuickSearchWidget from "../widgets/quick_search.js";
 import { useNoteContext } from "../widgets/react/hooks.jsx";
-import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
 import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
-import SearchDefinitionTab from "../widgets/ribbon/SearchDefinitionTab.jsx";
+import ScrollPadding from "../widgets/scroll_padding";
 import SearchResult from "../widgets/search_result.jsx";
 import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
 import { applyModals } from "./layout_commons.js";
@@ -78,7 +77,7 @@ export default class MobileLayout {
                                                 .child(<NoteDetail />)
                                                 .child(<NoteList media="screen" />)
                                                 .child(<SearchResult />)
-                                                .child(<FilePropertiesWrapper />)
+                                                .child(<ScrollPadding />)
                                         )
                                         .child(<MobileEditorToolbar />)
                                         .child(new FindWidget())
@@ -102,13 +101,3 @@ export default class MobileLayout {
         return rootContainer;
     }
 }
-
-function FilePropertiesWrapper() {
-    const { note, ntxId } = useNoteContext();
-
-    return (
-        <div>
-            {note?.type === "file" && <FilePropertiesTab note={note} ntxId={ntxId} />}
-        </div>
-    );
-}

apps/client/src/stylesheets/style.css

@@ -942,6 +942,7 @@ table.promoted-attributes-in-tooltip th {
     color: var(--muted-text-color);
     opacity: 0.6;
     line-height: 1;
+    word-wrap: break-word;
 }
 
 .aa-dropdown-menu .aa-suggestion p {

apps/client/src/stylesheets/theme-next-dark.css

@@ -338,6 +338,17 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 13.2%, 20.8%);
 }
 
+.modal.tab-bar-modal .tabs .tab-card.with-hue {
+    background-color: hsl(var(--bg-hue), 8.8%, 11.2%);
+    border-color: hsl(var(--bg-hue), 9.4%, 25.1%);
+}
+
+.modal.tab-bar-modal .tabs .tab-card.active.with-hue {
+    background-color: hsl(var(--bg-hue), 8.8%, 16.2%);
+    border-color: hsl(var(--bg-hue), 9.4%, 25.1%);
+}
+
+
 .use-note-color {
     --custom-color: var(--dark-theme-custom-color);
 }

apps/client/src/stylesheets/theme-next-light.css

@@ -313,6 +313,16 @@
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%);
 }
 
+.modal.tab-bar-modal .tabs .tab-card.with-hue {
+    background-color: hsl(var(--bg-hue), 56%, 96%);
+    border-color: hsl(var(--bg-hue), 33%, 41%);
+}
+
+.modal.tab-bar-modal .tabs .tab-card.active.with-hue {
+    background-color: hsl(var(--bg-hue), 86%, 96%);
+    border-color: hsl(var(--bg-hue), 33%, 41%);
+}
+
 .note-split.with-hue,
 .quick-edit-dialog-wrapper.with-hue {
     --note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%);

apps/client/src/widgets/PromotedAttributes.css

@@ -16,6 +16,10 @@ body.mobile .promoted-attributes-widget {
     display: table;
 }
 
+body.experimental-feature-new-layout .promoted-attributes-container {
+    max-height: unset;
+}
+
 .promoted-attribute-cell {
     display: flex;
     align-items: center;
@@ -94,4 +98,4 @@ body.mobile .promoted-attributes-widget {
     background: rgba(0, 0, 0, 0.5);
     transform: rotate(45deg);
     pointer-events: none;
-}
+}

apps/client/src/widgets/collections/legacy/ListOrGridView.css

@@ -128,6 +128,10 @@
     border: 1px solid transparent;
 }
 
+body.mobile .note-list.grid-view .note-book-card {
+    flex-basis: 150px;
+}
+
 .note-list.grid-view .note-book-card {
     max-height: 300px;
 }

apps/client/src/widgets/containers/scrolling_container.css

@@ -19,6 +19,10 @@
     }
 }
 
+body.mobile .scrolling-container {
+    --content-margin-inline: 8px;
+}
+
 .note-split.type-code:not(.mime-text-x-sqlite) {
     &> .scrolling-container {
         background-color: var(--code-background-color);

apps/client/src/widgets/dialogs/PopupEditor.css

@@ -32,6 +32,12 @@ body.mobile .modal.popup-editor-dialog .modal-dialog {
     display: flex;
     align-items: center;
     margin-block: 0;
+
+    .note-icon-widget {
+        display: flex;
+        align-items: center;
+        margin-inline-start: 0;
+    }
 }
 
 .modal.popup-editor-dialog .modal-header .note-title-widget {

apps/client/src/widgets/dialogs/PopupEditor.tsx

@@ -67,10 +67,7 @@ export default function PopupEditor() {
         <NoteContextContext.Provider value={noteContext}>
             <DialogWrapper>
                 <Modal
-                    title={<>
-                        <TitleRow />
-                        {isNewLayout && <NoteBadges />}
-                    </>}
+                    title={<TitleRow />}
                     customTitleBarButtons={[{
                         iconClassName: "bx-expand-alt",
                         title: t("popup-editor.maximize"),
@@ -123,6 +120,7 @@ export function TitleRow() {
         <div className="title-row">
             <NoteIcon />
             <NoteTitleWidget />
+            {isNewLayout && <NoteBadges />}
         </div>
     );
 }

apps/client/src/widgets/mobile_widgets/TabSwitcher.css

@@ -35,11 +35,6 @@
             display: flex;
             flex-direction: column;
 
-            &.with-hue {
-                background-color: hsl(var(--bg-hue), 8.8%, 11.2%);
-                border-color: hsl(var(--bg-hue), 9.4%, 25.1%);
-            }
-
             &.active {
                 outline: 4px solid var(--more-accented-background-color);
                 background: var(--card-background-hover-color);

apps/client/src/widgets/type_widgets/Empty.css

@@ -1,18 +1,20 @@
-.note-detail-empty {
-    container-type: size;
-    padding-top: 50px;
-    min-width: 350px;
-}
+body.desktop {
+    .note-detail-empty {
+        container-type: size;
+        padding-top: 50px;
+        min-width: 350px;
+    }
 
-.note-detail-empty > * {
-    margin-inline: auto;
-    max-width: 850px;
-    padding-inline: 50px;
-}
-
-@container (max-width: 600px) {
     .note-detail-empty > * {
-        padding-inline: 20px;
+        margin-inline: auto;
+        max-width: 850px;
+        padding-inline: 50px;
+    }
+
+    @container (max-width: 600px) {
+        .note-detail-empty > * {
+            padding-inline: 20px;
+        }
     }
 }
 
@@ -24,10 +26,22 @@
 }
 
 .workspace-notes .workspace-note {
-    width: 130px;
     text-align: center;
     margin: 10px;
     border: 1px transparent solid;
+
+    .workspace-icon {
+        text-align: center;
+        font-size: 250%;
+    }
+
+    @media (min-width: 992px) {
+        width: 130px;
+
+        .workspace-icon {
+            font-size: 500%;
+        }
+    }
 }
 
 .workspace-notes .workspace-note:hover {
@@ -37,8 +51,6 @@
 }
 
 .note-detail-empty-results .aa-dropdown-menu {
-    max-height: 50vh;
-    overflow: scroll;
     border: var(--bs-border-width) solid var(--bs-border-color);
     border-top: 0;
 }
@@ -55,8 +67,3 @@
 .empty-tab-search .input-clearer-button {
     border-bottom-right-radius: 0;
 }
-
-.workspace-icon {
-    text-align: center;
-    font-size: 500%;
-}