Merge pull request #7139 from owncloud/redesign-reposition-notifications

[full-ci] Reposition OcNotifications in web-runtime

changelog/unreleased/enhancement-reposition-notifications

@@ -0,0 +1,7 @@
+Enhancement: Reposition notifications
+
+We've repositioned the notifications to no longer block the searchbar - they are now in the bottom right corner, above the (possibly visible) upload information.
+It has also been redesigned to better fit the overall design.
+
+https://github.com/owncloud/web/pull/7139
+https://github.com/owncloud/web/issues/7082

changelog/unreleased/enhancement-update-ods

@@ -0,0 +1,13 @@
+Enhancement: Update ODS to v14.0.0-alpha.2
+
+We updated the ownCloud Design System to version 14.0.0-alpha.2. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+
+- Change - Remove OcAlert component: https://github.com/owncloud/owncloud-design-system/pull/2210
+- Change - Remove transition animations: https://github.com/owncloud/owncloud-design-system/pull/2210
+- Change - Revamp animations: https://github.com/owncloud/owncloud-design-system/pull/2210
+- Enhancement - Progress bar indeterminate state: https://github.com/owncloud/owncloud-design-system/pull/2200
+- Enhancement - Redesign notifications: https://github.com/owncloud/owncloud-design-system/pull/2210
+- Bugfix - Remove click event on OcIcon: https://github.com/owncloud/owncloud-design-system/pull/2216
+
+https://github.com/owncloud/web/pull/7139
+https://github.com/owncloud/owncloud-design-system/releases/tag/14.0.0-alpha.2

dev/docker/oc10.web.config.json

@@ -14,6 +14,7 @@
  "search"
  ],
  "options": {
+ "topCenterNotifications": true,
  "disablePreviews": true,
  "displayResourcesLazy": false,
  "sidebar": {

dev/docker/ocis.web.config.json

@@ -9,6 +9,7 @@
  "scope": "openid profile email"
  },
  "options": {
+ "topCenterNotifications": true,
  "disablePreviews": true,
  "displayResourcesLazy": false,
  "sidebar": {

packages/web-app-draw-io/src/App.vue

@@ -1,13 +1,5 @@
 <template>
  <main>
- <oc-notifications>
- <oc-notification-message
- v-if="notificationMessage"
- :message="notificationMessage"
- :status="notificationStatus"
- @close="clearNotificationMessage"
- />
- </oc-notifications>
  <div v-if="loading" class="oc-position-center">
  <oc-spinner size="xlarge" />
  <p v-translate class="oc-invisible">Loading media</p>
@@ -43,9 +35,7 @@ export default {
  filePath: '',
  fileExtension: '',
  isReadOnly: null,
- currentETag: null,
- notificationMessage: null,
- notificationStatus: null
+ currentETag: null
  }),
  computed: {
  ...mapGetters(['getToken']),
@@ -97,23 +87,19 @@ export default {
  },
  methods: {
  ...mapActions(['showMessage']),
- error(error) {
+ errorPopup(error) {
  this.showMessage({
- title: this.$gettext('The diagram could not be loaded…'),
+ title: this.$gettext('An error occurred'),
  desc: error,
  status: 'danger'
  })
  },
- errorPopup(error) {
- this.notificationStatus = 'danger'
- this.notificationMessage = error
- },
  successPopup(msg) {
- this.notificationStatus = 'success'
- this.notificationMessage = msg
- },
- clearNotificationMessage() {
- this.notificationMessage = null
+ this.showMessage({
+  title: this.$gettext('The diagram was successfully saved'),
+  desc: msg,
+  status: 'success'
+ })
  },
  errorNotification(error) {
  this.$refs.drawIoEditor.contentWindow.postMessage(
@@ -133,7 +119,7 @@ export default {
  this.loading = false
  })
  .catch((error) => {
- this.error(error)
+ this.errorPopup(error)
  })
  },
  load() {
@@ -150,7 +136,7 @@ export default {
  )
  })
  .catch((error) => {
- this.error(error)
+ this.errorPopup(error)
  })
  },
  importVisio() {
@@ -191,7 +177,7 @@ export default {
  reader.readAsDataURL(blob)
  })
  .catch((error) => {
- this.error(error)
+ this.errorPopup(error)
  })
  },
  save(payload, auto = false) {

packages/web-app-text-editor/src/App.vue

@@ -8,14 +8,6 @@
  @closeApp="closeApp"
  @save="save"
  />
- <oc-notifications>
- <oc-notification-message
- v-if="lastError"
- :message="lastError"
- status="danger"
- @close="clearLastError"
- />
- </oc-notifications>
  <div class="oc-flex editor-wrapper-height">
  <div :class="showPreview ? 'oc-width-1-2' : 'oc-width-1-1'" class="oc-height-1-1">
  <oc-textarea
@@ -37,14 +29,14 @@
  </main>
 </template>
 <script>
-import AppBar from './AppBar.vue'
-import { useAppDefaults } from 'web-pkg/src/composables'
 import { marked } from 'marked'
 import sanitizeHtml from 'sanitize-html'
 import { useTask } from 'vue-concurrency'
 import { computed, onMounted, onBeforeUnmount, ref, unref } from '@vue/composition-api'
 import { mapActions } from 'vuex'
 import { DavPermission, DavProperty } from 'web-pkg/src/constants'
+import { useAppDefaults } from 'web-pkg/src/composables'
+import AppBar from './AppBar.vue'
 
 export default {
  name: 'TextEditor',
@@ -121,27 +113,25 @@ export default {
  (error) => {
  switch (error.statusCode) {
  case 412:
- lastError.value =
- 'This file was updated outside this window. Please refresh the page (all changes will be lost).'
+ this.errorPopup(
+ this.$gettext(
+ 'This file was updated outside this window. Please refresh the page (all changes will be lost).'
+ )
+ )
  break
  case 500:
- lastError.value = 'Error when contacting the server'
+ this.errorPopup(this.$gettext('Error when contacting the server'))
  break
  case 401:
- lastError.value = "You're not authorized to save this file"
+ this.errorPopup(this.$gettext("You're not authorized to save this file"))
  break
  default:
- lastError.value = error.message || error
+ this.errorPopup(error.message || error)
  }
  }
  )
  }).restartable()
 
- const lastError = ref()
- const clearLastError = () => {
- lastError.value = null
- }
-
  const renderedMarkdown = computed(() => {
  return unref(currentContent) && showPreview
  ? sanitizeHtml(marked(unref(currentContent)))
@@ -214,19 +204,25 @@ export default {
  isDirty,
  isReadOnly,
  currentContent,
- lastError,
  renderedMarkdown,
  config,
 
  // methods
- clearLastError,
  save,
  handleSKey,
  handleUnload
  }
  },
  methods: {
- ...mapActions(['createModal', 'hideModal'])
+ ...mapActions(['createModal', 'hideModal', 'showMessage']),
+
+ errorPopup(error) {
+ this.showMessage({
+ title: this.$gettext('An error occurred'),
+ desc: error,
+ status: 'danger'
+ })
+ }
  }
 }
 </script>

packages/web-runtime/package.json

@@ -16,15 +16,15 @@
  "axios": "^0.26.1",
  "cross-fetch": "^3.0.6",
  "easygettext": "https://github.com/owncloud/easygettext/archive/refs/tags/v2.18.1-oc.tar.gz",
- "filesize": "^8.0.7",
+ "filesize": "^9.0.11",
  "focus-trap": "^6.4.0",
  "focus-trap-vue": "^1.1.1",
  "fuse.js": "^6.5.3",
  "lodash-es": "^4.17.21",
  "luxon": "^2.4.0",
  "marked": "^4.0.12",
  "oidc-client": "1.11.5",
- "owncloud-design-system": "^13.2.0-rc.1",
+ "owncloud-design-system": "^14.0.0-alpha.2",
  "owncloud-sdk": "~3.0.0-alpha.14",
  "p-queue": "^6.6.2",
  "popper-max-size-modifier": "^0.2.0",

packages/web-runtime/src/components/MessageBar.vue

@@ -1,18 +1,19 @@
 <template>
- <oc-notifications>
+ <oc-notifications :position="notificationPosition">
  <oc-notification-message
  v-for="item in $_ocMessages_limited"
  :key="item.id"
  :title="item.title"
  :message="item.desc"
  :status="item.status"
- class="oc-width-large"
  @close="deleteMessage(item)"
  />
  </oc-notifications>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
  props: {
  activeMessages: {
@@ -22,6 +23,13 @@ export default {
  }
  },
  computed: {
+ ...mapGetters(['configuration']),
+ notificationPosition() {
+ if (this.configuration.options.topCenterNotifications) {
+ return 'top-center'
+ }
+ return 'default'
+ },
  $_ocMessages_limited() {
  return this.activeMessages ? this.activeMessages.slice(0, 5) : []
  }

packages/web-runtime/src/components/UploadInfo.vue

@@ -548,16 +548,11 @@ export default {
 
 <style lang="scss">
 #upload-info {
- position: absolute;
- right: 20px;
  background-color: var(--oc-color-background-secondary);
- bottom: 20px;
  width: 400px;
  z-index: 4;
 
  @media (max-width: 640px) {
- left: 0;
- right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 500px;

packages/web-runtime/src/layouts/Application.vue

@@ -7,7 +7,6 @@
  <top-bar :applications-list="applicationsList" :active-notifications="activeNotifications" />
  </div>
  <div id="web-content-main" class="oc-px-s oc-pb-s">
- <message-bar :active-messages="activeMessages" @deleteMessage="deleteMessage" />
  <div class="app-container oc-flex">
  <sidebar-nav v-if="isSidebarVisible" class="app-navigation" :nav-items="sidebarNavItems" />
  <router-view
@@ -18,7 +17,10 @@
  />
  </div>
  </div>
- <upload-info />
+ <div class="snackbars">
+ <message-bar :active-messages="activeMessages" @deleteMessage="deleteMessage" />
+ <upload-info />
+ </div>
  </div>
 </template>
 
@@ -194,5 +196,19 @@ export default defineComponent({
  }
  }
  }
+
+ .snackbars {
+ position: absolute;
+ right: 20px;
+ bottom: 20px;
+
+ @media (max-width: 640px) {
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 100%;
+ max-width: 500px;
+ }
+ }
 }
 </style>

packages/web-runtime/src/store/app.js

@@ -9,9 +9,6 @@ const state = {
 }
 
 const actions = {
- toggleSidebar(context, visible) {
- context.commit('TOGGLE_SIDEBAR', visible)
- },
  showMessage({ commit }, message) {
  commit('ENQUEUE_MESSAGE', message)
  },

packages/web-runtime/src/store/config.js

@@ -40,6 +40,9 @@ const state = {
  options: {
  contextHelpers: true,
  defaultExtension: 'files',
+ // ugly hack to still have notifications but don't have
+ // them blocking UI elements in acceptance/E2E tests
+ topCenterNotifications: false,
  disablePreviews: false,
  displayResourcesLazy: true,
  homeFolder: '',

packages/web-runtime/tests/unit/components/MessageBar.spec.js

@@ -1,10 +1,12 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
 import DesignSystem from 'owncloud-design-system'
 import GetText from 'vue-gettext'
 
 import MessageBar from 'web-runtime/src/components/MessageBar.vue'
 
 const localVue = createLocalVue()
+localVue.use(Vuex)
 localVue.use(DesignSystem)
 localVue.use(GetText, {
  translations: 'does-not-matter.json',
@@ -99,6 +101,15 @@ function getShallowWrapper(activeMessages = []) {
  propsData: {
  activeMessages
  },
+ store: new Vuex.Store({
+ getters: {
+ configuration: () => ({
+ options: {
+ topCenterNotifications: false
+ }
+ })
+ }
+ }),
  stubs: {
  'oc-icon': true,
  'oc-notifications': true,