[full-ci] Align drop menus (#7365)

* Align drop menu styling in right sidebar * Update to ODS v14.0.0-alpha.12
owncloud · Aug 1, 2022 · 8efecca · 8efecca
1 parent 82b0dcc
commit 8efecca
Show file tree

Hide file tree

Showing 16 changed files with 432 additions and 333 deletions.
diff --git a/changelog/unreleased/enhancement-drop-menu-styling-right-sidebar b/changelog/unreleased/enhancement-drop-menu-styling-right-sidebar
@@ -0,0 +1,6 @@
+Enhancement: Drop menu styling in right sidebar
+
+We've styled and aligned all the drop menus in the right sidebar to match with the other drop menus.
+
+https://github.com/owncloud/web/pull/7365
+https://github.com/owncloud/web/issues/7335
diff --git a/changelog/unreleased/enhancement-update-ods b/changelog/unreleased/enhancement-update-ods
@@ -1,6 +1,6 @@
-Enhancement: Update ODS to v14.0.0-alpha.8
+Enhancement: Update ODS to v14.0.0-alpha.12
 
-We updated the ownCloud Design System to version 14.0.0-alpha.8. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+We updated the ownCloud Design System to version 14.0.0-alpha.12. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
 
 - Bugfix - Remove click event on OcIcon: #2216
 - Bugfix - Lazy loading render performance: #2260
@@ -15,6 +15,8 @@ We updated the ownCloud Design System to version 14.0.0-alpha.8. Please refer to
 - Enhancement - Progress bar indeterminate state: #2200
 - Enhancement - Redesign notifications: #2210
 - Enhancement - Use oc colors for selected background and deselect icon: #2262
+- Enhancement - Adjust avatar font weight from bold to normal: #2275
+- Enhancement - Add offset property to the drop component: #2276
 
 https://github.com/owncloud/web/pull/7355
-https://github.com/owncloud/owncloud-design-system/releases/tag/v14.0.0-alpha.8
+https://github.com/owncloud/owncloud-design-system/releases/tag/v14.0.0-alpha.12
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -7,10 +7,10 @@
       ref="expirationDateDrop"
       :toggle="'#' + editShareBtnId"
       mode="click"
-      padding-size="remove"
+      padding-size="small"
     >
       <oc-list class="collaborator-edit-dropdown-options-list" :aria-label="shareEditOptions">
-        <li v-if="isExpirationSupported" class="oc-px-s oc-py-xs">
+        <li v-if="isExpirationSupported" class="oc-rounded oc-menu-item-hover">
           <oc-datepicker
             v-model="enteredExpirationDate"
             :min-date="minExpirationDate"
@@ -22,25 +22,28 @@
           >
             <template #default="{ togglePopover }">
               <oc-button
-                class="files-collaborators-expiration-button"
+                class="files-collaborators-expiration-button oc-p-s action-menu-item"
                 data-testid="recipient-datepicker-btn"
                 appearance="raw"
                 @click="togglePopover"
               >
+                <oc-icon name="calendar-event" fill-type="line" size="medium" variation="passive" />
                 <span v-if="isExpirationDateSet" v-text="$gettext('Edit expiration date')" />
                 <span v-else v-text="$gettext('Set expiration date')" />
               </oc-button>
             </template>
           </oc-datepicker>
         </li>
-        <li v-for="(option, i) in options" :key="i" class="oc-px-s oc-py-xs">
+        <li v-for="(option, i) in options" :key="i" class="oc-rounded oc-menu-item-hover">
           <oc-button
             v-if="option.enabled"
             appearance="raw"
+            class="oc-p-s action-menu-item"
             :class="option.class"
             v-bind="option.additionalAttributes || {}"
             @click="option.method()"
           >
+            <oc-icon :name="option.icon" fill-type="line" size="medium" variation="passive" />
             <span v-text="option.title" />
           </oc-button>
         </li>
@@ -92,6 +95,7 @@ export default {
           method: this.removeExpirationDate,
           class: 'remove-expiration-date',
           enabled: this.canEditOrDelete,
+          icon: 'calendar',
           additionalAttributes: {
             'data-testid': 'collaborator-remove-expiration-btn'
           }
@@ -104,15 +108,16 @@ export default {
           method: this.removeShare,
           class: 'remove-share',
           enabled: this.canEditOrDelete,
+          icon: 'delete-bin-5',
           additionalAttributes: {
-            variation: 'danger',
             'data-testid': 'collaborator-remove-share-btn'
           }
         },
         {
           title: this.$gettext('Access details'),
           method: this.showAccessDetails,
           enabled: true,
+          icon: 'information',
           class: 'show-access-details'
         }
       ]
@@ -253,3 +258,9 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+.collaborator-edit-dropdown-options-list .action-menu-item {
+  width: 100%;
+  justify-content: flex-start;
+}
+</style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -20,7 +20,9 @@
       ref="rolesDrop"
       :toggle="'#' + roleButtonId"
       mode="click"
-      padding-size="remove"
+      padding-size="small"
+      class="files-recipient-role-drop"
+      offset="0"
       close-on-click
     >
       <oc-list class="files-recipient-role-drop-list" :aria-label="rolesListAriaLabel">
@@ -30,12 +32,21 @@
             ref="roleSelect"
             appearance="raw"
             justify-content="space-between"
-            class="files-recipient-role-drop-btn oc-py-xs oc-px-s"
-            :class="{ selected: isSelectedRole(role) }"
+            class="files-recipient-role-drop-btn oc-p-s"
+            :class="{
+              'oc-background-primary-gradient': isSelectedRole(role),
+              selected: isSelectedRole(role)
+            }"
+            :variation="isSelectedRole(role) ? 'inverse' : 'passive'"
             @click="selectRole(role)"
           >
-            <role-item :role="role" :allow-share-permission="allowSharePermission" />
-            <oc-icon v-if="isSelectedRole(role)" name="check" />
+            <span class="oc-flex oc-flex-middle">
+              <oc-icon :name="role.icon" class="oc-pl-s oc-pr-m" />
+              <role-item :role="role" :allow-share-permission="allowSharePermission" />
+            </span>
+            <span class="oc-flex">
+              <oc-icon v-if="isSelectedRole(role)" name="check" />
+            </span>
           </oc-button>
         </li>
       </oc-list>
@@ -46,19 +57,23 @@
       class="files-recipient-custom-permissions-drop"
       mode="manual"
       :target="'#' + roleButtonId"
-      padding-size="small"
+      padding-size="remove"
     >
-      <h4 class="oc-text-bold oc-text-initial" v-text="$gettext(customPermissionsRole.label)" />
-      <oc-list class="oc-mb">
+      <h4
+        class="oc-text-bold oc-text-initial oc-m-rm oc-px-m oc-pt-m oc-pb-s"
+        v-text="$gettext(customPermissionsRole.label)"
+      />
+      <oc-list>
         <li
           v-for="permission in availablePermissions"
           :key="`files-collaborators-permission-${permission.key}`"
-          class="oc-my-xs"
+          class="oc-my-s oc-px-m"
         >
           <oc-checkbox
             :id="`files-collaborators-permission-${permission.key}`"
             :key="`files-collaborators-permission-checkbox-${permission.key}`"
             v-model="customPermissions"
+            size="large"
             :data-testid="`files-collaborators-permission-${permission.key}`"
             :label="$gettext(permission.label)"
             :option="permission"
@@ -67,12 +82,21 @@
           />
         </li>
       </oc-list>
-      <div class="files-recipient-custom-permissions-drop-cancel-confirm-btns">
-        <oc-button size="small" @click="cancelCustomPermissions" v-text="$gettext('Cancel')" />
+      <div
+        class="
+          files-recipient-custom-permissions-drop-cancel-confirm-btns
+          oc-px-m oc-py-s oc-mt-m oc-rounded-bottom
+        "
+      >
         <oc-button
+          size="small"
+          @click="cancelCustomPermissions"
+          v-text="$gettext('Cancel')"
+        /><oc-button
           size="small"
           variation="primary"
           appearance="filled"
+          class="oc-ml-s"
           @click="confirmCustomPermissions"
           v-text="$gettext('Apply')"
         />
@@ -326,6 +350,8 @@ export default {
 <style lang="scss" scoped>
 .files-recipient {
   &-role-drop {
+    width: 400px;
+
     &-list {
       &:hover .files-recipient-role-drop-btn.selected:not(:hover),
       &:focus .files-recipient-role-drop-btn.selected:not(:focus) {
@@ -335,26 +361,46 @@ export default {
           fill: var(--oc-color-swatch-passive-default);
         }
       }
+
+      li {
+        margin: var(--oc-space-xsmall) 0;
+      }
     }
 
     &-btn {
-      border-radius: 0;
       width: 100%;
+      gap: var(--oc-space-medium);
 
       &:hover,
       &:focus {
-        color: var(--oc-color-text-default) !important;
+        background-color: var(--oc-color-background-hover);
+        color: var(--oc-color-swatch-passive-default);
+        text-decoration: none;
       }
 
       &.selected {
-        background-color: var(--oc-color-swatch-primary-default) !important;
-        color: var(--oc-color-text-inverse) !important;
+        color: var(--oc-color-swatch-inverse-default) !important;
 
         ::v-deep .oc-icon > svg {
-          fill: var(--oc-color-text-inverse) !important;
+          fill: var(--oc-color-swatch-inverse-default) !important;
         }
       }
     }
   }
+
+  &-custom-permissions-drop-cancel-confirm-btns {
+    background: var(--oc-color-background-hover);
+    text-align: right;
+  }
+}
+
+.files-collaborators-permission-checkbox::v-deep {
+  .oc-checkbox {
+    border: 2px solid var(--oc-color-background-hover);
+  }
+
+  label {
+    margin-left: var(--oc-space-small);
+  }
 }
 </style>