Recreated page navigation buttons.

cista-front/src/components/AppNavigation.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    path: Array<string>
-  }>(),
-  {}
-)
-</script>
-
-<template>
-  <nav>
-    <!--
-
-    <div class="view-nav">
-      <div class="view-nav-left">
-        <button class="af button tip tip-se" aria-label="Upload files from disk">{{{svg "add-file"}}}</button>
-        <button class="ad button tip tip-s" aria-label="Upload folder from disk">{{{svg "add-folder"}}}</button>
-        <button class="cd button tip tip-s" aria-label="Create folder">{{{svg "create-folder"}}}</button>
-      </div>
-      <div class="view-nav-right">
-        <div class="search toggled-off tip tip-s" aria-label="Search">
-          {{{svg "find"}}}
-          <input class="search-input" type="search" placeholder="Term" />
-        </div>
-        <button class="reload button tip tip-s" aria-label="Reload View">{{{svg "reload"}}}</button>
-        <button class="newview button tip tip-s" aria-label="Create new View">{{{svg "window"}}}</button>
-        <button class="prefs button tip tip-s" aria-label="Preferences">{{{svg "cog"}}}</button>
-        <button class="about button tip tip-s" aria-label="About">{{{svg "info"}}}</button>
-        <button class="logout button tip tip-sw" aria-label="Sign out">{{{svg "signout"}}}</button>
-      </div>
-    </div>
-    <ul class="path"></ul>
-    <div class="content-container">
-      <div class="content"></div>
-    </div>
-
-    <div class="dropzone">
-      <svg></svg>
-    </div>
-    <div class="info-box">
-      <div class="icon">{{{svg "link"}}}</div>
-      <span></span>
-      <div class="link-out mousetrap"></div>
-      <div class="link-options">
-        <div class="copy-link tip tip-nw" aria-label="Copy to clipboard">
-          {{{svg "copy"}}}<div>Copy</div>
-        </div>
-        <div class="dl-link checked tip tip-sw" aria-label="Trigger a download when opened">
-          {{{svg "check"}}}<div>Is DL</div>
-        </div>
-      </div>
-    </div>
-    <div class="paste-button">
-      {{{svg "paste"}}}
-      <span>Paste here</span>
-      {{{svg "triangle"}}}
-    </div>
-    -->
-    <BreadCrumb :path="props.path" />
-  </nav>
-</template>
-
-<style scoped>
-nav,
-span {
-  color: var(--primary-color);
-}
-span:hover,
-.last {
-  color: var(--blue-color);
-}
-</style>

cista-front/src/components/BreadCrumb.vue

@@ -10,8 +10,10 @@
 </template>
 
 <script setup lang="ts">
-import home from '@/assets/svg/home.svg'
-import { withDefaults, defineProps } from 'vue'
+//import home from '@/assets/svg/home.svg'
+import { withDefaults, defineProps, defineAsyncComponent } from 'vue'
+
+const home = defineAsyncComponent(() => import(`@/assets/svg/home.svg`))
 
 const props = withDefaults(
   defineProps<{

cista-front/src/components/FileExplorer.vue

@@ -38,10 +38,18 @@
         <tr v-if="editing?.key === 'new'" class="folder">
           <td class="selection"></td>
           <td class="name">
-            <FileRenameInput :doc="editing" :rename="mkdir" :exit="() => { editing = null }"/>
+            <FileRenameInput
+              :doc="editing"
+              :rename="mkdir"
+              :exit="
+                () => {
+                  editing = null
+                }
+              "
+            />
           </td>
-          <td class="right">{{editing.modified}}</td>
-          <td class="right">{{editing.sizedisp}}</td>
+          <td class="right">{{ editing.modified }}</td>
+          <td class="right">{{ editing.sizedisp }}</td>
         </tr>
         <tr
           v-for="doc of sorted(props.documents as FolderDocument[])"
@@ -158,7 +166,7 @@ const mkdir = (doc: FolderDocument, name: string) => {
     control.send(
       JSON.stringify({
         op: 'mkdir',
-        path: `${decodeURIComponent(linkBasePath.value)}/${name}`,
+        path: `${decodeURIComponent(linkBasePath.value)}/${name}`
       })
     )
   }

cista-front/src/components/HeaderMain.vue

@@ -1,16 +1,21 @@
 <script setup lang="ts">
 import { useDocumentStore } from '@/stores/documents'
-import { ref } from 'vue'
+import { ref, nextTick } from 'vue'
 
 const documentStore = useDocumentStore()
 const searchQuery = ref<string>('')
 const showSearchInput = ref<boolean>(false)
+const search = ref<HTMLInputElement | null>()
 
 const toggleSearchInput = () => {
   showSearchInput.value = !showSearchInput.value
   if (!showSearchInput.value) {
     searchQuery.value = ''
   }
+  nextTick(() => {
+    const input = search.value
+    if (input) input.focus()
+  })
 }
 
 const executeSearch = (ev: InputEvent) => {
@@ -23,104 +28,56 @@ const executeSearch = (ev: InputEvent) => {
 </script>
 
 <template>
-  <div class="actions-container">
-    <div class="actions-list">
+  <nav>
+    <div class="buttons">
       <UploadButton />
-      <!--
-
-      <a-tooltip title="Upload folder from disk">
-        <a-button @click="uploadFolderHandler" type="text" class="action-button" :icon="h(FolderAddFilled)" />
-      </a-tooltip>
-
-      <a-tooltip title="Create file">
-        <a-button @click="createFileHandler" type="text" class="action-button" :icon="h(FileFilled)" />
-      </a-tooltip>
-
-      <a-tooltip title="Create folder">
-        <a-button @click="createFolderHandler" type="text" class="action-button" :icon="h(FolderFilled)" />
-      </a-tooltip>
-
-      <template v-if="documentStore.selected.size > 0">
-        <a-tooltip title="Share">
-          <a-button type="text" @click="share" class="action-button" :icon="h(LinkOutlined)" />
-        </a-tooltip>
-        <a-tooltip title="Download Zip">
-          <a-button type="text" @click="download" class="action-button" :icon="h(DownloadOutlined)" />
-        </a-tooltip>
-        <a-tooltip title="Delete">
-          <a-button type="text" @click="deleteHandler" class="action-button" :icon="h(DeleteOutlined)" />
-        </a-tooltip>
+      <SvgButton name="create-folder" />
+      <template v-if="true">
+        <div class="smallgap"></div>
+        <p>N selected files:</p>
+        <!-- Needs better icons for copy/move/remove -->
+        <SvgButton name="copy" />
+        <SvgButton name="paste" />
+        <SvgButton name="trash" />
       </template>
-      -->
-    </div>
-    <div class="actions-list">
-      <LoginModal></LoginModal>
+      <div class="spacer"></div>
+      <SvgButton name="find" @click="toggleSearchInput" />
       <template v-if="showSearchInput">
-        <input type="search" v-model="searchQuery" class="margin-input" />
+        <input
+          ref="search"
+          type="search"
+          v-model="searchQuery"
+          class="margin-input"
+          @keyup.esc="toggleSearchInput"
+        />
       </template>
-      <!--
-
-      <a-tooltip title="Search">
-        <a-button @click="toggleSearchInput" type="text" class="action-button" :icon="h(SearchOutlined)" />
-      </a-tooltip>
-
-      <a-tooltip title="Create new view">
-        <a-button @click="newViewHandler" type="text" class="action-button" :icon="h(PlusSquareOutlined)" />
-      </a-tooltip>
-
-      <a-tooltip title="Preferences">
-        <a-button @click="preferencesHandler" type="text" class="action-button" :icon="h(SettingOutlined)" />
-      </a-tooltip>
-
-      <a-tooltip title="About">
-        <a-button @click="about" type="text" class="action-button" :icon="h(InfoCircleOutlined)" />
-      </a-tooltip>
-      -->
     </div>
-  </div>
+  </nav>
 </template>
 
-<style>
-.actions-container,
-.actions-list {
+<style scoped>
+.buttons {
+  padding: 0 0.5em;
   display: flex;
-  flex-wrap: nowrap;
-  gap: 15px;
+  align-items: center;
 }
-
-.actions-container {
-  justify-content: space-between;
+.spacer {
+  flex-grow: 1;
 }
-
-.action-button {
-  padding: 0;
-  font-size: 1.5em;
-  color: var(--secondary-color);
-
-  &:hover {
-    color: var(--blue-color) !important;
-  }
+.smallgap {
+  margin-left: 2em;
 }
-
-@media only screen and (max-width: 600px) {
-  .actions-container,
-  .actions-list {
-    gap: 6px;
-  }
+.search-widget {
+  display: flex;
+  align-items: center;
 }
-.margin-input {
-  margin-top: 5px;
-}
-
-.path {
-  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.15);
-  overflow: hidden;
-  white-space: nowrap;
-  width: 100%;
-  z-index: 1;
-  flex: 0 0 1.5rem;
-  order: 1;
-  font-size: 0.9rem;
-  position: relative;
+input[type='search'] {
+  background: var(--primary-background);
+  color: var(--text-color);
+  border: 0;
+  border-radius: 0.1rem;
+  padding: 0.5rem;
+  outline: none;
+  font-size: 1.2rem;
 }
 </style>

cista-front/src/components/SvgButton.vue

@@ -0,0 +1,37 @@
+<template>
+  <button class="action-button">
+    <component :is="icon" />
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, defineProps } from 'vue'
+
+const props = defineProps<{
+  name: string
+}>()
+
+const icon = defineAsyncComponent(() => import(`@/assets/svg/${props.name}.svg`))
+</script>
+
+<style scoped>
+button {
+  background: none;
+  border: none;
+  color: #ccc;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0.5rem;
+}
+button:hover {
+  color: #fff;
+}
+svg {
+  fill: #ccc;
+  transform: fill 0.2s ease;
+}
+button:hover svg {
+  fill: #fff;
+}
+</style>

cista-front/src/components/UploadButton.vue

@@ -3,6 +3,7 @@ import { useDocumentStore } from '@/stores/documents'
 import { h, ref } from 'vue'
 
 const fileUploadButton = ref()
+const folderUploadButton = ref()
 const documentStore = useDocumentStore()
 const open = (placement: any) => openNotification(placement)
 
@@ -74,19 +75,22 @@ async function uploadFileChangeHandler(event: Event) {
 }
 </script>
 <template>
-  (buttons here)
-  <!--
-
-  <a-tooltip title="Upload files from disk">
-    <a-button @click="uploadFileHandler" type="text" class="action-button" :icon="h(FileAddFilled)" />
-    <input ref="fileUploadButton" @change="uploadFileChangeHandler" class="upload-input" type="file" onclick="this.value=null;" />
-  </a-tooltip>
-  <contextHolder />
-  -->
+  <template>
+    <input
+      ref="fileUploadButton"
+      @change="uploadFileChangeHandler"
+      class="upload-input"
+      type="file"
+      multiple
+    />
+    <input
+      ref="folderUploadButton"
+      @change="uploadFileChangeHandler"
+      class="upload-input"
+      type="file"
+      webkitdirectory
+    />
+  </template>
+  <SvgButton name="add-file" @click="fileUploadButton.click()" />
+  <SvgButton name="add-folder" @click="folderUploadButton.click()" />
 </template>
-<style scoped>
-/* Extends styles from HeaderMain.vue too  */
-.upload-input {
-  display: none;
-}
-</style>