VladPolskiy/nextcloud-spreed
1
0
Fork 0
mirror of https://github.com/nextcloud/spreed.git synced 2025-07-21 10:37:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12853 from nextcloud/fix/noid/video-verify-styles

Browse Source 
fix(PublicShareAuthSidebar): fix and refactor styles for video verification sidebar
This commit is contained in:
Maksim Sukharev
2024-08-01 12:13:21 +02:00
committed by GitHub
parent 87e1d6c339 57ead9377f
commit ef1465a888
6 changed files with 83 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/publicshareauth.css
View File

@ -13,10 +13,8 @@
* layout was adjusted. */
body.talk-sidebar-enabled {
/* Move rules set for body by guest.scss to the wrapped body. */
display: unset;
flex-direction: unset;
justify-content: unset;
align-items: unset;
flex-direction: row;
height: 100vh;
}
body.talk-sidebar-enabled #body-login {

110
src/PublicShareAuthSidebar.vue
View File

@ -204,16 +204,24 @@ export default {
}
</script>
<style lang="css">
#talk-sidebar,
#talk-sidebar *,
#talk-sidebar *::before,
#talk-sidebar *::after {
box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
@import './assets/variables';
/* Properties based on the app-sidebar */
/* Styles based on the NcAppSidebar */
#talk-sidebar {
position: relative;
flex-shrink: 0;
width: 27vw;
min-width: 300px;
max-width: 500px;
width: clamp(300px, 27vw, 500px);
height: 100%;
background: var(--color-main-background);
border-left: 1px solid var(--color-border);
@ -228,71 +236,57 @@ export default {
/* Unset conflicting rules from guest.css for the sidebar. */
text-align: left;
}
#talk-sidebar > .emptycontent {
/* Remove default margin-top as it is unneeded when showing only the empty
* content in a flex sidebar. */
margin-top: 0;
}
& > .emptycontent {
/* Remove default margin-top as it is unneeded when showing only the empty
* content in a flex sidebar. */
margin-top: 0;
}
#talk-sidebar #call-container {
position: relative;
& #call-container {
position: relative;
flex-grow: 1;
flex-grow: 1;
/* Prevent shadows of videos from leaking on other elements. */
overflow: hidden;
/* Prevent shadows of videos from leaking on other elements. */
overflow: hidden;
/* Distribute available height between call container and chat view. */
height: 50%;
/* Distribute available height between call container and chat view. */
height: 40%;
/* Ensure that the background will be black also in voice only calls. */
background-color: $color-call-background;
}
/* Ensure that the background will be black also in voice only calls. */
background-color: $color-call-background;
#talk-sidebar #call-container :deep(.videoContainer) {
/* The video container has some small padding to prevent the video from
* reaching the edges, but it also uses "width: 100%", so the padding should
* be included in the full width of the element. */
box-sizing: border-box;
}
:deep(.videoContainer.promoted video) {
/* Base the size of the video on its width instead of on its height;
* otherwise the video could appear in full height but cropped on the sides
* due to the space available in the sidebar being typically larger in
* vertical than in horizontal. */
width: 100%;
height: auto;
}
}
#talk-sidebar #call-container :deep(.videoContainer.promoted video) {
/* Base the size of the video on its width instead of on its height;
* otherwise the video could appear in full height but cropped on the sides
* due to the space available in the sidebar being typically larger in
* vertical than in horizontal. */
width: 100%;
height: auto;
}
& .chatView {
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
#talk-sidebar #call-container :deep(.nameIndicator) {
/* The name indicator has some small padding to prevent the name from
* reaching the edges, but it also uses "width: 100%", so the padding should
* be included in the full width of the element. */
box-sizing: border-box;
}
flex-grow: 1;
#talk-sidebar .chatView {
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
/* Distribute available height between call container and chat view. */
height: 60%;
}
flex-grow: 1;
& :deep(.wrapper) {
margin-top: 0;
}
/* Distribute available height between call container and chat view. */
height: 50%;
}
#talk-sidebar :deep(.wrapper) {
margin-top: 0;
}
/* Restore rules from style.scss overriden by guest.css for the sidebar. */
#talk-sidebar :deep(a) {
color: var(--color-main-text);
font-weight: inherit;
/* Restore rules from style.scss overwritten by guest.css for the sidebar. */
& :deep(a) {
color: var(--color-main-text);
font-weight: inherit;
}
}
</style>

5
src/PublicShareSidebar.vue
View File

@ -26,7 +26,7 @@
<CallView v-if="isInCall"
:token="token"
:is-sidebar="true" />
<CallButton class="call-button" />
<CallButton v-if="!isInCall" class="call-button" />
<ChatView />
<PollViewer />
<MediaSettings :recording-consent-given.sync="recordingConsentGiven" />
@ -274,7 +274,6 @@ export default {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--default-grid-baseline) 0;
}
#talk-sidebar > .emptycontent {
@ -297,7 +296,7 @@ export default {
}
#talk-sidebar .call-button {
margin: 0 auto calc(var(--default-grid-baseline) * 2);
margin: calc(var(--default-grid-baseline) * 2) auto;
}
#talk-sidebar .button-centered {

1
src/components/ConversationIcon.vue
View File

@ -272,6 +272,7 @@ export default {
width: 18px;
border: 2px solid var(--color-main-background);
background-color: var(--color-main-background);
color: var(--color-main-text);
border-radius: 50%;
}

12
src/components/TopBar/CallButton.vue
View File

@ -178,7 +178,15 @@ export default {
},
/**
* Whether the to use text on button at mobile view
* Whether to use text on button (e.g. at sidebar)
*/
hideText: {
type: Boolean,
default: false,
},
/**
* Whether to use text on button at mobile view
*/
shrinkOnMobile: {
type: Boolean,
@ -217,7 +225,7 @@ export default {
return this.$store.getters.conversation(this.token) || this.$store.getters.dummyConversation
},
showButtonText() {
return !this.isMobile || !this.shrinkOnMobile
return !this.hideText && (!this.isMobile || !this.shrinkOnMobile)
},
showRecordingWarning() {
return [CALL.RECORDING.VIDEO_STARTING, CALL.RECORDING.AUDIO_STARTING,

19
src/components/TopBar/TopBar.vue
View File

@ -4,7 +4,10 @@
-->
<template>
<div class="top-bar" :style="topBarStyle" :data-theme-dark="isInCall">
<div class="top-bar"
:class="{ 'top-bar--sidebar': isSidebar}"
:style="topBarStyle"
:data-theme-dark="isInCall">
<ConversationIcon :key="conversation.token"
class="conversation-icon"
:offline="isPeerInactive"
@ -79,7 +82,7 @@
:model="localMediaModel"
@open-breakout-rooms-editor="showBreakoutRoomsEditor = true" />
<CallButton shrink-on-mobile :is-screensharing="!!localMediaModel.attributes.localScreen" />
<CallButton shrink-on-mobile :hide-text="isSidebar" :is-screensharing="!!localMediaModel.attributes.localScreen" />
<!-- Breakout rooms editor -->
<BreakoutRoomsEditor v-if="showBreakoutRoomsEditor"
@ -250,6 +253,7 @@ export default {
topBarStyle() {
return {
'--original-color-main-text': window.getComputedStyle(document.body).getPropertyValue('--color-main-text'),
'--original-color-main-background': window.getComputedStyle(document.body).getPropertyValue('--color-main-background')
}
},
@ -307,7 +311,7 @@ export default {
justify-content: flex-end;
padding: calc(2 * var(--default-grid-baseline));
// Reserve space for the sidebar toggle button
padding-right: calc(2 * var(--default-grid-baseline) + var(--app-sidebar-offset));
padding-right: calc(2 * var(--default-grid-baseline) + var(--app-sidebar-offset, 0));
background-color: var(--color-main-background);
border-bottom: 1px solid var(--color-border);
@ -323,6 +327,14 @@ export default {
left: 0;
background-color: transparent;
}
&--sidebar {
padding: calc(2 * var(--default-grid-baseline));
.conversation-icon {
margin-left: 0;
}
}
}
.conversation-icon {
@ -368,6 +380,7 @@ export default {
}
:deep(.conversation-icon__type) {
color: var(--original-color-main-text) !important;
border-color: var(--original-color-main-background) !important;
background-color: var(--original-color-main-background) !important;
}