-
Notifications
You must be signed in to change notification settings - Fork 156
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* wip self-built app banner * wip almost complete * complete, final tests pending * fixed URL generation, works! * clean up * added changelog * fixed pnpm lock * linting * fixed test * changes per request in pr * added tests, moved component to web pkg * minor cosmetic changes * changes per request from PO * added custom translation hack * fixed after rebase * removed console log
- Loading branch information
Showing
18 changed files
with
344 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| Enhancement: Added app banner for mobile devices | ||
|
|
||
| We've added an app banner at the top of the web view for mobile devices asking the user whether they want to continue working in the app. By dismissing it, it will not show again until a new session is started, e.g. by opening a new tab. | ||
|
|
||
| https://github.com/owncloud/web/pull/9696 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,153 @@ | ||
| <template> | ||
| <portal to="app.app-banner"> | ||
| <div class="app-banner hide-desktop" :hidden="isVisible === false"> | ||
| <oc-button | ||
| variation="brand" | ||
| appearance="raw" | ||
| class="app-banner-exit" | ||
| aria-label="Close" | ||
| @click="close" | ||
| > | ||
| <oc-icon name="close" size="small" /> | ||
| </oc-button> | ||
| <div | ||
| class="app-banner-icon" | ||
| :style="{ 'background-image': `url('${appBannerSettings.icon}')` }" | ||
| ></div> | ||
| <div class="info-container"> | ||
| <div> | ||
| <div class="app-title">{{ appBannerSettings.title }}</div> | ||
| <div class="app-publisher">{{ appBannerSettings.publisher }}</div> | ||
| <div v-if="appBannerSettings.additionalInformation !== ''" class="app-additional-info"> | ||
| {{ $gettext(appBannerSettings.additionalInformation) }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <a | ||
| :href="appUrl" | ||
| target="_blank" | ||
| class="app-banner-cta" | ||
| rel="noopener" | ||
| aria-label="{{ $gettext(appBannerSettings.ctaText) }}" | ||
| >{{ $gettext(appBannerSettings.ctaText) }}</a | ||
| > | ||
| </div> | ||
| </portal> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { computed, defineComponent, ref, unref } from 'vue' | ||
| import { useRouter, useStore } from 'web-pkg' | ||
| import { buildUrl } from 'web-pkg/src/helpers/router' | ||
| import { useSessionStorage } from '@vueuse/core' | ||
| export default defineComponent({ | ||
| components: {}, | ||
| props: { | ||
| fileId: { | ||
| type: String, | ||
| required: true | ||
| } | ||
| }, | ||
| setup(props) { | ||
| const appBannerWasClosed = useSessionStorage('app_banner_closed', null) | ||
| const isVisible = ref<boolean>(unref(appBannerWasClosed) === null) | ||
| const store = useStore() | ||
| const router = useRouter() | ||
| const appBannerSettings = unref(store.getters.configuration.currentTheme.appBanner) | ||
| const appUrl = computed(() => { | ||
| return buildUrl(router, `/f/${props.fileId}`) | ||
| .toString() | ||
| .replace('https', appBannerSettings.appScheme) | ||
| }) | ||
| const close = () => { | ||
| isVisible.value = false | ||
| useSessionStorage('app_banner_closed', 1) | ||
| } | ||
| return { | ||
| appUrl, | ||
| close, | ||
| isVisible, | ||
| appBannerSettings | ||
| } | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <style scoped lang="scss"> | ||
| .hide-desktop { | ||
| @media (min-width: 768px) { | ||
| display: none; | ||
| } | ||
| } | ||
| .app-banner { | ||
| overflow-x: hidden; | ||
| width: 100%; | ||
| height: 84px; | ||
| background: #f3f3f3; | ||
| font-family: Helvetica, sans, sans-serif; | ||
| z-index: 5; | ||
| } | ||
| .info-container { | ||
| position: absolute; | ||
| top: 10px; | ||
| left: 104px; | ||
| display: flex; | ||
| overflow-y: hidden; | ||
| width: 60%; | ||
| height: 64px; | ||
| align-items: center; | ||
| color: #000; | ||
| } | ||
| .app-banner-icon { | ||
| position: absolute; | ||
| top: 10px; | ||
| left: 30px; | ||
| width: 64px; | ||
| height: 64px; | ||
| border-radius: 15px; | ||
| background-size: 64px 64px; | ||
| } | ||
| .app-banner-cta { | ||
| position: absolute; | ||
| top: 32px; | ||
| right: 10px; | ||
| z-index: 1; | ||
| display: block; | ||
| padding: 0 10px; | ||
| min-width: 10%; | ||
| border-radius: 5px; | ||
| background: #f3f3f3; | ||
| color: #1474fc; | ||
| font-size: 18px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| } | ||
| .app-title { | ||
| font-size: 14px; | ||
| } | ||
| .app-publisher, | ||
| .app-additional-info { | ||
| font-size: 12px; | ||
| } | ||
| .app-banner-exit { | ||
| position: absolute; | ||
| top: 34px; | ||
| left: 9px; | ||
| margin: 0; | ||
| width: 12px; | ||
| height: 12px; | ||
| border: 0; | ||
| text-align: center; | ||
| display: inline; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { Router } from 'vue-router' | ||
|
|
||
| export const buildUrl = (router: Router, pathname) => { | ||
| const base = document.querySelector('base') | ||
| const isHistoryMode = !!base | ||
| const baseUrl = new URL(window.location.href.split('#')[0]) | ||
| baseUrl.search = '' | ||
|
|
||
| if (isHistoryMode) { | ||
| // in history mode we can't determine the base path, it must be provided by the document | ||
| baseUrl.pathname = new URL(base.href).pathname | ||
| } else { | ||
| // in hash mode, auto-determine the base path by removing `/index.html` | ||
| if (baseUrl.pathname.endsWith('/index.html')) { | ||
| baseUrl.pathname = baseUrl.pathname.split('/').slice(0, -1).filter(Boolean).join('/') | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * build full url by either | ||
| * - concatenating baseUrl and pathname (for unknown/non-router urls, e.g. `oidc-callback.html`) or | ||
| * - resolving via router (for known routes) | ||
| */ | ||
| if (/\.(html?)$/i.test(pathname)) { | ||
| baseUrl.pathname = [...baseUrl.pathname.split('/'), ...pathname.split('/')] | ||
| .filter(Boolean) | ||
| .join('/') | ||
| } else { | ||
| baseUrl[isHistoryMode ? 'pathname' : 'hash'] = router.resolve(pathname).href | ||
| } | ||
|
|
||
| return baseUrl.href | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| export * from './routeOptions' | ||
| export * from './buildUrl' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { | ||
| createStore, | ||
| defaultComponentMocks, | ||
| defaultPlugins, | ||
| defaultStoreMockOptions, | ||
| shallowMount | ||
| } from 'web-test-helpers' | ||
| import AppBanner from 'web-pkg/src/components/AppBanner.vue' | ||
| import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router' | ||
| import { useSessionStorage } from '@vueuse/core' | ||
| import { ref } from 'vue' | ||
|
|
||
| jest.mock('@vueuse/core') | ||
|
|
||
| describe('AppBanner', () => { | ||
| it('generates app url with correct app scheme', () => { | ||
| const baseElement = document.createElement('base') | ||
| baseElement.href = '/' | ||
| document.getElementsByTagName('head')[0].appendChild(baseElement) | ||
| delete window.location | ||
| window.location = new URL('https://localhost') as any | ||
|
|
||
| const { wrapper } = getWrapper({ | ||
| fileId: '1337', | ||
| appScheme: 'owncloud', | ||
| sessionStorageReturnValue: null | ||
| }) | ||
| expect(wrapper.find('.app-banner-cta').attributes().href).toBe('owncloud://localhost/f/1337') | ||
| }) | ||
| it('does not show when banner was closed', () => { | ||
| const { wrapper } = getWrapper({ | ||
| fileId: '1337', | ||
| appScheme: 'owncloud', | ||
| sessionStorageReturnValue: '1' | ||
| }) | ||
| expect(wrapper.find('.app-banner').attributes().hidden).toBe('') | ||
| }) | ||
|
|
||
| it('shows when banner was not yet closed', () => { | ||
| const { wrapper } = getWrapper({ | ||
| fileId: '1337', | ||
| appScheme: 'owncloud', | ||
| sessionStorageReturnValue: null | ||
| }) | ||
| expect(wrapper.find('.app-banner').attributes().hidden).toBe(undefined) | ||
| }) | ||
| }) | ||
|
|
||
| function getWrapper({ fileId, appScheme, sessionStorageReturnValue }) { | ||
| const storeOptions = { | ||
| ...defaultStoreMockOptions | ||
| } | ||
|
|
||
| storeOptions.getters.configuration.mockReturnValue({ | ||
| currentTheme: { | ||
| appBanner: { | ||
| title: 'ownCloud', | ||
| publisher: 'ownCloud GmbH', | ||
| additionalInformation: 'FREE', | ||
| ctaText: 'VIEW', | ||
| icon: 'themes/owncloud/assets/owncloud-app-icon.png', | ||
| appScheme | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| const router = createRouter({ | ||
| routes: [ | ||
| { | ||
| path: '/f', | ||
| component: {} | ||
| } | ||
| ], | ||
| history: ('/' && createWebHistory('/')) || createWebHashHistory() | ||
| }) | ||
|
|
||
| jest.mocked(useSessionStorage).mockImplementation(() => { | ||
| return ref<string>(sessionStorageReturnValue) | ||
| }) | ||
|
|
||
| const mocks = { ...defaultComponentMocks(), $router: router } | ||
| const store = createStore(storeOptions) | ||
|
|
||
| return { | ||
| wrapper: shallowMount(AppBanner, { | ||
| props: { | ||
| fileId | ||
| }, | ||
| global: { | ||
| plugins: [...defaultPlugins(), store], | ||
| mocks, | ||
| provide: mocks | ||
| } | ||
| }) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.