Save first draft, to be reverted

owncloud · Feb 14, 2022 · a8c0326 · a8c0326
1 parent 35275b9
commit a8c0326
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 80 deletions.
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('New 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,30 +30,112 @@
         <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="add" />
+                <translate>New</translate>
+              </oc-button>
+              <oc-drop
+                drop-id="new-file-menu-drop"
+                toggle="#new-file-menu-btn"
+                mode="click"
+                close-on-click
+                class="oc-width-auto"
+                padding-size="small"
+              >
+                <oc-list id="create-list">
+                  <li class="oc-py-s" style="border-bottom: 1px solid var(--oc-color-border)">
+                    <oc-button
+                      id="new-folder-btn"
+                      appearance="raw"
+                      @click="showCreateResourceModal"
+                    >
+                      <oc-icon name="resource-type-folder" />
+                      <translate>New folder</translate>
+                    </oc-button>
+                  </li>
+                  <li
+                    v-for="(newFileHandler, key) in newFileHandlersForRoute"
+                    :key="key"
+                    class="oc-py-s"
+                  >
+                    <oc-button
+                      appearance="raw"
+                      :class="['new-file-btn-' + newFileHandler.ext]"
+                      @click="
+                        showCreateResourceModal(false, newFileHandler.ext, newFileHandler.action)
+                      "
+                    >
+                      <!-- would very much like to create an icon with newFileHandler.ext -->
+                      <!-- <oc-icon :name="`resource-type-${newFileHandler.ext}`" /> -->
+                      <oc-icon :name="newFileHandler.icon || 'save'" />
+                      <span>{{ newFileHandler.menuTitle($gettext) }}</span>
+                    </oc-button>
+                  </li>
+                  <template v-if="mimetypesAllowedForCreation">
+                    <li
+                      v-for="(mimetype, key) in mimetypesAllowedForCreation"
+                      :key="key"
+                      class="oc-py-s"
+                    >
+                      <oc-button
+                        appearance="raw"
+                        @click="showCreateResourceModal(false, mimetype.ext, false, true)"
+                      >
+                        <!-- would very much like to create an icon with mimetype.ext -->
+                        <oc-icon :name="mimetype.icon || 'file'" />
+                        <translate :translate-params="{ name: mimetype.name }"
+                          >New %{name}</translate
+                        >
+                      </oc-button>
+                    </li>
+                  </template>
+                </oc-list>
+              </oc-drop>
+            </template>
+            <template v-else>
+              <oc-button
+                id="new-folder-btn"
+                variation="inverse"
+                :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">
+              <oc-list>
+                <li class="oc-p-s">
                   <file-upload
                     :path="currentPath"
                     :headers="headers"
@@ -62,7 +144,7 @@
                     @progress="onFileProgress"
                   />
                 </li>
-                <li v-if="checkIfBrowserSupportsFolderUpload">
+                <li class="oc-p-s">
                   <folder-upload
                     v-if="!isIE11()"
                     :root-path="currentPath"
@@ -73,53 +155,7 @@
                     @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 +231,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 +248,23 @@ export default {
       if (tooltip) {
         return tooltip
       }
-      return this.$gettext('Add files or folders')
+      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 +386,7 @@ export default {
       return this.selectedFiles.length < 1
     },
 
-    isNewBtnDisabled() {
+    uploadOrFileCreationBlocked() {
       return !this.canUpload || !this.hasFreeSpace
     },
 
@@ -402,6 +457,7 @@ export default {
           ? this.checkNewFolderName(defaultName)
           : this.checkNewFileName(defaultName),
         onCancel: this.hideModal,
+        // what happens below looks wrong, I don't get it
         onConfirm: isFolder
           ? this.addNewFolder
           : addAppProviderFile
@@ -727,6 +783,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+#create-list li {
+  border: 1px solid transparent;
+  button {
+    gap: 10px;
+    justify-content: left;
+    widows: 100%;
+  }
+}
 .files-app-bar {
   background-color: var(--oc-color-background-default);
   box-sizing: border-box;

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-icon name="file-upload" />
+      <span id="files-file-upload-button" v-translate>Upload file</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-icon name="folder-upload" />
+      <span id="files-folder-upload-button" v-translate>Upload folder</span>
     </oc-button>
     <input
       id="folderUploadInput"

diff --git a/packages/web-app-files/src/mixins.js b/packages/web-app-files/src/mixins.js
@@ -67,6 +67,20 @@ export default {
         typeof el.directory !== 'undefined'
       )
     },
+    fileTypeIcon(file) {
+      if (file) {
+        if (file.type === 'folder') {
+          return 'folder'
+        }
+        if (typeof file.extension === 'string') {
+          const icon = fileTypeIconMappings[file.extension.toLowerCase()]
+          if (icon) {
+            return `${icon}`
+          }
+        }
+      }
+      return 'file'
+    },
     checkIfElementExists(element) {
       const name = element.name || element
       return this.files.find((file) => file.name === name)
@@ -112,10 +126,10 @@ export default {
         this.existingResources.length > 1
           ? this.$gettext('Multiple files already exist')
           : this.$gettextInterpolate(
-              translated,
-              { file: this.existingResources[0].file.name },
-              true
-            )
+            translated,
+            { file: this.existingResources[0].file.name },
+            true
+          )
 
       const modal = {
         variation: isVersioningEnabled ? 'passive' : 'danger',

diff --git a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js b/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
@@ -57,7 +57,7 @@ const newFileHandlers = [
       extension: 'txt'
     },
     routes,
-    menuTitle: () => 'New plain text file...'
+    menuTitle: () => 'New plain text file'
   },
   {
     ext: 'md',
@@ -67,7 +67,7 @@ const newFileHandlers = [
       extension: 'md'
     },
     routes,
-    menuTitle: () => 'New mark-down file...'
+    menuTitle: () => 'New mark-down file'
   },
   {
     ext: 'drawio',
@@ -78,7 +78,7 @@ const newFileHandlers = [
       extension: 'drawio'
     },
     routes,
-    menuTitle: () => 'New draw.io document...'
+    menuTitle: () => 'New draw.io document'
   }
 ]
 

diff --git a/packages/web-app-markdown-editor/src/index.js b/packages/web-app-markdown-editor/src/index.js
@@ -26,7 +26,7 @@ const appInfo = {
       extension: 'txt',
       newFileMenu: {
         menuTitle($gettext) {
-          return $gettext('New plain text file…')
+          return $gettext('New plain text file')
         }
       },
       ...fileExtensionConfig
@@ -35,7 +35,7 @@ const appInfo = {
       extension: 'md',
       newFileMenu: {
         menuTitle($gettext) {
-          return $gettext('New mark-down file…')
+          return $gettext('New mark-down file')
         }
       },
       ...fileExtensionConfig