Style fixes for menus (#6762)

unify context menu appearance Co-authored-by: Diogo Castro <diogo.castro@cern.ch>
owncloud · Jun 2, 2022 · 4afcc75 · 4afcc75
1 parent ae65ef2
commit 4afcc75
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 72 deletions.
diff --git a/changelog/unreleased/enhancement-consistend-dropdows b/changelog/unreleased/enhancement-consistend-dropdows
@@ -0,0 +1,6 @@
+Enhancement: Consistent dropdown menus
+
+Made the main dropdown menus (new, upload, context, etc) constistent in size, hover effect and spacing/margins.
+
+https://github.com/owncloud/web/issues/6555
+https://github.com/owncloud/web/pull/6762
diff --git a/changelog/unreleased/enhancement-update-ods b/changelog/unreleased/enhancement-update-ods
@@ -10,10 +10,11 @@ We updated the ownCloud Design System to version 13.1.0-rc.5. Please refer to th
 - Enhancement - Redesign OcGhostElement: https://github.com/owncloud/owncloud-design-system/pull/2049
 - Enhancement - Export package members: https://github.com/owncloud/owncloud-design-system/pull/2048
 - Enhancement - Make OcResource inline-flex: https://github.com/owncloud/owncloud-design-system/pull/2041
+- Enhancement - Hover in ocDrop menus: https://github.com/owncloud/owncloud-design-system/pull/2069
 - Bugfix - Disabled textarea color contrast in darkmode: https://github.com/owncloud/owncloud-design-system/pull/2055
 - Bugfix - OcTextInput: Fix event handlers in loops: https://github.com/owncloud/owncloud-design-system/pull/2054
 
 https://github.com/owncloud/web/pull/6749
 https://github.com/owncloud/web/pull/6750
 https://github.com/owncloud/web/pull/6953
-https://github.com/owncloud/owncloud-design-system/releases/tag/v13.1.0-rc.5
+https://github.com/owncloud/owncloud-design-system/releases/tag/v13.1.0-rc.9
diff --git a/packages/web-app-files/src/components/ActionMenuItem.vue b/packages/web-app-files/src/components/ActionMenuItem.vue
@@ -109,12 +109,5 @@ export default {
 <style lang="scss">
 .action-menu-item {
   vertical-align: middle;
-  &:hover {
-    color: var(--oc-color-swatch-brand-hover);
-    text-decoration: underline;
-    .oc-icon > svg {
-      fill: var(--oc-color-swatch-brand-hover) !important;
-    }
-  }
 }
 </style>
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -22,33 +22,43 @@
         padding-size="small"
       >
         <oc-list id="create-list">
-          <li class="create-list-folder">
+          <li class="create-list-folder oc-menu-item-hover">
             <oc-button id="new-folder-btn" appearance="raw" @click="showCreateResourceModal">
-              <oc-resource-icon :resource="{ isFolder: true, extension: '' }" />
+              <oc-resource-icon :resource="{ isFolder: true, extension: '' }" size="medium" />
               <translate>Folder</translate>
             </oc-button>
           </li>
-          <li v-for="(newFileHandler, key) in newFileHandlers" :key="key" class="create-list-file">
+          <li
+            v-for="(newFileHandler, key) in newFileHandlers"
+            :key="key"
+            class="create-list-file oc-menu-item-hover"
+          >
             <oc-button
               appearance="raw"
               :class="['new-file-btn-' + newFileHandler.ext]"
               @click="showCreateResourceModal(false, newFileHandler.ext, newFileHandler.action)"
             >
-              <oc-resource-icon :resource="{ type: 'file', extension: newFileHandler.ext }" />
+              <oc-resource-icon
+                :resource="{ type: 'file', extension: newFileHandler.ext }"
+                size="medium"
+              />
               <span>{{ newFileHandler.menuTitle($gettext) }}</span>
             </oc-button>
           </li>
           <template v-if="mimetypesAllowedForCreation">
             <li
               v-for="(mimetype, key) in mimetypesAllowedForCreation"
               :key="key"
-              class="create-list-file"
+              class="create-list-file oc-menu-item-hover"
             >
               <oc-button
                 appearance="raw"
                 @click="showCreateResourceModal(false, mimetype.ext, false, true)"
               >
-                <oc-resource-icon :resource="{ type: 'file', extension: mimetype.ext }" />
+                <oc-resource-icon
+                  :resource="{ type: 'file', extension: mimetype.ext }"
+                  size="medium"
+                />
                 <translate :translate-params="{ name: mimetype.name }">%{name}</translate>
               </oc-button>
             </li>
@@ -89,10 +99,10 @@
       padding-size="small"
     >
       <oc-list id="upload-list">
-        <li>
+        <li class="oc-menu-item-hover">
           <resource-upload ref="folder-upload" btn-class="oc-width-1-1" />
         </li>
-        <li>
+        <li class="oc-menu-item-hover">
           <resource-upload ref="file-upload" btn-class="oc-width-1-1" :is-folder="true" />
         </li>
       </oc-list>
@@ -831,12 +841,24 @@ export default defineComponent({
   .create-list-folder {
     border-bottom: 1px solid var(--oc-color-border);
   }
-  .create-list-file button {
-    margin: 2px 0;
+  .create-list-folder button {
+    margin-bottom: 8px;
   }
+  .create-list-file:nth-child(2) button {
+    margin-top: 6px;
+  }
+}
+#upload-list,
+#new-file-menu-drop {
+  min-width: 250px;
 }
+</style>
+<style lang="scss">
+#create-list,
 #upload-list,
 #new-file-menu-drop {
-  min-width: 200px;
+  .oc-icon-m svg {
+    height: 100% !important;
+  }
 }
 </style>
diff --git a/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/ResourceUpload.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <oc-button :class="btnClass" justify-content="left" appearance="raw" @click="triggerUpload">
-      <oc-resource-icon :resource="{ extension: '', isFolder }" />
+      <oc-resource-icon :resource="{ extension: '', isFolder }" size="medium" />
       <span :id="uploadLabelId">{{ buttonLabel }}</span>
     </oc-button>
     <input

diff --git a/packages/web-app-files/src/components/ContextActionMenu.vue b/packages/web-app-files/src/components/ContextActionMenu.vue
@@ -12,7 +12,7 @@
         :key="`section-${section.name}-action-${actionIndex}`"
         :action="action"
         :items="items"
-        class="oc-files-context-action oc-px-s oc-rounded"
+        class="oc-files-context-action oc-px-s oc-rounded oc-menu-item-hover"
       />
     </oc-list>
   </div>
@@ -62,27 +62,18 @@ export default {
   white-space: normal;
 
   > li {
-    padding: 6px;
-    &:hover {
-      background-color: var(--oc-color-background-hover);
-    }
-
+    padding-left: 0 !important;
+    padding-right: 0 !important;
     a,
     button,
     span {
-      color: var(--oc-color-swatch-passive-default) !important;
       display: inline-flex;
       font-weight: normal !important;
       gap: 10px;
       justify-content: flex-start;
       vertical-align: top;
       width: 100%;
       text-align: left;
-
-      &:hover {
-        color: var(--oc-color-swatch-passive-default);
-        text-decoration: none !important;
-      }
     }
   }
 

diff --git a/...b-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.js.snap b/...b-app-files/tests/unit/components/AppBar/Upload/__snapshots__/ResourceUpload.spec.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Resource Upload Component file upload should render component 1`] = `<div><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span> <span id="files-file-upload-button">Files</span></button> <input id="files-file-upload-input" type="file" aria-labelledby="files-file-upload-button" name="folder" tabindex="-1" multiple="multiple" class="upload-input-target"></div>`;
+exports[`Resource Upload Component file upload should render component 1`] = `<div><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-m oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span> <span id="files-file-upload-button">Files</span></button> <input id="files-file-upload-input" type="file" aria-labelledby="files-file-upload-button" name="folder" tabindex="-1" multiple="multiple" class="upload-input-target"></div>`;
 
-exports[`Resource Upload Component folder upload should render component 1`] = `<div><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-folder"><!----></span> <span id="files-folder-upload-button">Folder</span></button> <input id="files-folder-upload-input" type="file" aria-labelledby="files-folder-upload-button" name="file" tabindex="-1" webkitdirectory="true" mozdirectory="true" allowdirs="true" class="upload-input-target"></div>`;
+exports[`Resource Upload Component folder upload should render component 1`] = `<div><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw"><span class="oc-icon oc-icon-m oc-icon-passive oc-resource-icon oc-resource-icon-folder"><!----></span> <span id="files-folder-upload-button">Folder</span></button> <input id="files-folder-upload-input" type="file" aria-labelledby="files-folder-upload-button" name="file" tabindex="-1" webkitdirectory="true" mozdirectory="true" allowdirs="true" class="upload-input-target"></div>`;