[full-ci] Redesign switch icons to RemixIcons

changelog/unreleased/change-use-remixicons

@@ -0,0 +1,7 @@
+Change: Use remixicons for redesign
+
+We've switched the iconset to remixicons to
+fit the new design.
+
+https://github.com/owncloud/web/pull/6142
+https://github.com/owncloud/web/issues/6100

changelog/unreleased/enhancement-update-ods

@@ -1,6 +1,6 @@
-Enhancement: Update ODS to v12.0.0-alpha5
+Enhancement: Update ODS to v12.0.0-alpha7
 
-We updated the ownCloud Design System to version 12.0.0-alpha5. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+We updated the ownCloud Design System to version 12.0.0-alpha7. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
 
 - Change - Do not sort in OcTable: https://github.com/owncloud/owncloud-design-system/pull/1825
 - Change - Remove OcAppSideBar component: https://github.com/owncloud/owncloud-design-system/pull/1810
@@ -14,4 +14,5 @@ We updated the ownCloud Design System to version 12.0.0-alpha5. Please refer to
 - Bugfix - Rename GhostElement: https://github.com/owncloud/owncloud-design-system/pull/1845
 
 https://github.com/owncloud/web/pull/6086
-https://github.com/owncloud/owncloud-design-system/releases/tag/v12.0.0-alpha5
+https://github.com/owncloud/web/pull/6142
+https://github.com/owncloud/owncloud-design-system/releases/tag/v12.0.0-alpha7

dev/docker/oc10.web.config.json

@@ -22,11 +22,11 @@
         "fr": "Fichiers",
         "zh_CN": "文件"
       },
-      "icon": "switch_ui",
+      "icon": "swap-box",
       "url": "http://host.docker.internal:8080/index.php/apps/files"
     },
     {
-      "icon": "application",
+      "icon": "settings-4",
       "menu": "user",
       "target": "_self",
       "title": {

docker-compose.yml

@@ -38,6 +38,7 @@ services:
       - ./dist/img:/mnt/data/apps/web/img
       - ./dist/js:/mnt/data/apps/web/js
       - ./dist/themes:/mnt/data/apps/web/themes
+      - ./dist/icons:/mnt/data/apps/web/icons
       - ./dist/index.html:/mnt/data/apps/web/index.html
       - ./dist/manifest.json:/mnt/data/apps/web/manifest.json
       - ./dist/oidc-callback.html:/mnt/data/apps/web/oidc-callback.html

docs/deployments/oc10-app.md

@@ -91,7 +91,7 @@ There are a few config values which need to be set in order for ownCloud Web to
       "url": "https://<your-owncloud-server>/index.php/apps/files"
     },
     {
-      "icon": "application",
+      "icon": "settings-4",
       "menu": "user",
       "target": "_self",
       "title": {
@@ -152,7 +152,7 @@ To add new elements in the app switcher, paste the following into the `applicati
         "en": "Custom Groups",
         "de": "Benutzerdefinierte Gruppen" 
       },
-      "icon": "application",
+      "icon": "settings-4",
       "url": "https://<your-owncloud-server>/settings/personal?sectionid=customgroups"
     }
 ```
@@ -166,7 +166,7 @@ Just like adding links to the app switcher, you can also add links to the user m
 
 ```json
     {
-      "icon": "application",
+      "icon": "settings-4",
       "menu": "user",
       "target": "_self",
       "title": {

package.json

@@ -50,7 +50,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-typescript": "^8.2.5",
     "@testing-library/dom": "^8.11.0",
-    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/user-event": "^13.5.0",
     "@testing-library/vue": "^5.8.2",
     "@types/jest": "^26.0.23",
@@ -74,15 +74,15 @@
     "eslint-plugin-jest": "^24.1.3",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-promise": "^5.2.0",
     "eslint-plugin-vue": "^7.13.0",
     "eslint-plugin-vuejs-accessibility": "^0.7.1",
     "focus-trap": "^6.4.0",
     "focus-trap-vue": "^1.1.1",
     "jest": "^26.6.3",
     "jest-axe": "^4.1.0",
     "jest-fetch-mock": "^3.0.3",
-    "jest-mock-axios": "^4.4.0",
+    "jest-mock-axios": "^4.5.0",
     "jest-serializer-vue": "^2.0.2",
     "jest-svg-transformer": "^1.0.0",
     "join-path": "^1.1.1",
@@ -114,7 +114,7 @@
     "rollup-plugin-vue": "^5.1.4",
     "sync-fetch": "^0.3.1",
     "ts-jest": "^26.5.6",
-    "ts-node": "^10.2.0",
+    "ts-node": "^10.4.0",
     "tslib": "^2.2.0",
     "typescript": "^4.3.2",
     "url-search-params-polyfill": "^8.0.0",

packages/web-app-draw-io/src/index.js

@@ -15,7 +15,7 @@ const routes = [
 const appInfo = {
   name: 'Draw.io',
   id: 'draw-io',
-  icon: 'grid_on',
+  icon: 'grid',
   extensions: [
     {
       extension: 'drawio',

packages/web-app-external/src/components/ErrorScreen.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="uk-text-center">
-    <oc-icon size="xxlarge" name="warning" />
+    <oc-icon size="xxlarge" name="error-warning" fill-type="line" />
     <p v-if="message" class="oc-text-lead">{{ message }}</p>
   </div>
 </template>

packages/web-app-external/tests/unit/components/__snapshots__/ErrorScreen.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`The external app error screen component displays an icon and a paragraph 1`] = `
 <div class="uk-text-center">
-  <ocicon-stub size="xxlarge" name="warning"></ocicon-stub>
+  <ocicon-stub size="xxlarge" name="error-warning" fill-type="line"></ocicon-stub>
   <p class="oc-text-lead">Error when loading the application</p>
 </div>
 `;

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -83,7 +83,7 @@
                       justify-content="left"
                       @click="showCreateResourceModal"
                     >
-                      <oc-icon name="create_new_folder" />
+                      <oc-icon name="folder-add" />
                       <translate>New folder…</translate>
                     </oc-button>
                   </div>

packages/web-app-files/src/components/AppBar/Upload/FileUpload.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <oc-button class="uk-width-1-1" justify-content="left" appearance="raw" @click="triggerUpload">
-      <oc-icon name="file_upload" />
+      <oc-icon name="upload" fill-type="line" />
       <span id="files-file-upload-button" v-translate>Upload File</span>
     </oc-button>
     <input

packages/web-app-files/src/components/AppBar/Upload/FolderUpload.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <oc-button class="uk-width-1-1" justify-content="left" appearance="raw" @click="triggerUpload">
-      <oc-icon name="cloud_upload" />
+      <oc-icon name="upload-cloud" />
       <span id="files-folder-upload-button" v-translate>Upload Folder</span>
     </oc-button>
     <input

packages/web-app-files/src/components/AppBar/ViewOptions.vue

@@ -10,7 +10,7 @@
       appearance="raw"
       class="oc-py-s oc-mb-xs"
     >
-      <oc-icon name="tune" />
+      <oc-icon name="list-settings" fill-type="line" />
     </oc-button>
     <oc-button
       id="files-toggle-sidebar"
@@ -21,7 +21,7 @@
       class="oc-ml-s oc-py-s oc-mb-xs"
       @click.stop="toggleSidebar"
     >
-      <oc-icon :name="toggleIcon" />
+      <oc-icon :name="toggleIcon" fill-type="line" />
     </oc-button>
     <oc-drop
       drop-id="files-view-options-drop"
@@ -83,7 +83,7 @@ export default {
     },
 
     toggleIcon() {
-      return this.sidebarClosed ? 'chevron_double_left' : 'chevron_double_right'
+      return this.sidebarClosed ? 'arrow-drop-left' : 'arrow-drop-right'
     },
 
     hiddenFilesShownModel: {

packages/web-app-files/src/components/FilesList/QuickActions.vue

@@ -10,7 +10,7 @@
       :class="`files-quick-action-${action.id}`"
       @click="action.handler({ item, client: $client, store: $store, $gettext })"
     >
-      <oc-icon :name="action.icon" class="uk-flex" />
+      <oc-icon :name="action.icon" :fill-type="action.iconFillType" class="uk-flex" />
     </oc-button>
   </div>
 </template>

packages/web-app-files/src/components/FilesList/ResourceTable.vue

@@ -113,7 +113,7 @@
             resetDropPosition(`context-menu-drop-ref-${resourceDomSelector(item)}`, $event, item)
           "
         >
-          <oc-icon name="more_vert" />
+          <oc-icon name="more-2" />
         </oc-button>
         <oc-drop
           :ref="`context-menu-drop-ref-${resourceDomSelector(item)}`"

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -36,7 +36,7 @@
           :aria-label="linkSharesLabel"
           @click="expandLinksPanel"
         >
-          <oc-icon name="link" />
+          <oc-icon name="links" />
         </oc-button>
         <p class="oc-my-rm oc-mx-s" v-text="detailSharingInformation" />
       </div>

packages/web-app-files/src/components/SideBar/Details/FileDetailsMultiple.vue

@@ -2,7 +2,7 @@
   <div id="oc-file-details-multiple-sidebar">
     <div class="files-preview oc-mb">
       <div class="files-preview-body">
-        <oc-icon class="preview-icon" size="xxlarge" variation="passive" name="file_copy" />
+        <oc-icon class="preview-icon" size="xxlarge" variation="passive" name="file-copy" />
         <p class="preview-text" data-testid="selectedFilesText" v-text="selectedFilesString" />
       </div>
     </div>

packages/web-app-files/src/components/SideBar/Links/CopyToClipboardButton.vue

@@ -8,10 +8,10 @@
     <oc-icon
       v-if="copied"
       key="oc-copy-to-clipboard-copied"
-      name="ready"
+      name="checkbox-circle"
       class="_clipboard-success-animation"
     />
-    <oc-icon v-else key="oc-copy-to-clipboard-copy" name="copy_to_clipboard" />
+    <oc-icon v-else key="oc-copy-to-clipboard-copy" name="clipboard" />
   </oc-button>
 </template>
 

packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkActions.vue

@@ -10,7 +10,7 @@
         class="oc-files-file-link-edit oc-mr-xs"
         @click="editLink"
       >
-        <oc-icon name="edit" />
+        <oc-icon name="pencil" />
       </oc-button>
       <oc-button
         v-oc-tooltip="deleteButtonLabel"
@@ -19,7 +19,7 @@
         class="oc-files-file-link-delete"
         @click="$_removeLink"
       >
-        <oc-icon name="delete" />
+        <oc-icon name="delete-bin-5" />
       </oc-button>
     </template>
   </div>

packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkEdit.vue

@@ -63,7 +63,7 @@
               >
                 Expires %{expires}
               </translate>
-              <oc-icon name="expand_more" />
+              <oc-icon name="arrow-down-s" fill-type="line" />
             </oc-button>
           </template>
         </oc-datepicker>

packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkInfo.vue

@@ -36,7 +36,7 @@
           :data-testid="`files-link-id-${link.id}-expiration-date`"
           :aria-label="expirationDateRelative + ' (' + expirationDate + ')'"
         >
-          <oc-icon name="text-calendar" />
+          <oc-icon name="calendar-2" fill-type="line" />
           <translate :translate-params="{ expires: expirationDateRelative }">
             Expires %{expires}
           </translate>
@@ -55,7 +55,7 @@
           class="oc-files-file-link-via"
           :to="viaRouterParams"
         >
-          <oc-icon name="exit_to_app" />
+          <oc-icon name="close" />
           <span class="uk-text-truncate files-file-links-link-via-label" v-text="viaLabel" />
         </oc-tag>
       </div>
@@ -90,16 +90,16 @@ export default {
     roleTagIcon() {
       switch (this.link.description) {
         case 'Viewer':
-          return 'remove_red_eye'
+          return 'eye'
 
         case 'Contributor':
-          return 'edit'
+          return 'pencil'
 
         case 'Editor':
-          return 'edit'
+          return 'pencil'
 
         case 'Uploader':
-          return 'file_upload'
+          return 'file-add'
 
         default:
           return 'key'

packages/web-app-files/src/components/SideBar/NoSelection.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="oc-no-selection" class="uk-text-center oc-mt-xl">
-    <oc-icon size="xxlarge" name="select_items" />
+    <oc-icon size="xxlarge" name="drag-drop" fill-type="line" />
     <p data-testid="selectedFilesText" v-text="selectedFilesString" />
   </div>
 </template>

packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="uk-flex uk-flex-middle">
     <oc-button :id="editShareBtnId" class="collaborator-edit-dropdown-options-btn" appearance="raw">
-      <oc-icon name="more_vert" />
+      <oc-icon name="more-2" />
     </oc-button>
     <oc-drop
       ref="expirationDateDrop"

packages/web-app-files/src/components/SideBar/Shares/FileShares.vue

@@ -25,7 +25,7 @@
             :is-tooltip-displayed="false"
             class="sharee-avatars"
           />
-          <oc-icon v-else name="chevron_up" />
+          <oc-icon v-else name="arrow-up-s" />
         </oc-button>
       </div>
       <template v-if="showShareesList && hasSharees">

packages/web-app-files/src/components/SideBar/Shares/InviteCollaborator/ExpirationDatepicker.vue

@@ -27,7 +27,7 @@
           >
             Expires %{expires}
           </translate>
-          <oc-icon v-if="!dateCurrent" name="expand_more" />
+          <oc-icon v-if="!dateCurrent" name="arrow-down-s" />
         </oc-button>
       </template>
     </oc-datepicker>

packages/web-app-files/src/components/SideBar/Shares/RoleDropdown.vue

@@ -8,7 +8,7 @@
     >
       <span v-if="!existingRole" v-text="inviteLabel" />
       <span v-else>{{ $gettext(selectedRole.label) }}</span>
-      <oc-icon name="expand_more" />
+      <oc-icon name="arrow-down-s" />
     </oc-button>
     <oc-drop
       ref="rolesDrop"

packages/web-app-files/src/components/SideBar/SideBar.vue

@@ -34,7 +34,7 @@
             :aria-label="accessibleLabelBack"
             @click="closePanel"
           >
-            <oc-icon name="chevron_left" />
+            <oc-icon name="arrow-left-s" fill-type="line" />
             {{ defaultPanel.component.title($gettext) }}
           </oc-button>
 
@@ -74,7 +74,7 @@
               >
                 <oc-icon :name="panelSelect.icon" />
                 {{ panelSelect.component.title($gettext) }}
-                <oc-icon name="chevron_right" />
+                <oc-icon name="arrow-right-s" fill-type="line" />
               </oc-button>
             </div>
           </template>

packages/web-app-files/src/components/SideBar/Versions/FileVersions.vue

@@ -26,7 +26,7 @@
                 :aria-label="$gettext('Restore older version')"
                 @click="revertVersion(item)"
               >
-                <oc-icon name="restore" />
+                <oc-icon name="restart" fill-type="line" />
               </oc-button>
             </div>
           </oc-td>
@@ -39,7 +39,7 @@
                 :aria-label="$gettext('Download older version')"
                 @click="downloadVersion(item)"
               >
-                <oc-icon name="cloud_download" />
+                <oc-icon name="download-cloud" fill-type="line" />
               </oc-button>
             </div>
           </oc-td>

packages/web-app-files/src/components/Upload/DetailsWidget.vue

@@ -2,7 +2,7 @@
   <ul class="uk-list uk-list-divider oc-ml-rm oc-mr-rm">
     <li v-for="item in items" :key="item.id">
       <div class="uk-flex uk-flex-middle">
-        <oc-icon name="file_copy" class="oc-mr-s" />
+        <oc-icon name="file-copy2" class="oc-mr-s" />
         <div class="uk-width-expand">
           <div class="uk-flex">
             <div class="oc-text-bold uk-width-expand uk-text-truncate upload-details-item-name">