From 26feb0f736985a0d7443ea80fde1076973c29199 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 10 Jan 2018 09:52:16 +0100 Subject: [PATCH 1/9] Adjust room name styles to ellipsize and prevent jumping on edit Signed-off-by: Jan-Christoph Borchardt --- css/style.scss | 49 ++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 42 insertions(+), 7 deletions(-) diff --git a/css/style.scss b/css/style.scss index b767dfe8521..a08074d5efd 100644 --- a/css/style.scss +++ b/css/style.scss @@ -126,9 +126,9 @@ background-color: transparent; border: none; position: absolute; - right: 0; - bottom: 3px; - padding: 16px; + right: -6px; + top: -5px; + padding: 22px; opacity: .5; } .icon-confirm.password-confirm:hover, @@ -904,15 +904,25 @@ video { */ .detailCallInfoContainer .room-name { - display: inline-block; + display: block; + width: calc(100% - 29px); /* 44px close button - 15px container padding */ } -.detailCallInfoContainer h3, -.detailCallInfoContainer .guest-name p { +.detailCallInfoContainer h3 { display: inline-block; + width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.detailCallInfoContainer .room-name:hover h3, +.detailCallInfoContainer .room-name:focus h3 { + width: calc(100% - 44px); /* minus the edit button */ } .detailCallInfoContainer .guest-name p { + display: inline-block; padding: 9px 0; } @@ -929,20 +939,45 @@ video { .detailCallInfoContainer .editable-text-label .edit-button .icon { cursor: pointer; padding: 22px; - vertical-align: middle; margin-left: -5px; margin-top: -5px; + opacity: .5; +} + +.detailCallInfoContainer .clipboard-button .icon:hover, +.detailCallInfoContainer .clipboard-button .icon:focus, +.detailCallInfoContainer .editable-text-label .edit-button .icon:hover, +.detailCallInfoContainer .editable-text-label .edit-button .icon:focus { + opacity: 1; +} + +.detailCallInfoContainer .clipboard-button .icon { + vertical-align: middle; } .detailCallInfoContainer .editable-text-label .input-wrapper, .detailCallInfoContainer .password-option { position: relative; display: inline-block; + width: 100%; } .detailCallInfoContainer .editable-text-label input, .detailCallInfoContainer .password-input { width: 100%; + padding-right: 38px; /* 44px for submit button - 6px neg. margin overhang */ + text-overflow: ellipsis; +} + +/* Adjust styles to fit h3 and prevent jumping */ +.detailCallInfoContainer .editable-text-label input { + margin: 3px 0 10px !important; + font-size: 15px; + font-weight: 300; +} +.detailCallInfoContainer .editable-text-label input + .icon-confirm.confirm-button { + top: 0; + right: -3px; } .detailCallInfoContainer #link-checkbox+label { From 881fc120621d6d471e1ae60a198ba02cb6d35a39 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 10 Jan 2018 09:53:16 +0100 Subject: [PATCH 2/9] Fix close icon padding and hover/focus Signed-off-by: Jan-Christoph Borchardt --- css/style.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/css/style.scss b/css/style.scss index a08074d5efd..9111fd3a5e3 100644 --- a/css/style.scss +++ b/css/style.scss @@ -735,13 +735,15 @@ video { position: absolute; top: 0; right: 0; - /* The app uses border-box sizing, so the padding is 15px like in the Files - * app plus 8px of half the size of the icon */ - padding: 23px; - opacity: 0.5; + padding: 22px; + opacity: .5; /* Higher index than the trigger to hide it when the sidebar is open */ z-index: 20; } +#app-sidebar .close:hover, +#app-sidebar .close:focus { + opacity: 1; +} #videos .videoContainer.speaking:not(.videoView) .nameIndicator, #videos .videoContainer.videoView.speaking .nameIndicator .icon-audio { From f14c4c20b2d443668a6f2d71cf6838fe65c74703 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 10 Jan 2018 09:53:46 +0100 Subject: [PATCH 3/9] Use variables for border-color Signed-off-by: Jan-Christoph Borchardt --- css/style.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/css/style.scss b/css/style.scss index 9111fd3a5e3..ef0e648b7fd 100644 --- a/css/style.scss +++ b/css/style.scss @@ -16,12 +16,13 @@ position: absolute; width: 249px; top: 0; - border-bottom: 1px solid #eee; + border-bottom: 1px solid $color-border; } .oca-spreedme-add-person { width: 100%; - border: 1px solid #eee; + border: 1px solid $color-border; + border-radius: $border-radius; } /** From 57375f74766eab48736c0e6e16bd25cb5e7ca366 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 10 Jan 2018 09:54:13 +0100 Subject: [PATCH 4/9] Reduce margin-bottom of participants tab form Signed-off-by: Jan-Christoph Borchardt --- css/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.scss b/css/style.scss index ef0e648b7fd..705bb13a3a9 100644 --- a/css/style.scss +++ b/css/style.scss @@ -1103,7 +1103,7 @@ video { * below the new message input. */ #app-sidebar #participantsTabView form { - margin-bottom: 15px; + margin-bottom: 10px; } /** From 41d48726e849d4a2800b5fa5f313567215e99755 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 10 Jan 2018 10:20:10 +0100 Subject: [PATCH 5/9] Put join call and share link next to each other Signed-off-by: Jan-Christoph Borchardt --- css/style.scss | 22 ++++++++++++++++++++-- js/views/callinfoview.js | 10 ++++++---- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/css/style.scss b/css/style.scss index 705bb13a3a9..4b36af5a8c0 100644 --- a/css/style.scss +++ b/css/style.scss @@ -929,6 +929,21 @@ video { padding: 9px 0; } +.detailCallInfoContainer .container-call-link { + display: flex; +} +.detailCallInfoContainer .container-call, +.detailCallInfoContainer .container-link { + flex-grow: 1; + flex-basis: 50%; +} + +.detailCallInfoContainer .join-call, +.detailCallInfoContainer .leaveCall { + width: calc(100% - 12px); +} + + .detailCallInfoContainer .editable-text-label .edit-button { display: none; } @@ -958,13 +973,16 @@ video { vertical-align: middle; } -.detailCallInfoContainer .editable-text-label .input-wrapper, -.detailCallInfoContainer .password-option { +.detailCallInfoContainer .editable-text-label .input-wrapper { position: relative; display: inline-block; width: 100%; } +.detailCallInfoContainer .password-option { + position: relative; +} + .detailCallInfoContainer .editable-text-label input, .detailCallInfoContainer .password-input { width: 100%; diff --git a/js/views/callinfoview.js b/js/views/callinfoview.js index a8adbae136d..99786284303 100644 --- a/js/views/callinfoview.js +++ b/js/views/callinfoview.js @@ -36,17 +36,18 @@ '{{#if isGuest}}' + '
' + '{{/if}}' + + '
' + '{{#if participantInCall}}' + - '
' + + '
' + ' ' + '
' + '{{else}}' + - '
' + + '
' + ' ' + '
' + '{{/if}}' + '{{#if canModerate}}' + - '
' + + '
' + ' ' + ' ' + ' {{#if isPublic}}' + @@ -58,7 +59,8 @@ '
' + ' {{/if}}' + '
' + - '{{/if}}'; + '{{/if}}' + + '
'; var CallInfoView = Marionette.View.extend({ From cff87eebdca1c21952b69543f532893296786dd6 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 10 Jan 2018 10:22:47 +0100 Subject: [PATCH 6/9] Less default opacity for close icon to separate it from content Signed-off-by: Jan-Christoph Borchardt --- css/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.scss b/css/style.scss index 4b36af5a8c0..9eede39be7d 100644 --- a/css/style.scss +++ b/css/style.scss @@ -737,7 +737,7 @@ video { top: 0; right: 0; padding: 22px; - opacity: .5; + opacity: .3; /* Higher index than the trigger to hide it when the sidebar is open */ z-index: 20; } From 1ebce24f60da9e8848c70d0fb2ffbd3a93cab91e Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 10 Jan 2018 10:41:33 +0100 Subject: [PATCH 7/9] Prevent join call button from growing over 50% Signed-off-by: Jan-Christoph Borchardt --- css/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/css/style.scss b/css/style.scss index 9eede39be7d..d2d86ec178e 100644 --- a/css/style.scss +++ b/css/style.scss @@ -937,6 +937,9 @@ video { flex-grow: 1; flex-basis: 50%; } +.detailCallInfoContainer .container-call { + flex-grow: 0; +} .detailCallInfoContainer .join-call, .detailCallInfoContainer .leaveCall { From 2bb1b47410b1431c9001cb316053f6580f44fea1 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 10 Jan 2018 10:55:54 +0100 Subject: [PATCH 8/9] Limit bigger text input styles to room name Signed-off-by: Jan-Christoph Borchardt --- css/style.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/css/style.scss b/css/style.scss index d2d86ec178e..0e20450cda7 100644 --- a/css/style.scss +++ b/css/style.scss @@ -954,6 +954,7 @@ video { .detailCallInfoContainer .clipboard-button, .detailCallInfoContainer .editable-text-label:hover .edit-button { display: inline-block; + vertical-align: top; } .detailCallInfoContainer .clipboard-button .icon, @@ -994,14 +995,15 @@ video { } /* Adjust styles to fit h3 and prevent jumping */ -.detailCallInfoContainer .editable-text-label input { +.detailCallInfoContainer .editable-text-label.room-name input { margin: 3px 0 10px !important; font-size: 15px; font-weight: 300; -} -.detailCallInfoContainer .editable-text-label input + .icon-confirm.confirm-button { - top: 0; - right: -3px; + + + .icon-confirm.confirm-button { + top: 0; + right: -3px; + } } .detailCallInfoContainer #link-checkbox+label { From fdc59071015eea9d18de57328a33e0b8b4ac0d95 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 10 Jan 2018 11:15:10 +0100 Subject: [PATCH 9/9] Align copy link button for non-moderators Signed-off-by: Jan-Christoph Borchardt --- css/style.scss | 45 ++++++++++++++++++++++++---------------- js/views/callinfoview.js | 2 +- 2 files changed, 28 insertions(+), 19 deletions(-) diff --git a/css/style.scss b/css/style.scss index 0e20450cda7..a33cfe9919d 100644 --- a/css/style.scss +++ b/css/style.scss @@ -907,8 +907,8 @@ video { */ .detailCallInfoContainer .room-name { - display: block; - width: calc(100% - 29px); /* 44px close button - 15px container padding */ + display: inline-block; + width: calc(100% - 73px); /* 44px rename/copy + 44px close - 15px padding */ } .detailCallInfoContainer h3 { @@ -919,14 +919,15 @@ video { overflow: hidden; } -.detailCallInfoContainer .room-name:hover h3, -.detailCallInfoContainer .room-name:focus h3 { - width: calc(100% - 44px); /* minus the edit button */ -} +.detailCallInfoContainer .guest-name { + .label { + display: inline-block; + padding: 9px 0; + } -.detailCallInfoContainer .guest-name p { - display: inline-block; - padding: 9px 0; + .edit-button { + height: 0; + } } .detailCallInfoContainer .container-call-link { @@ -962,7 +963,6 @@ video { cursor: pointer; padding: 22px; margin-left: -5px; - margin-top: -5px; opacity: .5; } @@ -994,15 +994,24 @@ video { text-overflow: ellipsis; } -/* Adjust styles to fit h3 and prevent jumping */ -.detailCallInfoContainer .editable-text-label.room-name input { - margin: 3px 0 10px !important; - font-size: 15px; - font-weight: 300; +/* Fit to h3 and prevent jumping. TODO: convert HTML to be flexbox-capable */ +.detailCallInfoContainer .editable-text-label.room-name { + .edit-button { + position: absolute; + right: 44px; + top: 16px; + } - + .icon-confirm.confirm-button { - top: 0; - right: -3px; + input { + width: calc(100% + 44px); + margin: 3px 0 10px !important; + font-size: 15px; + font-weight: 300; + + + .icon-confirm.confirm-button { + top: 0; + right: -47px; + } } } diff --git a/js/views/callinfoview.js b/js/views/callinfoview.js index 99786284303..e6eff09106d 100644 --- a/js/views/callinfoview.js +++ b/js/views/callinfoview.js @@ -209,7 +209,7 @@ this.ui.clipboardButton.tooltip({ placement: 'bottom', trigger: 'hover', - title: t('spreed', 'Copy') + title: t('spreed', 'Copy link') }); this.initClipboard(); },