diff --git a/css/publicshare.css b/css/publicshare.css deleted file mode 100644 index 43249170220..00000000000 --- a/css/publicshare.css +++ /dev/null @@ -1,75 +0,0 @@ -/** - * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors - * SPDX-License-Identifier: AGPL-3.0-or-later - */ - -/* Special layout to include the Talk sidebar */ - -/* The standard layout defined in the server includes a fixed header with a - * sticky sidebar. This causes the scroll bar for the main area to appear to the - * right of the sidebar, which looks confusing for the chat. Thus that layout is - * overridden with a static header and a content with full height without header - * to limit the vertical scroll bar only to it. - * Note that the flex layout can not be cascaded from the body element, as a - * flex display is not compatible with the absolute position set for the - * autocompletion panel, which is reparented to the body when shown. */ -#body-user #header, -#body-public #header { - /* Override fixed position from server to include it in the body layout */ - position: static; -} - -#content.full-height { - /* Always full height without header. */ - height: calc(100% - 50px); -} - -#content { - display: flex; - flex-direction: row; - overflow: hidden; - - flex-grow: 1; - - /* Override "min-height: 100%" and "padding-top: 50px" set in server, as the - * header is part of the flex layout and thus the whole body is not - * available for the content. */ - min-height: 0; - padding-top: 0; - - /* Override margin used in server, as the header is part of the flex layout - * and thus the content does not need to be pushed down. */ - margin-top: 0; -} - -#app-content { - position: relative; - - display: flex; - flex-direction: column; - overflow-y: auto; - overflow-x: hidden; - - flex-grow: 1; - - margin-right: 0; -} - -#files-public-content { - flex-grow: 1; -} - -#content footer { - position: relative; -} - -#content footer p a { - /* The server sets an height to the footer of 65px, but its contents are - * slightly larger, which causes a scroll bar to be added to the content - * even if there is enough space for the app content and the footer. - * The padding of links is 10px, so in practice reducing the bottom padding - * only affects the bottom padding of the last element (as in adjacent - * paragraphs the paddings would get merged and there will still be 10px - * from the top padding of the second element). */ - padding-bottom: 8px; -} diff --git a/lib/PublicShare/TemplateLoader.php b/lib/PublicShare/TemplateLoader.php index a705f6c86cb..906d9b67b80 100644 --- a/lib/PublicShare/TemplateLoader.php +++ b/lib/PublicShare/TemplateLoader.php @@ -74,7 +74,6 @@ public function handle(Event $event): void { } Util::addStyle(Application::APP_ID, 'icons'); - Util::addStyle(Application::APP_ID, 'publicshare'); Util::addScript(Application::APP_ID, 'talk-public-share-sidebar'); $this->publishInitialStateForGuest(); diff --git a/package-lock.json b/package-lock.json index fb41542bce0..d0b067154b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@nextcloud/moment": "^1.3.1", "@nextcloud/paths": "^2.2.1", "@nextcloud/router": "^3.0.1", + "@nextcloud/sharing": "^0.2.3", "@nextcloud/upload": "^1.6.1", "@nextcloud/vue": "^8.19.0", "@vueuse/components": "^11.1.0", @@ -3729,6 +3730,7 @@ "version": "0.2.3", "resolved": "https://registry.npmjs.org/@nextcloud/sharing/-/sharing-0.2.3.tgz", "integrity": "sha512-hxQFOBBahbJkcmAGZFVS3943pQGSafNF6LMHmgcj0JPqExu1DWKuZvsCXZnGkaRJVcewHnZFcLAhpOf+VfcZmA==", + "license": "GPL-3.0-or-later", "dependencies": { "@nextcloud/initial-state": "^2.2.0" }, diff --git a/package.json b/package.json index 927fcd996b5..27c0504e2cd 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@nextcloud/moment": "^1.3.1", "@nextcloud/paths": "^2.2.1", "@nextcloud/router": "^3.0.1", + "@nextcloud/sharing": "^0.2.3", "@nextcloud/upload": "^1.6.1", "@nextcloud/vue": "^8.19.0", "@vueuse/components": "^11.1.0", diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue index 3997dc321f1..f9c504a5a57 100644 --- a/src/PublicShareSidebar.vue +++ b/src/PublicShareSidebar.vue @@ -256,6 +256,13 @@ export default { body .modal-wrapper * { box-sizing: border-box; } + +footer { + transition: width var(--animation-quick); +} +#content-vue:has(#talk-sidebar) ~ footer { + width: calc(100% - 2 * var(--body-container-margin) - clamp(300px, 27vw, 500px)); +} diff --git a/src/mainPublicShareSidebar.js b/src/mainPublicShareSidebar.js index ccd6a34c960..8be00e3001b 100644 --- a/src/mainPublicShareSidebar.js +++ b/src/mainPublicShareSidebar.js @@ -9,6 +9,7 @@ import Vuex from 'vuex' import { getRequestToken } from '@nextcloud/auth' import { generateFilePath } from '@nextcloud/router' +import { getSharingToken } from '@nextcloud/sharing/public' import PublicShareSidebar from './PublicShareSidebar.vue' import PublicShareSidebarTrigger from './PublicShareSidebarTrigger.vue' @@ -42,19 +43,6 @@ Vue.use(Vuex) const pinia = createPinia() -/** - * - */ -function adjustLayout() { - document.querySelector('#app-content').appendChild(document.querySelector('footer')) - - const talkSidebarElement = document.createElement('div') - talkSidebarElement.setAttribute('id', 'talk-sidebar') - document.querySelector('#content').appendChild(talkSidebarElement) -} - -adjustLayout() - // An "isOpen" boolean should be passed to the component, but as it is a // primitive it would not be reactive; it needs to be wrapped in an object and // that object passed to the component to get reactivity. @@ -69,21 +57,14 @@ if (window.innerWidth > 1111) { } /** - * + * Mount the Talk sidebar toggle button to the header. */ function addTalkSidebarTrigger() { - const talkSidebarTriggerElement = document.createElement('button') + const talkSidebarTriggerElement = document.createElement('div') talkSidebarTriggerElement.setAttribute('id', 'talk-sidebar-trigger') - - // The ".header-right" element may not exist in the public share page if - // there are no header actions. - if (!document.querySelector('.header-right')) { - const headerRightElement = document.createElement('div') - headerRightElement.setAttribute('class', 'header-right') - document.querySelector('#header').appendChild(headerRightElement) - } - - document.querySelector('.header-right').appendChild(talkSidebarTriggerElement) + // The ".header-end" element should exist (/server/core/templates/layout.public.php) + const mountPoint = document.querySelector('.header-end') ?? document.getElementById('header') + mountPoint.appendChild(talkSidebarTriggerElement) const talkSidebarTriggerVm = new Vue({ propsData: { @@ -100,21 +81,24 @@ function addTalkSidebarTrigger() { addTalkSidebarTrigger() /** - * + * Mount the Talk sidebar next to the main content. */ -function getShareToken() { - const shareTokenElement = document.getElementById('sharingToken') - return shareTokenElement.value +function addTalkSidebar() { + const talkSidebarElement = document.createElement('div') + talkSidebarElement.setAttribute('id', 'talk-sidebar') + document.getElementById('content-vue').appendChild(talkSidebarElement) + + const talkSidebarVm = new Vue({ + store, + pinia, + id: 'talk-chat-tab', + propsData: { + shareToken: getSharingToken(), + state: sidebarState, + }, + ...PublicShareSidebar, + }) + talkSidebarVm.$mount(document.querySelector('#talk-sidebar')) } -const talkSidebarVm = new Vue({ - store, - pinia, - id: 'talk-chat-tab', - propsData: { - shareToken: getShareToken(), - state: sidebarState, - }, - ...PublicShareSidebar, -}) -talkSidebarVm.$mount(document.querySelector('#talk-sidebar')) +addTalkSidebar()