Style cleanups (#56)

* Avoid rendering language picker if arches object is missing * Avoid wrapping edit controls * Improve position of filter icon * Hide injection of selected language under if Lingo doesn't implement selecting a language * Fix overflow in tree * Remove calc * Adjust padding and splitter size
archesproject · Jan 23, 2025 · 14a9ec4 · 14a9ec4
1 parent 9402429
commit 14a9ec4
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 20 deletions.
diff --git a/arches_references/media/js/views/components/plugins/controlled-list-manager.js b/arches_references/media/js/views/components/plugins/controlled-list-manager.js
@@ -16,7 +16,7 @@ const router = createRouter({
 
 const ControlledListsPreset = definePreset(ArchesPreset, {
     semantic: {
-        iconSize: 'small',
+        iconSize: '1.2rem',
     },
     components: {
         button: {

diff --git a/arches_references/src/arches_references/components/ControlledListsMain.vue b/arches_references/src/arches_references/components/ControlledListsMain.vue
@@ -54,8 +54,7 @@ provide(systemLanguageKey, systemLanguage);
 </script>
 
 <template>
-    <!-- Subtract size of arches toolbars -->
-    <div style="width: calc(100vw - 50px); height: calc(100vh - 50px)">
+    <div style="height: 100vh; padding-bottom: 2.5rem">
         <div class="list-editor-container">
             <ListHeader />
             <MainSplitter />

diff --git a/arches_references/src/arches_references/components/MainSplitter.vue b/arches_references/src/arches_references/components/MainSplitter.vue
@@ -32,9 +32,9 @@ const panel = computed(() => {
 </script>
 
 <template>
-    <Splitter style="height: 100%">
+    <Splitter style="height: 100%; overflow: hidden">
         <SplitterPanel
-            :size="34"
+            :size="30"
             :min-size="25"
             style="display: flex; flex-direction: column"
         >
@@ -46,12 +46,12 @@ const panel = computed(() => {
             </Suspense>
         </SplitterPanel>
         <SplitterPanel
-            :size="66"
+            :size="70"
             :min-size="25"
             :style="{
                 margin: '1rem 0rem 4rem 1rem',
                 overflowY: 'auto',
-                paddingRight: '4rem',
+                paddingRight: '2rem',
             }"
         >
             <component

diff --git a/arches_references/src/arches_references/components/editor/ImageMetadata.vue b/arches_references/src/arches_references/components/editor/ImageMetadata.vue
@@ -326,7 +326,7 @@ const focusInput = () => {
             </Column>
             <Column
                 :row-editor="true"
-                style="width: 5%; min-width: 6rem; text-align: center"
+                style="width: 5%; text-align: center; white-space: nowrap"
                 :pt="{
                     headerCell: { ariaLabel: $gettext('Row edit controls') },
                 }"

diff --git a/arches_references/src/arches_references/components/editor/ValueEditor.vue b/arches_references/src/arches_references/components/editor/ValueEditor.vue
@@ -352,7 +352,7 @@ const focusInput = () => {
             </Column>
             <Column
                 :row-editor="true"
-                style="width: 5%; min-width: 6rem; text-align: center"
+                style="width: 5%; text-align: center; white-space: nowrap"
                 :pt="{
                     headerCell: { ariaLabel: $gettext('Row edit controls') },
                 }"

diff --git a/arches_references/src/arches_references/components/tree/ListTree.vue b/arches_references/src/arches_references/components/tree/ListTree.vue
@@ -271,11 +271,6 @@ function lazyLabelLookup(node: TreeNode) {
                     style: { width: '100%', fontSize: 'small' },
                 },
             },
-            pcFilterIconContainer: {
-                root: {
-                    style: { display: 'flex' },
-                },
-            },
             wrapper: {
                 style: {
                     overflowY: 'auto',

diff --git a/arches_references/src/arches_references/components/tree/PresentationControls.vue b/arches_references/src/arches_references/components/tree/PresentationControls.vue
@@ -16,14 +16,18 @@ import { shouldUseContrast } from "@/arches_references/utils.ts";
 import type { Ref } from "vue";
 import type { Language } from "@/arches_vue_utils/types";
 
-const { $gettext } = useGettext();
-
-const selectedLanguage = inject(selectedLanguageKey) as Ref<Language>;
-
 const { expandAll, collapseAll } = defineProps<{
     expandAll: () => void;
     collapseAll: () => void;
 }>();
+
+let selectedLanguage: Ref<Language> | undefined;
+if (arches.languages) {
+    // arches-lingo reuses this component without this provided.
+    selectedLanguage = inject(selectedLanguageKey);
+}
+
+const { $gettext } = useGettext();
 </script>
 
 <template>
@@ -44,7 +48,10 @@ const { expandAll, collapseAll } = defineProps<{
             :label="$gettext('Collapse all')"
             @click="collapseAll"
         />
-        <div style="display: flex; flex-grow: 1; justify-content: flex-end">
+        <div
+            v-if="arches.languages"
+            class="language-select"
+        >
             <span
                 id="languageSelectLabel"
                 style="
@@ -78,4 +85,10 @@ const { expandAll, collapseAll } = defineProps<{
     height: 3rem;
     margin: 0.5rem;
 }
+
+.language-select {
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-end;
+}
 </style>
diff --git a/arches_references/templates/views/components/plugins/controlled-list-manager.htm b/arches_references/templates/views/components/plugins/controlled-list-manager.htm
@@ -1 +1,4 @@
-<div id="controlled-list-manager-mounting-point" style="font-family: 'Open Sans'"></div>
+<div
+    id="controlled-list-manager-mounting-point"
+    style="height: 100%; width: 100%; font-family: 'Open Sans'"
+></div>