Design tweaks

apps/files/src/components/AllFilesList.vue

@@ -52,7 +52,10 @@
       </div>
     </template>
     <template #rowColumns="{ item: rowItem, index }">
-      <div :ref="index === 0 ? 'firstRowNameColumn' : null" class="uk-width-expand">
+      <div
+        :ref="index === 0 ? 'firstRowNameColumn' : null"
+        class="uk-width-expand uk-flex uk-flex-middle"
+      >
         <file-item
           :key="rowItem.viewId"
           :item="rowItem"
@@ -67,9 +70,8 @@
         />
         <oc-spinner
           v-if="actionInProgress(rowItem)"
-          size="small"
           :uk-tooltip="disabledActionTooltip(rowItem)"
-          class="uk-margin-small-left"
+          class="oc-ml-s"
         />
       </div>
       <div

apps/files/src/components/Collaborators/AdditionalPermissions.vue

@@ -6,8 +6,8 @@
       :key="permission.name"
       v-model="permission.value"
       :label="permission.description"
-      class="uk-margin-xsmall-right files-collaborators-permission-checkbox"
-      @change="permissionChecked"
+      class="oc-mr-xs files-collaborators-permission-checkbox"
+      @input="permissionChecked"
     />
   </oc-grid>
 </template>

apps/files/src/components/Collaborators/AutocompleteItem.vue

@@ -2,7 +2,7 @@
   <div class="uk-flex uk-flex-middle" :class="collaboratorClass">
     <avatar-image
       v-if="isUser"
-      class="uk-margin-small-right"
+      class="oc-mr-s"
       :width="48"
       :userid="item.value.shareWith"
       :user-name="item.label"
@@ -11,20 +11,14 @@
       <oc-icon
         v-if="item.value.shareType === shareTypes.group"
         key="avatar-group"
-        class="uk-margin-small-right"
+        class="oc-mr-s"
         name="group"
-        size="large"
-      />
-      <oc-icon
-        v-else
-        key="avatar-generic-person"
-        class="uk-margin-small-right"
-        name="person"
-        size="large"
+        size="xlarge"
       />
+      <oc-icon v-else key="avatar-generic-person" class="oc-mr-s" name="person" size="xlarge" />
     </template>
     <div class="files-collaborators-autocomplete-user-text">
-      <div class="uk-text-bold files-collaborators-autocomplete-username" v-text="item.label" />
+      <div class="oc-text-bold files-collaborators-autocomplete-username" v-text="item.label" />
       <div v-if="item.value.shareWithAdditionalInfo" v-text="item.value.shareWithAdditionalInfo" />
     </div>
   </div>

apps/files/src/components/Collaborators/Collaborator.vue

@@ -15,9 +15,9 @@
             :aria-label="$gettext('Show resharer details')"
             :uk-tooltip="$gettext('Show resharer details')"
           >
-            <oc-icon name="repeat" size="xsmall" class="uk-preserve-width" />
+            <oc-icon name="repeat" size="small" class="uk-preserve-width" />
             <span
-              class="uk-padding-remove uk-text-truncate files-collaborators-collaborator-reshare-information"
+              class="oc-p-rm uk-text-truncate files-collaborators-collaborator-reshare-information"
               >{{ $_reshareInformation }}</span
             >
           </oc-button>
@@ -27,21 +27,21 @@
             :toggle="'#' + $_resharerToggleId"
             mode="click"
             :options="{ pos: 'bottom-left', delayHide: 0 }"
-            class="uk-width-large uk-margin-small-top"
+            class="uk-width-large oc-mt-s"
             close-on-click
           >
             <translate tag="h4">Shared by:</translate>
-            <ul class="uk-list uk-list-divider uk-overflow-hidden uk-margin-remove">
+            <ul class="uk-list uk-list-divider uk-overflow-hidden oc-m-rm">
               <li v-for="resharer in collaborator.resharers" :key="resharer.name">
                 <div class="uk-flex uk-flex-middle uk-flex-left">
                   <avatar-image
-                    class="uk-margin-small-right"
+                    class="oc-mr-s"
                     :width="48"
                     :userid="resharer.name"
                     :user-name="resharer.displayName"
                   />
                   <div>
-                    <span class="files-collaborators-resharer-name uk-text-bold">{{
+                    <span class="files-collaborators-resharer-name oc-text-bold">{{
                       resharer.displayName
                     }}</span>
                     <span
@@ -69,18 +69,14 @@
         >
           <oc-icon name="close" />
         </oc-button>
-        <oc-spinner
-          v-else-if="$_loadingSpinnerVisible"
-          :aria-label="$gettext('Removing person')"
-          size="small"
-        />
-        <oc-icon v-else name="lock" class="uk-invisible"></oc-icon>
+        <oc-spinner v-else-if="$_loadingSpinnerVisible" :aria-label="$gettext('Removing person')" />
+        <oc-icon v-else name="lock" class="uk-invisible" />
       </oc-table-cell>
       <oc-table-cell shrink>
         <div key="collaborator-avatar-loaded">
           <avatar-image
             v-if="isUser"
-            class="uk-margin-small-right files-collaborators-collaborator-indicator"
+            class="oc-mr-s files-collaborators-collaborator-indicator"
             :width="48"
             :userid="collaborator.collaborator.name"
             :user-name="collaborator.collaborator.displayName"
@@ -90,17 +86,17 @@
             <oc-icon
               v-if="collaborator.shareType === shareTypes.group"
               key="avatar-group"
-              class="uk-margin-small-right files-collaborators-collaborator-indicator"
+              class="oc-mr-s files-collaborators-collaborator-indicator"
               name="group"
-              size="large"
+              size="xlarge"
               :aria-label="$gettext('Group')"
             />
             <oc-icon
               v-else
               key="avatar-generic-person"
-              class="uk-margin-small-right files-collaborators-collaborator-indicator"
+              class="oc-mr-s files-collaborators-collaborator-indicator"
               name="person"
-              size="large"
+              size="xlarge"
               :aria-label="$gettext('Remote user')"
             />
           </div>
@@ -109,7 +105,7 @@
       <oc-table-cell>
         <div class="uk-flex uk-flex-column uk-flex-center" :class="collaboratorListItemClass">
           <div class="oc-text">
-            <span class="files-collaborators-collaborator-name uk-text-bold">{{
+            <span class="files-collaborators-collaborator-name oc-text-bold">{{
               collaborator.collaborator.displayName
             }}</span>
             <translate
@@ -168,12 +164,11 @@
           >
             <oc-icon
               name="exit_to_app"
-              size="small"
               class="uk-preserve-width"
               :uk-tooltip="$gettext('Navigate to parent')"
             />
             <span
-              class="oc-file-name uk-padding-remove uk-text-truncate files-collaborators-collaborator-via-label"
+              class="oc-file-name oc-p-rm uk-text-truncate files-collaborators-collaborator-via-label"
               >{{ $_viaLabel }}</span
             >
           </oc-button>

apps/files/src/components/Collaborators/EditCollaborator.vue

@@ -15,21 +15,21 @@
     </transition>
     <div
       v-if="user.id !== collaborator.owner.name"
-      class="uk-text-meta uk-flex uk-flex-middle uk-margin-small-bottom"
+      class="uk-text-meta uk-flex uk-flex-middle oc-mb-s"
     >
-      <oc-icon name="repeat" class="uk-margin-small-right" /> {{ collaborator.owner.displayName }}
+      <oc-icon name="repeat" class="oc-mr-s" /> {{ collaborator.owner.displayName }}
     </div>
     <collaborator class="uk-width-expand" :collaborator="collaborator" :first-column="false" />
     <collaborators-edit-options
       :existing-role="$_originalRole"
       :collaborators-permissions="$_originalPermissions"
       :expiration-date="originalExpirationDate"
       :existing-collaborator-type="collaboratorType"
-      class="uk-margin-bottom"
+      class="oc-mb"
       @optionChange="collaboratorOptionChanged"
     />
     <hr class="divider" />
-    <oc-grid gutter="small" class="uk-margin-bottom">
+    <oc-grid gutter="small" class="oc-mb">
       <div>
         <oc-button
           key="edit-collaborator-cancel-button"
@@ -42,7 +42,7 @@
       </div>
       <div>
         <oc-button v-if="saving" key="edit-collaborator-saving-button" :disabled="true">
-          <oc-spinner :aria-label="$gettext('Saving Share')" size="xsmall" />
+          <oc-spinner :aria-label="$gettext('Saving Share')" size="small" />
           <span v-translate :aria-hidden="true">Saving Share</span>
         </oc-button>
         <oc-button
@@ -54,7 +54,7 @@
           variation="primary"
           @click="$_ocCollaborators_saveChanges"
         >
-          <translate>Save Share</translate>
+          <translate>Save</translate>
         </oc-button>
       </div>
     </oc-grid>

apps/files/src/components/Collaborators/NewCollaborator.vue

@@ -49,12 +49,9 @@
         </oc-table>
       </div>
     </oc-grid>
-    <collaborators-edit-options
-      class="uk-margin-bottom"
-      @optionChange="collaboratorOptionChanged"
-    />
+    <collaborators-edit-options class="oc-mb" @optionChange="collaboratorOptionChanged" />
     <hr class="divider" />
-    <oc-grid gutter="small" class="uk-margin-bottom">
+    <oc-grid gutter="small" class="oc-mb">
       <div>
         <oc-button
           key="new-collaborator-cancel-button"
@@ -67,7 +64,7 @@
       </div>
       <div>
         <oc-button v-if="saving" key="new-collaborator-saving-button" :disabled="true">
-          <oc-spinner :aria-label="$gettext('Adding People')" size="xsmall" />
+          <oc-spinner :aria-label="$gettext('Adding People')" size="small" />
           <span v-translate :aria-hidden="true">Adding People</span>
         </oc-button>
         <oc-button

apps/files/src/components/Collaborators/SharedFilesList.vue

@@ -23,7 +23,7 @@
         key="shared-with-header-cell"
         class="uk-visible@s uk-text-nowrap uk-text-meta uk-width-medium uk-text-right"
         translate-context="'People' table column"
-        v-text="$gettext('People')"
+        v-text="$gettext('Shared with')"
       />
       <div
         v-else
@@ -55,7 +55,7 @@
       <div class="oc-icon" />
     </template>
     <template #rowColumns="{ item }">
-      <div class="uk-width-expand">
+      <div class="uk-width-expand uk-flex uk-flex-middle">
         <file-item
           :key="item.path"
           :item="item"
@@ -67,9 +67,8 @@
         />
         <oc-spinner
           v-if="actionInProgress(item)"
-          size="small"
           :uk-tooltip="disabledActionTooltip(item)"
-          class="uk-margin-small-left"
+          class="oc-ml-s"
         />
       </div>
       <div
@@ -80,12 +79,12 @@
         <span
           v-for="share in prepareCollaborators(item.shares)"
           :key="share.id"
-          class="uk-margin-small-right uk-flex uk-flex-middle"
+          class="oc-mr-s uk-flex uk-flex-middle"
         >
           <avatar-image
             v-if="share.shareType === shareTypes.user && share.collaborator"
             :key="'avatar-' + share.id"
-            class="uk-margin-xsmall-right"
+            class="oc-mr-xs"
             :width="24"
             :userid="share.collaborator.name"
             :user-name="share.collaborator.displayName"
@@ -94,8 +93,7 @@
             v-else
             :key="'icon-' + share.id"
             :name="$_shareTypeIcon(share.shareType)"
-            class="uk-margin-xsmall-right"
-            size="small"
+            class="oc-mr-xs"
             variation="active"
             aria-hidden="true"
           />
@@ -126,13 +124,13 @@
         <oc-button
           v-if="item.status === 1"
           variation="raw"
-          class="file-row-share-status-action uk-text-meta uk-margin-left"
+          class="file-row-share-status-action uk-text-meta oc-ml"
           @click="pendingShareAction(item, 'DELETE')"
         >
           <translate>Decline</translate>
         </oc-button>
         <span
-          class="uk-text-small uk-margin-left file-row-share-status-text uk-text-baseline"
+          class="uk-text-small oc-ml file-row-share-status-text uk-text-baseline"
           v-text="shareStatus(item.status)"
         />
       </div>
@@ -142,7 +140,7 @@
         class="uk-visible@s uk-text-meta uk-text-nowrap uk-text-truncate uk-width-small uk-flex uk-flex-middle file-row-collaborators uk-flex-right"
       >
         <avatar-image
-          class="uk-margin-xsmall-right"
+          class="oc-mr-xs"
           :width="24"
           :userid="item.shareOwner.username"
           :user-name="item.shareOwner.displayName"

apps/files/src/components/FileDetails.vue

@@ -2,27 +2,27 @@
   <oc-app-side-bar
     id="files-sidebar"
     :key="highlightedFile.id"
-    class="uk-padding-small uk-overflow-auto uk-height-1-1"
+    class="oc-p-s uk-overflow-auto uk-height-1-1"
     :disable-action="false"
     @close="close()"
   >
     <template v-if="highlightedFile" slot="title">
       <div class="uk-inline">
-        <oc-icon :name="fileTypeIcon(highlightedFile)" size="large" />
+        <oc-icon :name="fileTypeIcon(highlightedFile)" size="xlarge" />
       </div>
       <div class="uk-inline">
         <div class="uk-flex uk-flex-middle">
           <span
             id="files-sidebar-item-name"
-            class="uk-margin-small-right uk-text-bold"
+            class="oc-mr-s oc-text-bold"
             v-text="highlightedFile.name"
           />
         </div>
-        <div v-if="$route.name !== 'files-shared-with-others'">
+        <div v-if="$route.name !== 'files-shared-with-others'" class="uk-flex uk-flex-middle">
           <oc-star
             v-if="!publicPage() && isFavoritesEnabled"
             id="files-sidebar-star-icon"
-            class="uk-inline"
+            class="uk-inline oc-mr-xs"
             :shining="highlightedFile.starred"
             @click.native.stop="toggleFileFavorite(highlightedFile)"
           />

apps/files/src/components/FileItem.vue

@@ -6,7 +6,7 @@
     <oc-img
       v-if="previewUrl"
       key="file-preview"
-      class="files-list-file-preview uk-margin-small-right"
+      class="files-list-file-preview oc-mr-s"
       :class="{ 'files-list-file-preview-small': !hasTwoRows }"
       :src="previewUrl"
       alt=""
@@ -15,14 +15,15 @@
       v-else
       key="file-icon"
       :name="previewIcon"
-      :size="hasTwoRows ? 'medium' : 'small'"
+      :size="hasTwoRows ? 'large' : 'medium'"
       aria-hidden="true"
-      class="uk-margin-small-right"
+      class="oc-mr-s"
+      variation="file-type"
     />
     <div class="uk-width-expand">
       <div class="file-row-name uk-text-truncate" :filename="item.name">
         <span
-          class="uk-text-bold oc-cursor-pointer oc-file-name uk-padding-remove-left"
+          class="oc-text-bold oc-cursor-pointer oc-file-name oc-pl-rm"
           role="button"
           v-text="fileName"
         /><span