Merge pull request #2099 from nextcloud/fix/new-album-layout

Fix new album form layout
nextcloud · Oct 23, 2023 · c76a8bd · c76a8bd
2 parents fb96c79 + 7562a46
commit c76a8bd
Show file tree

Hide file tree

Showing 15 changed files with 44 additions and 67 deletions.
diff --git a/js/photos-main.js b/js/photos-main.js
diff --git a/js/photos-main.js.map b/js/photos-main.js.map
diff --git a/...extcloud_sharing_dist_index_js-node_modules_vue-material-design-icons_AccountGr-4153cd.js b/...extcloud_sharing_dist_index_js-node_modules_vue-material-design-icons_AccountGr-4153cd.js
diff --git a/...loud_sharing_dist_index_js-node_modules_vue-material-design-icons_AccountGr-4153cd.js.map b/...loud_sharing_dist_index_js-node_modules_vue-material-design-icons_AccountGr-4153cd.js.map
diff --git a/js/photos-public.js b/js/photos-public.js
diff --git a/js/photos-public.js.map b/js/photos-public.js.map
diff --git a/js/photos-src_components_Albums_AlbumForm_vue.js b/js/photos-src_components_Albums_AlbumForm_vue.js
diff --git a/js/photos-src_components_Albums_AlbumForm_vue.js.map b/js/photos-src_components_Albums_AlbumForm_vue.js.map
diff --git a/js/photos-src_views_AlbumContent_vue.js b/js/photos-src_views_AlbumContent_vue.js
diff --git a/js/photos-src_views_AlbumContent_vue.js.map b/js/photos-src_views_AlbumContent_vue.js.map
diff --git a/js/photos-src_views_Timeline_vue.js b/js/photos-src_views_Timeline_vue.js
diff --git a/js/photos-src_views_Timeline_vue.js.map b/js/photos-src_views_Timeline_vue.js.map
diff --git a/js/photos-vendors-node_modules_nextcloud_upload_dist_index_esm_js.js b/js/photos-vendors-node_modules_nextcloud_upload_dist_index_esm_js.js
diff --git a/js/photos-vendors-node_modules_nextcloud_upload_dist_index_esm_js.js.map b/js/photos-vendors-node_modules_nextcloud_upload_dist_index_esm_js.js.map
diff --git a/src/components/Albums/AlbumForm.vue b/src/components/Albums/AlbumForm.vue
@@ -29,41 +29,39 @@
  :required="true"
  autofocus="true"
  :label="t('photos', 'Name of the album')" />
- <label>
- <MapMarker />
- <NcTextField :value.sync="albumLocation"
- name="location"
- type="text"
- :label="t('photos', 'Location of the album')" />
- </label>
+ <NcTextField :value.sync="albumLocation"
+ name="location"
+ type="text"
+ :label="t('photos', 'Location of the album')">
+ <template #default>
+ <MapMarker :size="20" />
+ </template>
+ </NcTextField>
  </div>
  <div class="form-buttons">
  <span class="left-buttons">
  <NcButton v-if="displayBackButton"
- :aria-label="t('photos', 'Go back to the previous view.')"
  type="tertiary"
  @click="back">
  {{ t('photos', 'Back') }}
  </NcButton>
  </span>
  <span class="right-buttons">
  <NcButton v-if="sharingEnabled && !editMode"
- :aria-label="t('photos', 'Go to the add collaborators view.')"
  type="secondary"
  :disabled="albumName.trim() === '' || loading"
  @click="showCollaboratorView = true">
  <template #icon>
- <AccountMultiplePlus />
+ <AccountMultiplePlus :size="20" />
  </template>
  {{ t('photos', 'Add collaborators') }}
  </NcButton>
- <NcButton :aria-label="editMode ? t('photos', 'Save.') : t('photos', 'Create the album.')"
- type="primary"
+ <NcButton type="primary"
  :disabled="albumName === '' || loading"
  @click="submit()">
  <template #icon>
- <NcLoadingIcon v-if="loading" />
- <Send v-else />
+ <NcLoadingIcon v-if="loading" :size="20" />
+ <Send v-else :size="20" />
  </template>
  {{ editMode ? t('photos', 'Save') : t('photos', 'Create album') }}
  </NcButton>
@@ -73,22 +71,20 @@
  <CollaboratorsSelectionForm v-else
  :album-name="albumName"
  :allow-public-link="false">
- <template slot-scope="{collaborators}">
+ <template #default="{ collaborators }">
  <span class="left-buttons">
- <NcButton :aria-label="t('photos', 'Back to the new album form.')"
- type="tertiary"
+ <NcButton type="tertiary"
  @click="showCollaboratorView = false">
  {{ t('photos', 'Back') }}
  </NcButton>
  </span>
  <span class="right-buttons">
- <NcButton :aria-label="editMode ? t('photos', 'Save.') : t('photos', 'Create the album.')"
- type="primary"
+ <NcButton type="primary"
  :disabled="albumName.trim() === '' || loading"
  @click="submit(collaborators)">
  <template #icon>
- <NcLoadingIcon v-if="loading" />
- <Send v-else />
+ <NcLoadingIcon v-if="loading" :size="20" />
+ <Send v-else :size="20" />
  </template>
  {{ editMode ? t('photos', 'Save') : t('photos', 'Create album') }}
  </NcButton>
@@ -259,7 +255,7 @@ export default {
  display: flex;
  flex-direction: column;
  height: 350px;
- padding: 16px;
+ padding: calc(var(--default-grid-baseline) * 4);
 
  .form-title {
  font-weight: bold;
@@ -270,25 +266,10 @@ export default {
  }
 
  .form-inputs {
- flex-grow: 1;
- justify-items: flex-end;
-
- input {
- width: 100%;
- }
-
- label {
- display: flex;
- margin-top: 16px;
-
- :deep {
- .material-design-icon {
- align-self: flex-end;
- margin-right: 12px;
- margin-bottom: 6px;
- }
- }
- }
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: calc(var(--default-grid-baseline) * 4);
  }
 
  .form-buttons {
@@ -298,15 +279,12 @@ export default {
 
  .left-buttons, .right-buttons {
  display: flex;
+ gap: calc(var(--default-grid-baseline) * 4);
  }
 
  .right-buttons {
  justify-content: flex-end;
  }
-
- button {
- margin-right: 16px;
- }
  }
 }
 
@@ -318,7 +296,6 @@ export default {
  .right-buttons {
  justify-content: flex-end;
  flex-direction: column;
- gap: calc(var(--default-grid-baseline) * 4);
  }
 }
 </style>