Merge pull request #8398 from owncloud/sidebar-actions-beautify

cleanup sidebar actions (fileinfo + spaces)
owncloud · Feb 10, 2023 · 7d05f12 · 7d05f12
2 parents 1f07b7e + 9d83a80
commit 7d05f12
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 16 deletions.
diff --git a/changelog/unreleased/enhancement-fix-action-list-layout b/changelog/unreleased/enhancement-fix-action-list-layout
@@ -0,0 +1,5 @@
+Enhancement: Use standardized layout for file/space action list
+
+We've applied the styles for action lists to the fileinfo/space action lists.
+
+https://github.com/owncloud/web/pull/8398
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue
@@ -12,7 +12,7 @@
         :key="`action-${index}`"
         :action="action"
         :items="resources"
-        class="oc-py-xs"
+        class="oc-rounded"
       />
     </oc-list>
   </div>

diff --git a/packages/web-app-files/src/components/SideBar/Actions/FileActions.vue b/packages/web-app-files/src/components/SideBar/Actions/FileActions.vue
@@ -6,7 +6,7 @@
       :action="action"
       :items="resources"
       :space="space"
-      class="oc-py-xs"
+      class="oc-rounded"
     />
   </oc-list>
 </template>
@@ -53,5 +53,10 @@ export default defineComponent({
     gap: 10px;
     vertical-align: top;
   }
+
+  > li:hover {
+    text-decoration: none !important;
+    background-color: var(--oc-color-background-hover);
+  }
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
@@ -22,7 +22,7 @@
         :action="action"
         :items="resources"
         :space="space"
-        class="oc-py-xs"
+        class="oc-rounded"
       />
     </oc-list>
   </div>
@@ -119,5 +119,10 @@ export default defineComponent({
     gap: 10px;
     vertical-align: top;
   }
+
+  > li:hover {
+    text-decoration: none !important;
+    background-color: var(--oc-color-background-hover);
+  }
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/FileInfo.vue b/packages/web-app-files/src/components/SideBar/FileInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="file_info oc-flex oc-flex-between">
+  <div class="file_info oc-flex oc-flex-between oc-p-s">
     <div class="oc-flex oc-flex-middle">
       <oc-resource-icon
         v-if="isSubPanelActive"
@@ -65,6 +65,10 @@ export default defineComponent({
 
 <style lang="scss">
 .file_info {
+  &.sidebar-panel__file_info {
+    border-bottom: 1px solid var(--oc-color-border);
+  }
+
   button {
     white-space: nowrap;
   }

diff --git a/...web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceContextActions.spec.ts.snap b/...web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceContextActions.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`SpaceContextActions action handlers renders actions that are always ava
   <div id="oc-files-context-menu">
     <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-files-context-actions-border" id="oc-files-context-actions-members">
       <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
-        <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" type="button">
+        <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
           <!-- @slot Content of the button -->
           <span class="oc-icon oc-icon-m oc-icon-passive">
             <!---->
@@ -18,7 +18,7 @@ exports[`SpaceContextActions action handlers renders actions that are always ava
     </ul>
     <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-pt-s oc-files-context-actions-border" id="oc-files-context-actions-trashBin">
       <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
-        <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" type="button">
+        <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
           <!-- @slot Content of the button -->
           <span class="oc-icon oc-icon-m oc-icon-passive">
             <!---->
@@ -31,7 +31,7 @@ exports[`SpaceContextActions action handlers renders actions that are always ava
     </ul>
     <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pt-s" id="oc-files-context-actions-sidebar">
       <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
-        <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" type="button">
+        <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
           <!-- @slot Content of the button -->
           <span class="oc-icon oc-icon-m oc-icon-passive">
             <!---->

diff --git a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
@@ -25,7 +25,7 @@ exports[`SpaceHeader should add the "squashed"-class when the sidebar is opened
               <div id="oc-files-context-menu">
                 <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-files-context-actions-border" id="oc-files-context-actions-members">
                   <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
-                    <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" type="button">
+                    <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
                       <!-- @slot Content of the button -->
                       <span class="oc-icon oc-icon-m oc-icon-passive">
                         <!---->
@@ -38,7 +38,7 @@ exports[`SpaceHeader should add the "squashed"-class when the sidebar is opened
                 </ul>
                 <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pt-s" id="oc-files-context-actions-trashBin">
                   <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
-                    <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" type="button">
+                    <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
                       <!-- @slot Content of the button -->
                       <span class="oc-icon oc-icon-m oc-icon-passive">
                         <!---->
@@ -94,7 +94,7 @@ exports[`SpaceHeader space image should show the default image if no other image
               <div id="oc-files-context-menu">
                 <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-files-context-actions-border" id="oc-files-context-actions-members">
                   <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
-                    <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" type="button">
+                    <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
                       <!-- @slot Content of the button -->
                       <span class="oc-icon oc-icon-m oc-icon-passive">
                         <!---->
@@ -107,7 +107,7 @@ exports[`SpaceHeader space image should show the default image if no other image
                 </ul>
                 <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pt-s" id="oc-files-context-actions-trashBin">
                   <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
-                    <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" type="button">
+                    <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
                       <!-- @slot Content of the button -->
                       <span class="oc-icon oc-icon-m oc-icon-passive">
                         <!---->
@@ -159,7 +159,7 @@ exports[`SpaceHeader space image should show the set image 1`] = `
               <div id="oc-files-context-menu">
                 <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pb-s oc-files-context-actions-border" id="oc-files-context-actions-members">
                   <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
-                    <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item" type="button">
+                    <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-show-details-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
                       <!-- @slot Content of the button -->
                       <span class="oc-icon oc-icon-m oc-icon-passive">
                         <!---->
@@ -172,7 +172,7 @@ exports[`SpaceHeader space image should show the set image 1`] = `
                 </ul>
                 <ul class="oc-list oc-my-rm oc-mx-rm oc-files-context-actions oc-pt-s" id="oc-files-context-actions-trashBin">
                   <li class="context-menu oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover">
-                    <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item" type="button">
+                    <button class="oc-button oc-rounded oc-button-s oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw oc-files-actions-delete-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" type="button">
                       <!-- @slot Content of the button -->
                       <span class="oc-icon oc-icon-m oc-icon-passive">
                         <!---->

diff --git a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
@@ -4,10 +4,11 @@
       v-oc-tooltip="showTooltip || action.hideLabel ? action.label(filterParams) : ''"
       :type="action.componentType"
       v-bind="componentProps"
-      :class="[action.class, 'action-menu-item']"
+      :class="[action.class, 'action-menu-item', 'oc-py-s', 'oc-px-m', 'oc-width-1-1']"
       data-testid="action-handler"
       size="small"
       v-on="componentListeners"
+      justify-content="left"
     >
       <oc-img
         v-if="action.img"

diff --git a/packages/web-pkg/src/components/sideBar/Spaces/SpaceInfo.vue b/packages/web-pkg/src/components/sideBar/Spaces/SpaceInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="space_info">
+  <div class="space_info oc-p-s">
     <div class="space_info__body oc-text-overflow oc-flex oc-flex-middle">
       <div class="oc-mr-s">
         <oc-icon
@@ -32,6 +32,10 @@ export default defineComponent({
 
 <style lang="scss">
 .space_info {
+  &.sidebar-panel__space_info {
+    border-bottom: 1px solid var(--oc-color-border);
+  }
+
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;

diff --git a/packages/web-pkg/tests/unit/components/sidebar/Spaces/__snapshots__/SpaceInfo.spec.ts.snap b/packages/web-pkg/tests/unit/components/sidebar/Spaces/__snapshots__/SpaceInfo.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SpaceInfo shows space info 1`] = `
-<div class="space_info">
+<div class="space_info oc-p-s">
   <div class="space_info__body oc-text-overflow oc-flex oc-flex-middle">
     <div class="oc-mr-s">
       <oc-icon-stub accessiblelabel="" class="oc-display-block" color="" filltype="fill" name="layout-grid" size="medium" type="span" variation="passive"></oc-icon-stub>