feat(mobile): render search definition

Author: eliandoran

apps/client/src/layouts/mobile_layout.tsx

@@ -24,6 +24,8 @@ import CloseZenModeButton from "../widgets/close_zen_button.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
 import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import NoteList from "../widgets/collections/NoteList.jsx";
+import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
+import SearchDefinitionTab from "../widgets/ribbon/SearchDefinitionTab.jsx";
 
 const MOBILE_CSS = `
 <style>
@@ -155,6 +157,7 @@ export default class MobileLayout {
                                             .contentSized()
                                             .child(new NoteDetailWidget())
                                             .child(<NoteList media="screen" />)
+                                            .child(<StandaloneRibbonAdapter component={SearchDefinitionTab} />)
                                             .child(<FilePropertiesWrapper />)
                                     )
                                     .child(<MobileEditorToolbar />)

apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx

@@ -115,7 +115,7 @@ function SearchOption({ note, title, titleIcon, children, help, attributeName, a
   additionalAttributesToDelete?: { type: "label" | "relation", name: string }[]
 }) {
   return (
-    <tr>
+    <tr className={attributeName}>
       <td className="title-column">
         {titleIcon && <><Icon icon={titleIcon} />{" "}</>}
         {title}

apps/client/src/widgets/ribbon/SearchDefinitionTab.css

@@ -0,0 +1,124 @@
+.search-setting-table {
+    margin-top: 0;
+    margin-bottom: 7px;
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 10px;
+}
+
+.search-setting-table div {
+    white-space: nowrap;
+}
+
+.search-setting-table .title-column {
+    /* minimal width so that table remains static sized and most space remains for middle column with settings */
+    width: 50px;
+    white-space: nowrap;
+}
+
+.search-setting-table .button-column {
+    /* minimal width so that table remains static sized and most space remains for middle column with settings */
+    width: 50px;
+    white-space: nowrap;
+    text-align: end;
+    vertical-align: middle;
+}
+
+.search-setting-table .button-column .dropdown {
+    display: inline-block !important;
+}
+
+.search-setting-table .button-column .dropdown-menu {
+    white-space: normal;
+}
+
+.search-setting-table .button-column > * {
+    vertical-align: middle;
+}
+
+.attribute-list hr {
+    height: 1px;
+    border-color: var(--main-border-color);
+    position: relative;
+    top: 4px;
+    margin-top: 5px;
+    margin-bottom: 0;
+}
+
+.search-definition-widget input:invalid {
+    border: 3px solid red;
+}
+
+.add-search-option button {
+    margin: 3px;
+}
+
+.dropdown-header {
+    background-color: var(--accented-background-color);
+}
+
+@media (max-width: 720px) {
+    .search-setting-table {
+        display: block;
+    }
+
+    .search-setting-table tr {
+        margin: 0.5em 0;
+    }
+
+    .search-setting-table tr,
+    .search-setting-table td {
+        display: block;
+    }
+
+    .search-setting-table tbody {
+        display: block;
+        padding: 0.5em;
+    }
+
+    .search-setting-table tbody:first-of-type {
+        display: block;
+        overflow: auto;
+    }
+
+    .search-setting-table .add-search-option {
+        display: flex;
+    }
+
+    .search-setting-table .add-search-option button {
+        font-size: 0.75em;
+    }
+
+    .search-options tr {
+        display: flex;
+    }
+
+    .search-setting-table .title-column {
+        width: unset;
+        margin-right: 0.5em;
+        min-width: 20%;
+        flex-shrink: 0;
+    }
+
+    .search-setting-table .button-column {
+        flex-grow: 1;
+        justify-content: end;
+    }
+
+    .search-setting-table tr.orderBy td:nth-of-type(2) {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        gap: 0.5em;
+    }
+
+    .search-setting-table tr.searchString td:nth-of-type(2) {
+        flex-grow: 1;
+    }
+
+    .search-setting-table tr.searchString .button-column {
+        flex-grow: 0;
+        flex-shrink: 0;
+        width: 64px;
+    }
+}

apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx

@@ -20,6 +20,7 @@ import bulk_action, { ACTION_GROUPS } from "../../services/bulk_action";
 import { FormListHeader, FormListItem } from "../react/FormList";
 import RenameNoteBulkAction from "../bulk_actions/note/rename_note";
 import { getErrorMessage } from "../../services/utils";
+import "./SearchDefinitionTab.css";
 
 export default function SearchDefinitionTab({ note, ntxId }: TabContext) {
   const parentComponent = useContext(ParentComponent);

apps/client/src/widgets/ribbon/style.css

@@ -376,67 +376,6 @@ body[dir=rtl] .attribute-list-editor {
 }
 /* #endregion */
 
-/* #region Search definition */
-.search-setting-table {
-    margin-top: 0;
-    margin-bottom: 7px;
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 10px;
-}
-
-.search-setting-table div {
-    white-space: nowrap;
-}
-
-.search-setting-table .title-column {
-    /* minimal width so that table remains static sized and most space remains for middle column with settings */
-    width: 50px;
-    white-space: nowrap;
-}
-
-.search-setting-table .button-column {
-    /* minimal width so that table remains static sized and most space remains for middle column with settings */
-    width: 50px;
-    white-space: nowrap;
-    text-align: end;
-    vertical-align: middle;
-}
-
-.search-setting-table .button-column .dropdown {
-    display: inline-block !important;
-}
-
-.search-setting-table .button-column .dropdown-menu {
-    white-space: normal;
-}
-
-.search-setting-table .button-column > * {
-    vertical-align: middle;
-}
-
-.attribute-list hr {
-    height: 1px;
-    border-color: var(--main-border-color);
-    position: relative;
-    top: 4px;
-    margin-top: 5px;
-    margin-bottom: 0;
-}
-
-.search-definition-widget input:invalid {
-    border: 3px solid red;
-}
-
-.add-search-option button {
-    margin: 3px;
-}
-
-.dropdown-header {
-    background-color: var(--accented-background-color);
-}
-/* #endregion */
-
 /* #region Note actions */
 .note-actions {
     width: 35px;