Separate 'create new file/folder' and 'upload files/folder' actions i…

…nto two dropdowns
owncloud · Feb 17, 2022 · d693465 · d693465
1 parent 07632f0
commit d693465
Show file tree

Hide file tree

Showing 10 changed files with 186 additions and 98 deletions.
diff --git a/changelog/unreleased/enhancement-redesign-create-upload-buttons b/changelog/unreleased/enhancement-redesign-create-upload-buttons
@@ -0,0 +1,7 @@
+Enhancement: Redesign create and upload buttons
+
+We have separated the "Create new file/folder" and "Upload" actions above the files list into two separate buttons,
+also using the new resource type icons for more consistency.
+
+https://github.com/owncloud/web/issues/6279
+https://github.com/owncloud/web/pull/6358
diff --git a/packages/web-app-draw-io/src/index.js b/packages/web-app-draw-io/src/index.js
@@ -24,7 +24,7 @@ const appInfo = {
       routeName: 'draw-io',
       newFileMenu: {
         menuTitle($gettext) {
-          return $gettext('New draw.io document…')
+          return $gettext('Draw.io document')
         }
       }
     },

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -30,96 +30,131 @@
         <div
           v-if="showActions || selectedFiles.length > 0 || hasBulkActions"
           class="oc-flex-1 oc-flex oc-flex-start"
+          style="gap: 15px"
         >
           <template v-if="showActions && areDefaultActionsVisible">
+            <template v-if="createFileActionsAvailable">
+              <oc-button
+                id="new-file-menu-btn"
+                key="new-file-menu-btn-enabled"
+                v-oc-tooltip="newButtonTooltip"
+                :aria-label="newButtonAriaLabel"
+                variation="inverse"
+                :disabled="uploadOrFileCreationBlocked"
+                class="oc-background-primary-gradient"
+              >
+                <oc-icon name="upload" fill-type="line" />
+                <translate>Upload</translate>
+              </oc-button>
+              <oc-drop
+                drop-id="upload-menu-drop"
+                toggle="#upload-menu-btn"
+                mode="click"
+                close-on-click
+                class="oc-width-auto"
+                padding-size="small"
+              >
+                <oc-list id="create-list">
+                  <li class="create-list-folder oc-py-xs">
+                    <oc-button
+                      id="new-folder-btn"
+                      appearance="raw"
+                      @click="showCreateResourceModal"
+                    >
+                      <oc-resource-icon :resource="{ isFolder: true, extension: '' }" />
+                      <translate>Folder</translate>
+                    </oc-button>
+                  </li>
+                  <li
+                    v-for="(newFileHandler, key) in newFileHandlersForRoute"
+                    :key="key"
+                    class="create-list-file oc-py-xs"
+                  >
+                    <oc-button
+                      appearance="raw"
+                      :class="['new-file-btn-' + newFileHandler.ext]"
+                      @click="
+                        showCreateResourceModal(false, newFileHandler.ext, newFileHandler.action)
+                      "
+                    >
+                      <oc-resource-icon
+                        :resource="{ type: 'file', extension: newFileHandler.ext }"
+                      />
+                      <span>{{ newFileHandler.menuTitle($gettext) }}</span>
+                    </oc-button>
+                  </li>
+                  <template v-if="mimetypesAllowedForCreation">
+                    <li
+                      v-for="(mimetype, key) in mimetypesAllowedForCreation"
+                      :key="key"
+                      class="create-list-file oc-py-xs"
+                    >
+                      <oc-button
+                        appearance="raw"
+                        @click="showCreateResourceModal(false, mimetype.ext, false, true)"
+                      >
+                        <oc-resource-icon :resource="{ type: 'file', extension: mimetype.ext }" />
+                        <translate :translate-params="{ name: mimetype.name }">%{name}</translate>
+                      </oc-button>
+                    </li>
+                  </template>
+                </oc-list>
+              </oc-drop>
+            </template>
+            <template v-else>
+              <oc-button
+                id="new-folder-btn"
+                v-oc-tooltip="newButtonAriaLabel"
+                variation="inverse"
+                :aria-label="newButtonAriaLabel"
+                :disabled="uploadOrFileCreationBlocked"
+                class="oc-background-primary-gradient"
+                @click="showCreateResourceModal"
+              >
+                <oc-icon name="resource-type-folder" />
+                <translate style="display: ruby">New folder</translate>
+              </oc-button>
+            </template>
             <oc-button
-              id="new-file-menu-btn"
-              key="new-file-menu-btn-enabled"
-              v-oc-tooltip="newButtonTooltip"
-              :aria-label="newButtonAriaLabel"
-              variation="inverse"
-              :disabled="isNewBtnDisabled"
-              class="oc-background-primary-gradient"
+              id="upload-menu-btn"
+              key="upload-menu-btn-enabled"
+              v-oc-tooltip="uploadButtonTooltip"
+              :aria-label="uploadButtonAriaLabel"
+              :disabled="uploadOrFileCreationBlocked"
             >
-              <oc-icon name="add" />
-              <translate>New</translate>
+              <oc-icon name="upload" fill-type="line" />
+              <translate>Upload</translate>
             </oc-button>
             <oc-drop
-              drop-id="new-file-menu-drop"
-              toggle="#new-file-menu-btn"
+              drop-id="upload-menu-drop"
+              toggle="#upload-menu-btn"
               mode="click"
+              class="oc-width-auto"
               close-on-click
-              :options="{ delayHide: 0 }"
               padding-size="small"
             >
-              <ul class="oc-list">
-                <li class="oc-my-xs">
-                  <file-upload
+              <oc-list id="upload-list">
+                <li class="oc-p-s">
+                  <folder-upload
+                    v-if="!isIE11()"
+                    :root-path="currentPath"
                     :path="currentPath"
                     :headers="headers"
                     @success="onFileSuccess"
                     @error="onFileError"
                     @progress="onFileProgress"
                   />
                 </li>
-                <li v-if="checkIfBrowserSupportsFolderUpload">
-                  <folder-upload
-                    v-if="!isIE11()"
-                    :root-path="currentPath"
+                <li class="oc-p-s">
+                  <file-upload
                     :path="currentPath"
                     :headers="headers"
                     @success="onFileSuccess"
                     @error="onFileError"
                     @progress="onFileProgress"
                   />
                 </li>
-                <li>
-                  <div>
-                    <oc-button
-                      id="new-folder-btn"
-                      appearance="raw"
-                      class="oc-width-1-1"
-                      justify-content="left"
-                      @click="showCreateResourceModal"
-                    >
-                      <oc-icon name="folder-add" />
-                      <translate>New folder…</translate>
-                    </oc-button>
-                  </div>
-                </li>
-                <li v-for="(newFileHandler, key) in newFileHandlersForRoute" :key="key">
-                  <div>
-                    <oc-button
-                      appearance="raw"
-                      justify-content="left"
-                      :class="['new-file-btn-' + newFileHandler.ext, 'oc-width-1-1']"
-                      @click="
-                        showCreateResourceModal(false, newFileHandler.ext, newFileHandler.action)
-                      "
-                    >
-                      <oc-icon :name="newFileHandler.icon || 'save'" />
-                      <span>{{ newFileHandler.menuTitle($gettext) }}</span>
-                    </oc-button>
-                  </div>
-                </li>
-                <template v-if="mimetypesAllowedForCreation">
-                  <li v-for="(mimetype, key) in mimetypesAllowedForCreation" :key="key">
-                    <div>
-                      <oc-button
-                        appearance="raw"
-                        justify-content="left"
-                        :class="['oc-width-1-1']"
-                        @click="showCreateResourceModal(false, mimetype.ext, false, true)"
-                      >
-                        <oc-icon :name="mimetype.icon || 'file'" />
-                        <translate :translate-params="{ name: mimetype.name }"
-                          >New %{name}</translate
-                        >
-                      </oc-button>
-                    </div>
-                  </li>
-                </template>
-              </ul>
+              </oc-list>
             </oc-drop>
           </template>
           <size-info v-if="hasBulkActions && selectedFiles.length > 0" class="oc-mr oc-visible@l" />
@@ -195,12 +230,15 @@ export default {
       }
       return mimeTypes.filter((mimetype) => mimetype.allow_creation) || []
     },
+    createFileActionsAvailable() {
+      return this.newFileHandlersForRoute.length > 0 || this.mimetypesAllowedForCreation.length > 0
+    },
     newButtonTooltip() {
       if (!this.canUpload) {
-        return this.$gettext('You have no permission to upload!')
+        return this.$gettext('You have no permission to create new files!')
       }
       if (!this.hasFreeSpace) {
-        return this.$gettext('You have not enough space left to upload!')
+        return this.$gettext('You have not enough space left to create new files!')
       }
       return null
     },
@@ -209,7 +247,26 @@ export default {
       if (tooltip) {
         return tooltip
       }
-      return this.$gettext('Add files or folders')
+      if (!this.createFileActionsAvailable) {
+        return this.$gettext('Create a new folder')
+      }
+      return this.$gettext('Create new files or folders')
+    },
+    uploadButtonTooltip() {
+      if (!this.canUpload) {
+        return this.$gettext('You have no permission to upload!')
+      }
+      if (!this.hasFreeSpace) {
+        return this.$gettext('You have not enough space left to upload!')
+      }
+      return null
+    },
+    uploadButtonAriaLabel() {
+      const tooltip = this.uploadButtonTooltip
+      if (tooltip) {
+        return tooltip
+      }
+      return this.$gettext('Upload files or folders')
     },
 
     currentPath() {
@@ -331,7 +388,7 @@ export default {
       return this.selectedFiles.length < 1
     },
 
-    isNewBtnDisabled() {
+    uploadOrFileCreationBlocked() {
       return !this.canUpload || !this.hasFreeSpace
     },
 
@@ -751,6 +808,23 @@ export default {
     display: flex;
     gap: var(--oc-space-small);
     justify-content: flex-end;
+
+    #create-list {
+      li {
+        border: 1px solid transparent;
+        button {
+          gap: 10px;
+          justify-content: left;
+          width: 100%;
+        }
+      }
+      .create-list-folder {
+        border-bottom: 1px solid var(--oc-color-border);
+      }
+      .create-list-file button {
+        margin: 2px 0;
+      }
+    }
   }
 }
 </style>
diff --git a/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <oc-button class="oc-width-1-1" justify-content="left" appearance="raw" @click="triggerUpload">
-      <oc-icon name="upload" fill-type="line" />
-      <span id="files-file-upload-button" v-translate>Upload File</span>
+      <oc-resource-icon :resource="{ extension: '' }" />
+      <span id="files-file-upload-button" v-translate>Files</span>
     </oc-button>
     <input
       id="fileUploadInput"

diff --git a/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue b/packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <oc-button class="oc-width-1-1" justify-content="left" appearance="raw" @click="triggerUpload">
-      <oc-icon name="upload-cloud" />
-      <span id="files-folder-upload-button" v-translate>Upload Folder</span>
+      <oc-resource-icon :resource="{ isFolder: true, extension: '' }" />
+      <span id="files-folder-upload-button" v-translate>Folder</span>
     </oc-button>
     <input
       id="folderUploadInput"