feat: redesign app top bar

packages/web-pkg/src/components/AppTopBar.vue

@@ -1,58 +1,36 @@
 <template>
   <div
-    class="oc-app-top-bar self-center flex col-[1/4] row-2 sm:col-2 sm:row-1 [&_.parent-folder]:text-role-on-chrome"
+    class="oc-app-top-bar self-center flex col-[1/3] row-1 sm:col-2 [&_.parent-folder]:text-role-on-chrome"
   >
+    <oc-button
+      id="app-top-bar-close"
+      appearance="raw-inverse"
+      color-role="chrome"
+      class="p-1"
+      :aria-label="$gettext('Close')"
+      @click="$emit('close')"
+    >
+      <oc-icon name="arrow-left-s" fill-type="line" />
+    </oc-button>
     <div
-      class="pl-4 pr-1 my-2 mx-auto sm:m-0 inline-flex items-center justify-between bg-role-chrome border border-role-on-chrome rounded-lg h-10 gap-4 w-full sm:w-fit"
+      class="pr-1 my-2 mx-auto sm:m-0 inline-flex items-center bg-role-chrome rounded-lg h-10 gap-2 w-full sm:w-fit"
     >
       <div class="open-file-bar flex">
         <resource-list-item
           v-if="resource"
           id="app-top-bar-resource"
-          class="[&_.oc-resource-name]:max-w-60 xs:[&_.oc-resource-name]:max-w-full sm:[&_.oc-resource-name]:max-w-20 md:[&_.oc-resource-name]:max-w-60 [&_svg]:!fill-role-on-chrome [&_span]:text-role-on-chrome"
+          class="[&_.oc-resource-name]:max-w-16 sm:[&_.oc-resource-name]:max-w-60 [&_svg]:!fill-role-on-chrome [&_span]:text-role-on-chrome"
           :is-thumbnail-displayed="false"
           :is-extension-displayed="areFileExtensionsShown"
-          :path-prefix="getPathPrefix(resource)"
           :resource="resource"
-          :parent-folder-name="getParentFolderName(resource)"
-          :parent-folder-link-icon-additional-attributes="
-            getParentFolderLinkIconAdditionalAttributes(resource)
-          "
-          :is-path-displayed="isPathDisplayed"
           :is-favorite-displayed="false"
           :is-resource-clickable="false"
         />
       </div>
       <div class="flex">
-        <template v-if="dropDownMenuSections.length">
-          <oc-button
-            id="oc-openfile-contextmenu-trigger"
-            v-oc-tooltip="contextMenuLabel"
-            :aria-label="contextMenuLabel"
-            appearance="raw-inverse"
-            color-role="chrome"
-            class="p-1"
-          >
-            <oc-icon name="more-2" />
-          </oc-button>
-          <oc-drop
-            drop-id="oc-openfile-contextmenu"
-            mode="click"
-            padding-size="small"
-            toggle="#oc-openfile-contextmenu-trigger"
-            close-on-click
-            :title="resource.name"
-            @click.stop.prevent
-          >
-            <context-action-menu
-              :menu-sections="dropDownMenuSections"
-              :action-options="dropDownActionOptions"
-            />
-          </oc-drop>
-        </template>
         <span
           v-if="hasAutosave && !isReadOnly"
-          class="flex items-center"
+          class="hidden sm:flex items-center"
           data-testid="autosave-indicator"
         >
           <oc-icon
@@ -73,8 +51,7 @@
                   .map((action) => {
                     return {
                       ...action,
-                      class:
-                        'p-1 text-role-on-chrome [&_svg]:!fill-role-on-chrome [&:hover:not(:disabled)_svg]:!fill-role-chrome',
+                      class: 'p-1 text-role-on-chrome [&_svg]:!fill-role-on-chrome',
                       hideLabel: true
                     }
                   })
@@ -87,35 +64,44 @@
             color-role="chrome"
           />
         </template>
-        <oc-button
-          id="app-top-bar-close"
-          appearance="raw-inverse"
-          color-role="chrome"
-          class="p-1"
-          :aria-label="$gettext('Close')"
-          @click="$emit('close')"
-        >
-          <oc-icon name="close" />
-        </oc-button>
+        <template v-if="dropDownMenuSections.length">
+          <oc-button
+            id="oc-openfile-contextmenu-trigger"
+            v-oc-tooltip="contextMenuLabel"
+            :aria-label="contextMenuLabel"
+            appearance="raw-inverse"
+            color-role="chrome"
+            class="p-1"
+          >
+            <oc-icon name="more-2" />
+          </oc-button>
+          <oc-drop
+            drop-id="oc-openfile-contextmenu"
+            mode="click"
+            padding-size="small"
+            toggle="#oc-openfile-contextmenu-trigger"
+            close-on-click
+            :title="resource.name"
+            @click.stop.prevent
+          >
+            <context-action-menu
+              :menu-sections="dropDownMenuSections"
+              :action-options="dropDownActionOptions"
+            />
+          </oc-drop>
+        </template>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, unref } from 'vue'
+import { computed } from 'vue'
 import ContextActionMenu from './ContextActions/ContextActionMenu.vue'
 import { useGettext } from 'vue3-gettext'
-import {
-  Action,
-  FileActionOptions,
-  useConfigStore,
-  useFolderLink,
-  useGetMatchingSpace,
-  useResourcesStore
-} from '../composables'
+import { Action, FileActionOptions, useConfigStore, useResourcesStore } from '../composables'
 import ResourceListItem from './FilesList/ResourceListItem.vue'
-import { isPublicSpaceResource, Resource } from '@opencloud-eu/web-client'
+import { Resource } from '@opencloud-eu/web-client'
 import { Duration } from 'luxon'
 import { MenuSection } from './ContextActions'
 
@@ -145,9 +131,6 @@ defineEmits<{ (e: 'close'): void }>()
 const { $gettext, current: currentLanguage } = useGettext()
 const resourcesStore = useResourcesStore()
 const configStore = useConfigStore()
-const { getMatchingSpace } = useGetMatchingSpace()
-const { getParentFolderName, getPathPrefix, getParentFolderLinkIconAdditionalAttributes } =
-  useFolderLink()
 
 const areFileExtensionsShown = computed(() => resourcesStore.areFileExtensionsShown)
 const contextMenuLabel = computed(() => $gettext('Show context menu'))
@@ -161,10 +144,4 @@ const autoSaveTooltipText = computed(() => {
   )
   return $gettext(`Autosave (every %{ duration })`, { duration: duration.toHuman() })
 })
-
-const space = computed(() => getMatchingSpace(resource))
-
-const isPathDisplayed = computed(() => {
-  return !isPublicSpaceResource(unref(space))
-})
 </script>

packages/web-runtime/src/components/Topbar/TopBar.vue

@@ -4,7 +4,7 @@
     class="sticky my-1 grid z-50 items-center px-4 h-auto sm:h-13 sm:gap-10 grid-rows-[52px_auto] grid-cols-[auto_9fr_1fr] sm:grid-cols-[1fr_auto_1fr]"
     :aria-label="$gettext('Top bar')"
   >
-    <div class="flex items-center flex-start gap-2.5 sm:gap-5 col-1">
+    <div class="flex items-center flex-start gap-2.5 sm:gap-5 col-1 oc-logo-wrapper">
       <sidebar-nav-mobile class="pt-1" />
       <router-link v-if="!hideLogo" :to="homeLink">
         <picture>
@@ -145,8 +145,12 @@ const feedbackLinkOptions = computed(() => {
     @apply hidden;
   }
 
+  #oc-topbar:has(> :last-child:nth-child(4)) .oc-logo-wrapper {
+    @apply hidden;
+  }
+
   #oc-topbar:has(> :last-child:nth-child(4)) {
-    @apply grid-cols-[auto_9fr_1fr];
+    @apply grid-cols-[auto_9fr_1fr] gap-0;
   }
 
   #oc-topbar .oc-logo-image {

packages/web-runtime/src/layouts/Plain.vue

@@ -38,9 +38,7 @@ const backgroundImgStyle = computed(() => {
   return unref(backgroundImg) ? { backgroundImage: `url(${unref(backgroundImg)})` } : {}
 })
 const emblemSrc = computed(() => {
-  return unref(currentTheme).isDark
-    ? '/packages/design-system/src/assets/images/icon-lilac.svg'
-    : '/packages/design-system/src/assets/images/icon-petrol.svg'
+  return unref(currentTheme).isDark ? '/images/icon-lilac.svg' : '/images/icon-petrol.svg'
 })
 
 const pathIsRoot = computed(() => {