Merge branch 'bugfix/draggable-select-highlight' into main

lancewilhelm · Jun 4, 2024 · 3f08f1f · 3f08f1f
2 parents dcccad8 + c14f0d9
commit 3f08f1f
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 31 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -38,8 +38,8 @@ input::placeholder textarea::placeholder{
 }
 
 input:focus, textarea:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--main-color);
+  outline: 3px solid var(--main-color);
+  outline-offset: 3px;
 }
 
 button {
@@ -73,6 +73,7 @@ button:active {
 
 button:focus {
   outline: 3px solid var(--main-color);
+  outline-offset: 3px;
 }
 
 a {

diff --git a/components/codebook/codes/CodebookCodesPanel.vue b/components/codebook/codes/CodebookCodesPanel.vue
@@ -329,6 +329,7 @@ function handleDrop({ items, target }) {
                     :item="c"
                     :children="c.children ? c.children : []"
                     :depth="0"
+                    :selected-style="() => 'border'"
                     @onDrop="handleDrop"
                     @selected="handleSelected"
                     @onContextMenu="openContextMenu"

diff --git a/components/codebook/codes/CodebookCodesPanelItem.vue b/components/codebook/codes/CodebookCodesPanelItem.vue
@@ -25,6 +25,23 @@ function getAllChildren(code) {
     }
     return children
 }
+
+function handleCodeTextColor() {
+    if (configStore.config.dynamic_code_text_color) {
+        if (props.code.group) {
+            return 'var(--text-color)'
+        }
+        return tinycolor.mostReadable(props.code.color, ['black', 'white'], {
+            includeFallbackColors: false,
+        })
+    } else {
+        if (configStore.config.code_text_color) {
+            return configStore.config.code_text_color
+        } else {
+            return 'var(--text-color)'
+        }
+    }
+}
 </script>
 
 <template>
@@ -33,14 +50,11 @@ function getAllChildren(code) {
             :class="['flex flex-row grow p-1.5']"
             :style="{
                 'background-color': code.color,
-                color: configStore.config.dynamic_code_text_color ? tinycolor.mostReadable(code.color, ['black', 'white'], {
-                    includeFallbackColors: false,
-                }) : configStore.config.code_text_color ? configStore.config.code_text_color : 'var(--text-color)',
+                color: handleCodeTextColor()
             }"
         >
-            <div class="mr-1.5">
+            <div v-if="code.group" class="mr-1.5">
                 <Icon
-                    v-if="code.group"
                     name="fa6-solid:angle-right"
                     :style="{
                         transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)',

diff --git a/components/draggable/DraggableContainer.vue b/components/draggable/DraggableContainer.vue
@@ -11,6 +11,14 @@ provide('dropTarget', dropTarget)
 
 const isDragOver = computed(() => dropTarget.value === 'root')
 
+watch(dropTarget, (value) => {
+    if (value !== null) {
+    }
+})
+
+useEventListener(window, 'drop', (e) => e.preventDefault())
+useEventListener(window, 'dragover', (e) => e.preventDefault())
+
 function onDropRoot(event) {
     if (draggedItems.value.length > 0) {
         emit('onDrop', { items: draggedItems.value, target: 'root' })
@@ -19,19 +27,6 @@ function onDropRoot(event) {
     }
 }
 
-watch(dropTarget, (value) => {
-    if (value !== null) {
-    }
-})
-
-window.addEventListener('drop', (e) => e.preventDefault())
-window.addEventListener('dragover', (e) => e.preventDefault())
-
-onBeforeUnmount(() => {
-    window.removeEventListener('drop', (e) => e.preventDefault())
-    window.removeEventListener('dragover', (e) => e.preventDefault())
-})
-
 function handleContextMenu(event) {
     emit('onContextMenu', { event, target: 'root' })
 }
@@ -59,6 +54,7 @@ function onDragLeave(event) {
         <slot></slot>
         <div
             :class="['grow', { 'bg-sub-alt': isDragOver }]"
+            @click="selectedItems = []"
             @dragenter="onDragEnter"
             @dragleave="onDragLeave"
         />

diff --git a/components/draggable/DraggableItem.vue b/components/draggable/DraggableItem.vue
@@ -14,13 +14,15 @@ const props = defineProps({
         type: Number,
         default: 0,
     },
+    selectedStyle: {
+        type: Function,
+    }
 })
 
 const selectedItems = inject('selectedItems')
 const draggedItems = inject('draggedItems')
 const dropTarget = inject('dropTarget')
 
-const configStore = useConfigStore()
 const isSelected = computed(() => selectedItems.value.includes(props.item))
 const isDragOver = computed(() => dropTarget.value?.id === props.item.id && draggedItems.value?.length > 0)
 const isOpen = ref(false)
@@ -34,10 +36,11 @@ function onSelect(event) {
             selectedItems.value.push(props.item)
         }
     } else {
-        selectedItems.value = [props.item]
-        emit('selected', props.item)
         if (props.item.children?.length > 0) {
             isOpen.value = !isOpen.value
+        } else {
+            selectedItems.value = [props.item]
+            emit('selected', props.item)
         }
     }
 }
@@ -112,7 +115,7 @@ function handleContextMenu(event) {
 <template>
     <div>
         <div
-            :class="['cursor-pointer', { 'bg-main text-bg': isSelected, 'bg-sub-alt': isDragOver}]"
+            :class="['cursor-pointer', { 'bg-main': isSelected && selectedStyle(item) === 'bg', 'border-l-8 border-main': isSelected && selectedStyle(item) === 'border', 'bg-sub-alt': isDragOver}]"
             @click="onSelect"
             @dragstart="onDragStart"
             @dragenter="onDragEnter"
@@ -131,11 +134,12 @@ function handleContextMenu(event) {
         >
             <span class="absolute z-10 top-0 bottom-0 w-px bg-text" />
             <DraggableItem
-                v-for="child in children"
-                :key="child.id"
-                :item="child"
-                :children="child.children"
+                v-for="c in children"
+                :key="c.id"
+                :item="c"
+                :children="c.children"
                 :depth="depth + 1"
+                :selected-style="selectedStyle"
                 @onDrop="emit('onDrop', $event)"
                 @selected="emit('selected', $event)"
                 @onContextMenu="emit('onContextMenu', $event)"

diff --git a/components/file/FilePanel.vue b/components/file/FilePanel.vue
@@ -320,6 +320,7 @@ function handleSelected(item) {
                     :item="file"
                     :children="file.children ? file.children : []"
                     :depth="0"
+                    :selected-style="() => 'border'"
                     @onDrop="handleDrop"
                     @selected="handleSelected"
                     @onContextMenu="openContextMenu"

diff --git a/components/file/FileViewerPanel.vue b/components/file/FileViewerPanel.vue
@@ -493,10 +493,10 @@ function handleCodeClick(event, segment) {
                             segment.codes.length > 2 ? 'italic' : 'normal',
                         'font-weight':
                             segment.codes.length > 3 ? 'bold' : 'normal',
-                        'box-shadow':
+                        'box-shadow': configStore.config.code_box_shadow ? 
                             segment.codes.length !== 0
                                 ? '2px 3px 0px #000'
-                                : 'none',
+                                : 'none' : 'none',
                     }"
                     @click="
                         segment.codes.length > 0

diff --git a/pages/settings.vue b/pages/settings.vue
@@ -3,7 +3,7 @@ definePageMeta({
     middleware: 'auth',
 })
 
-import BaseColorPicker from '~/components/base/BaseColorPicker.vue';
+import BaseColorPicker from '~/components/base/BaseColorPicker.vue'
 import themesList from '/assets/themes.json'
 
 const displayName = defineModel('displayName')
@@ -237,6 +237,14 @@ function setRandomTheme(random) {
             <SettingsColorPicker configParameter="code_text_color" />
         </SettingsGroupSection>
 
+        <SettingsGroupSection
+            title="code highlight box shadow"
+            icon="fa6-solid:square"
+            description="Enable box shadow on the code highlight in the file viewer"
+        >
+            <SettingsBooleanButtons configParameter="code_box_shadow" />
+        </SettingsGroupSection>
+
         <!-- <div class="text-3xl font-black font-mono text-main">login</div>
         <div class="settings-group">TBD</div> -->
 

diff --git a/supabase/migrations/20240604012152_code_box_shadow.sql b/supabase/migrations/20240604012152_code_box_shadow.sql
@@ -0,0 +1,3 @@
+alter table "public"."configs" add column "code_box_shadow" boolean default true;
+
+