[full-ci] Make ui small again (#7363)

changelog/unreleased/enhancement-streamline-ui-sizings

@@ -0,0 +1,7 @@
+Enhancement: Streamline UI sizings
+
+We've streamlined the font sizes and some other size related options to let the web UI appear a bit more condensed. In addition to that we've chosen a new font family for the UI ("Inter") which is embedded into the ownCloud Design System by default now.
+
+https://github.com/owncloud/web/pull/7363
+https://github.com/owncloud/web/issues/7333
+https://github.com/owncloud/owncloud-design-system/pull/2270

changelog/unreleased/enhancement-update-ods

@@ -1,22 +1,28 @@
-Enhancement: Update ODS to v14.0.0-alpha.12
+Enhancement: Update ODS to v14.0.0-alpha.16
 
-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:
+We updated the ownCloud Design System to version 14.0.0-alpha.16. 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
-- Bugfix - Omit special characters in user avatar initials: #2267
-- Bugfix - Avatar link icon: #2269
-- Bugfix - Remove width shrinking of the ocAvatarItem: #2242
-- Change - Remove OcAlert component: #2210
-- Change - Remove transition animations: #2210
-- Change - Revamp animations: #2210
-- Change - OcTable emit event data on row click: #2218
-- Enhancement - OcCheckbox add outline: #2218
-- 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
+* Bugfix - Omit special characters in user avatar initials: [#2070](https://github.com/owncloud/owncloud-design-system/issues/2070)
+* Bugfix - Avatar link icon: [#2269](https://github.com/owncloud/owncloud-design-system/pull/2269)
+* Bugfix - Lazy loading render performance: [#2260](https://github.com/owncloud/owncloud-design-system/pull/2260)
+* Bugfix - Remove width shrinking of the ocAvatarItem: [#2241](https://github.com/owncloud/owncloud-design-system/issues/2241)
+* Bugfix - Remove click event on OcIcon: [#2216](https://github.com/owncloud/owncloud-design-system/pull/2216)
+* Change - Redesign contextual helper: [#2271](https://github.com/owncloud/owncloud-design-system/pull/2271)
+* Change - Remove OcAlert component: [#2210](https://github.com/owncloud/owncloud-design-system/pull/2210)
+* Change - Remove transition animations: [#2210](https://github.com/owncloud/owncloud-design-system/pull/2210)
+* Change - Revamp animations: [#2210](https://github.com/owncloud/owncloud-design-system/pull/2210)
+* Change - OcTable emit event data on row click: [#2218](https://github.com/owncloud/owncloud-design-system/pull/2218)
+* Enhancement - Add nestedd drop functionality: [#2238](https://github.com/owncloud/owncloud-design-system/issues/2238)
+* Enhancement - Add OcInfoDrop: [#2286](https://github.com/owncloud/owncloud-design-system/pull/2286)
+* Enhancement - Add rounded prop to OcTag: [#2284](https://github.com/owncloud/owncloud-design-system/pull/2284)
+* Enhancement - Adjust avatar font weight from bold to normal: [#2275](https://github.com/owncloud/owncloud-design-system/pull/2275)
+* Enhancement - OcCheckbox add outline: [#2218](https://github.com/owncloud/owncloud-design-system/pull/2218)
+* Enhancement - Add offset property to the drop component: [#7335](https://github.com/owncloud/web/issues/7335)
+* Enhancement - Make UI smaller: [#2270](https://github.com/owncloud/owncloud-design-system/pull/2270)
+* Enhancement - OcSelect dark mode improvements: [#2262](https://github.com/owncloud/owncloud-design-system/pull/2262)
+* Enhancement - Progress bar indeterminate state: [#2200](https://github.com/owncloud/owncloud-design-system/pull/2200)
+* Enhancement - Redesign notifications: [#2210](https://github.com/owncloud/owncloud-design-system/pull/2210)
+* Enhancement - Use Inter font: [#2270](https://github.com/owncloud/owncloud-design-system/pull/2270)
 
 https://github.com/owncloud/web/pull/7355
-https://github.com/owncloud/owncloud-design-system/releases/tag/v14.0.0-alpha.12
+https://github.com/owncloud/owncloud-design-system/releases/tag/v14.0.0-alpha.16

docker-compose.yml

@@ -80,6 +80,7 @@ services:
       - ./dist/js:/mnt/data/apps/web/js
       - ./dist/themes:/mnt/data/apps/web/themes
       - ./dist/icons:/mnt/data/apps/web/icons
+      - ./dist/fonts:/mnt/data/apps/web/fonts
       - ./dist/index.html:/mnt/data/apps/web/index.html
       - ./dist/manifest.json:/mnt/data/apps/web/manifest.json
       - ./dist/oidc-callback.html:/mnt/data/apps/web/oidc-callback.html

packages/web-app-external/src/components/ErrorScreen.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="oc-text-center">
     <oc-icon size="xxlarge" name="error-warning" fill-type="line" />
-    <p v-if="message" class="oc-text-lead">{{ message }}</p>
+    <p v-if="message" class="oc-text-xlarge">{{ message }}</p>
   </div>
 </template>
 

packages/web-app-external/tests/unit/components/__snapshots__/ErrorScreen.spec.ts.snap

@@ -3,6 +3,6 @@
 exports[`The external app error screen component displays an icon and a paragraph 1`] = `
 <div class="oc-text-center">
   <ocicon-stub size="xxlarge" name="error-warning" fill-type="line"></ocicon-stub>
-  <p class="oc-text-lead">Error when loading the application</p>
+  <p class="oc-text-xlarge">Error when loading the application</p>
 </div>
 `;

packages/web-app-files/src/components/ActionMenuItem.vue

@@ -1,7 +1,7 @@
 <template>
   <li>
-    <component
-      :is="action.componentType"
+    <oc-button
+      :type="action.componentType"
       v-bind="getComponentProps(action, items)"
       :class="[action.class, 'action-menu-item']"
       data-testid="action-handler"
@@ -43,7 +43,7 @@
         class="oc-invisible-sr"
         v-text="$gettext('(Opens in new window)')"
       />
-    </component>
+    </oc-button>
   </li>
 </template>
 
@@ -78,21 +78,24 @@ export default {
   },
   methods: {
     getComponentProps(action, resources) {
+      const props = {
+        appearance: this.appearance,
+        ...(action.isDisabled && { disabled: action.isDisabled() }),
+        ...(action.variation && { variation: action.variation })
+      }
+
       if (action.componentType === 'router-link' && action.route) {
         return {
+          ...props,
           to: action.route({ resources })
         }
       }
 
-      return {
-        appearance: this.appearance,
-        ...(action.isDisabled && { disabled: action.isDisabled() }),
-        ...(action.variation && { variation: action.variation })
-      }
+      return props
     },
 
     getComponentListeners(action, resources) {
-      if (typeof action.handler !== 'function' || action.componentType !== 'oc-button') {
+      if (typeof action.handler !== 'function' || action.componentType !== 'button') {
         return {}
       }
 
@@ -122,7 +125,7 @@ export default {
 }
 .oc-files-context-action-shortcut {
   justify-content: right !important;
-  font-size: 0.85rem;
+  font-size: var(--oc-font-size-small);
   font-weight: bold !important;
   opacity: 0.7;
 }

packages/web-app-files/src/components/AppBar/CreateAndUpload.vue

@@ -856,7 +856,7 @@ export default defineComponent({
 }
 #upload-list,
 #new-file-menu-drop {
-  min-width: 250px;
+  min-width: 230px;
 }
 </style>
 <style lang="scss">

packages/web-app-files/src/components/FilesList/NotFoundMessage.vue

@@ -4,7 +4,7 @@
     class="oc-text-center oc-flex-middle oc-flex oc-flex-center oc-flex-column"
   >
     <oc-icon name="cloud" type="div" size="xxlarge" />
-    <div class="oc-text-muted oc-text-large">
+    <div class="oc-text-muted oc-text-xlarge">
       <translate>Resource not found</translate>
     </div>
     <div class="oc-text-muted">

packages/web-app-files/src/components/FilesList/ResourceTable.vue

@@ -809,6 +809,9 @@ export default defineComponent({
     opacity: 0.6;
   }
   &-resource-wrapper {
+    display: flex;
+    align-items: center;
+
     &-limit-max-width {
       max-width: calc(100% - var(--oc-space-medium));
     }
@@ -821,7 +824,7 @@ export default defineComponent({
   }
   &-edit-name {
     display: inline-flex;
-    vertical-align: super;
+    margin-left: var(--oc-space-xsmall);
     svg {
       fill: var(--oc-color-text-muted);
     }

packages/web-app-files/src/components/Search/Preview.vue

@@ -139,11 +139,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.files-search-preview {
-  button {
-    font-size: 0.8rem;
-  }
-}
-</style>

packages/web-app-files/src/components/Shares/SharedWithMeSection.vue

@@ -2,7 +2,7 @@
   <div>
     <h2 class="oc-px-m oc-py-s">
       {{ title }}
-      <span class="oc-text-initial">({{ items.length }})</span>
+      <span class="oc-text-medium">({{ items.length }})</span>
     </h2>
 
     <no-content-message v-if="!items.length" class="files-empty oc-flex-stretch" icon="group">

packages/web-app-files/src/components/SideBar/FileInfo.vue

@@ -112,10 +112,9 @@ export default {
 
   &__body {
     text-align: left;
-    font-size: 0.75rem;
 
     h3 {
-      font-size: 0.9rem;
+      font-size: var(--oc-font-size-medium);
       font-weight: 600;
       margin: 0;
       word-break: break-all;

packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue

@@ -60,7 +60,7 @@
       padding-size="remove"
     >
       <h4
-        class="oc-text-bold oc-text-initial oc-m-rm oc-px-m oc-pt-m oc-pb-s"
+        class="oc-text-bold oc-m-rm oc-px-m oc-pt-m oc-pb-s"
         v-text="$gettext(customPermissionsRole.label)"
       />
       <oc-list>

packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="oc-files-file-link" class="oc-position-relative">
     <div class="oc-flex">
-      <h3 class="oc-text-bold oc-m-rm oc-text-initial" v-text="linksHeading" />
+      <h3 class="oc-text-bold oc-text-medium oc-m-rm" v-text="linksHeading" />
       <oc-contextual-helper v-if="helpersEnabled" class="oc-pl-xs" v-bind="viaLinkHelp" />
     </div>
     <p
@@ -71,7 +71,7 @@
     <div v-if="indirectLinks.length" id="indirect-link-list">
       <hr class="oc-my-m" />
       <div class="oc-flex">
-        <h3 class="oc-text-bold oc-m-rm oc-text-initial">
+        <h3 class="oc-text-bold oc-m-rm oc-text-medium">
           <span v-text="indirectLinksHeading" />
         </h3>
         <oc-contextual-helper v-if="helpersEnabled" class="oc-pl-xs" v-bind="indirectLinkHelp" />

packages/web-app-files/src/components/SideBar/Shares/FileShares.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="oc-files-sharing-sidebar" class="oc-position-relative">
     <div class="oc-flex">
-      <h3 v-translate class="oc-text-bold oc-m-rm oc-text-initial">Share with people</h3>
+      <h3 v-translate class="oc-text-bold oc-text-medium oc-m-rm">Share with people</h3>
       <oc-contextual-helper
         v-if="helpersEnabled"
         class="oc-pl-xs"
@@ -16,7 +16,7 @@
       v-text="noResharePermsMessage"
     />
     <div v-if="hasSharees" class="avatars-wrapper oc-flex oc-flex-middle oc-flex-between">
-      <h4 class="oc-text-initial oc-text-bold oc-my-rm" v-text="sharedWithLabel" />
+      <h4 class="oc-text-bold oc-my-rm" v-text="sharedWithLabel" />
     </div>
     <template v-if="hasSharees">
       <ul
@@ -43,7 +43,7 @@
       </div>
     </template>
     <template v-if="showSpaceMembers">
-      <h4 class="oc-text-initial oc-text-bold oc-my-s" v-text="spaceMemberLabel" />
+      <h4 class="oc-text-bold oc-my-s" v-text="spaceMemberLabel" />
       <ul
         id="space-collaborators-list"
         class="oc-list oc-list-divider oc-overflow-hidden oc-m-rm"

packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="oc-files-sharing-sidebar" class="oc-position-relative">
     <div class="oc-flex">
-      <h3 v-translate class="oc-text-bold oc-m-rm oc-text-initial">Members</h3>
+      <h3 v-translate class="oc-text-bold oc-text-medium oc-m-rm">Members</h3>
       <oc-contextual-helper v-if="helpersEnabled" class="oc-pl-xs" v-bind="spaceAddMemberHelp" />
     </div>
     <invite-collaborator-form

packages/web-app-files/src/components/SideBar/SpaceInfo.vue

@@ -37,10 +37,10 @@ export default {
 
   &__body {
     text-align: left;
-    font-size: 0.75rem;
+    font-size: var(--oc-font-size-small);
 
     h3 {
-      font-size: 0.9rem;
+      font-size: var(--oc-font-size-medium);
       font-weight: 600;
       margin: 0;
     }

packages/web-app-files/src/mixins/actions/acceptShare.ts

@@ -36,7 +36,7 @@ export default {
             })
             return !acceptDisabled
           },
-          componentType: 'oc-button',
+          componentType: 'button',
           class: 'oc-files-actions-accept-share-trigger'
         }
       ]

packages/web-app-files/src/mixins/actions/copy.js

@@ -47,7 +47,7 @@ export default {
             // a user always has their home dir with write access
             return true
           },
-          componentType: 'oc-button',
+          componentType: 'button',
           class: 'oc-files-actions-copy-trigger'
         }
       ]

packages/web-app-files/src/mixins/actions/createQuicklink.ts

@@ -25,7 +25,7 @@ export default {
             }
             return canShare(resources[0], this.$store)
           },
-          componentType: 'oc-button',
+          componentType: 'button',
           class: 'oc-files-actions-create-quicklink-trigger'
         }
       ]

packages/web-app-files/src/mixins/actions/declineShare.ts

@@ -45,7 +45,7 @@ export default {
             })
             return !declineDisabled
           },
-          componentType: 'oc-button',
+          componentType: 'button',
           class: 'oc-files-actions-decline-share-trigger'
         }
       ]

packages/web-app-files/src/mixins/actions/delete.js

@@ -39,7 +39,7 @@ export default {
             })
             return !deleteDisabled
           },
-          componentType: 'oc-button',
+          componentType: 'button',
           class: 'oc-files-actions-delete-trigger'
         },
         {
@@ -60,7 +60,7 @@ export default {
             }
             return resources.length > 0
           },
-          componentType: 'oc-button',
+          componentType: 'button',
           class: 'oc-files-actions-delete-permanent-trigger'
         }
       ]

packages/web-app-files/src/mixins/actions/downloadArchive.js

@@ -54,7 +54,7 @@ export default {
             return !downloadDisabled
           },
           canBeDefault: true,
-          componentType: 'oc-button',
+          componentType: 'button',
           class: 'oc-files-actions-download-archive-trigger'
         }
       ]

packages/web-app-files/src/mixins/actions/downloadFile.js

@@ -39,7 +39,7 @@ export default {
             return resources[0].canDownload()
           },
           canBeDefault: true,
-          componentType: 'oc-button',
+          componentType: 'button',
           class: 'oc-files-actions-download-file-trigger'
         }
       ]

packages/web-app-files/src/mixins/actions/emptyTrashBin.js

@@ -28,7 +28,7 @@ export default {
             return resources.length === 0
           },
           isDisabled: () => this.activeFiles.length === 0,
-          componentType: 'oc-button',
+          componentType: 'button',
           class: 'oc-files-actions-empty-trash-bin-trigger',
           variation: 'danger'
         }

packages/web-app-files/src/mixins/actions/favorite.js

@@ -32,7 +32,7 @@ export default {
 
             return this.capabilities?.files?.favorites
           },
-          componentType: 'oc-button',
+          componentType: 'button',
           class: 'oc-files-actions-favorite-trigger'
         }
       ]

packages/web-app-files/src/mixins/actions/move.js

@@ -49,7 +49,7 @@ export default {
             })
             return !moveDisabled
           },
-          componentType: 'oc-button',
+          componentType: 'button',
           class: 'oc-files-actions-move-trigger'
         }
       ]

packages/web-app-files/src/mixins/actions/paste.js

@@ -49,7 +49,7 @@ export default {
             // a user always has their home dir with write access
             return true
           },
-          componentType: 'oc-button',
+          componentType: 'button',
           class: 'oc-files-actions-copy-trigger'
         }
       ]