Merge pull request #4120 from owncloud/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