From 339b1dfc05e3ff01c89f58757febb7a7fa97e887 Mon Sep 17 00:00:00 2001 From: Joas Schilling Date: Mon, 28 Jan 2019 16:07:58 +0100 Subject: [PATCH] Fix icons for .incall scene when dark mode is enabled Signed-off-by: Joas Schilling --- css/style.scss | 72 +++++++++++-------- css/video.scss | 2 +- js/views/sidebarview.js | 2 +- js/views/templates.js | 6 +- .../templates/mediacontrolsview.handlebars | 6 +- js/webrtc.js | 8 +-- templates/index-public.php | 2 +- templates/index.php | 2 +- 8 files changed, 58 insertions(+), 42 deletions(-) diff --git a/css/style.scss b/css/style.scss index bd420cbd2..8baf80164 100644 --- a/css/style.scss +++ b/css/style.scss @@ -298,43 +298,59 @@ input[type="password"] { } } -/* Use dark icons when not in a call (= white background) */ -#app-content:not(.incall):not(.screensharing) .icon-white.icon-shadow, -#app-content:not(.incall):not(.screensharing) ~ #app-sidebar-wrapper .icon-white.icon-shadow { - /* Still use white icons outside of calls when local video shows; otherwise - * use dark icons. - * There is no need to override "icon-video" and "icon-screensharing", as - * they will never be shown with dark icons. */ - &#hideVideo.local-video-disabled, - &#mute.local-video-disabled, - &#screensharing-button.local-video-disabled { - filter: none; +#app-content:not(.incall):not(.screensharing) .force-icon-white-in-call, +#app-content:not(.incall):not(.screensharing) ~ #app-sidebar-wrapper .force-icon-white-in-call { + /* + * Also force the white icons, when the video of the local participant is shown, + * because the black icons are not visible on videos, especially when your camera is covered. + */ + &#hideVideo:not(.local-video-disabled) { + background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true)); } - &#hideVideo.local-video-disabled { - background-image: var(--icon-video-off-000); - } - &#mute.local-video-disabled { - &.icon-audio-off { - background-image: var(--icon-audio-off-000); - } + &#mute:not(.local-video-disabled) { &.icon-audio { - background-image: var(--icon-audio-000); + background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true)); + } + &.icon-audio-off { + background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true)); } } - &#screensharing-button.local-video-disabled { - background-image: var(--icon-screen-off-000); + &#screensharing-button:not(.local-video-disabled) { + background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true)); } +} +#app-content.incall .force-icon-white-in-call, +#app-content.screensharing .force-icon-white-in-call, +#app-content.incall ~ #app-sidebar-wrapper .force-icon-white-in-call, +#app-content.screensharing ~ #app-sidebar-wrapper .force-icon-white-in-call { + /* + * Force the white icon, independent from white/dark mode selection, + * because those icons are presented on our black calling-screen. + */ &.icon-menu-people { - background-image: var(--icon-spreed-menu-people-000); + background-image: url(icon-color-path('menu-people', 'spreed', 'fff', 1, false)); } &.icon-fullscreen { - background-image: var(--icon-fullscreen-000); + background-image: url(icon-color-path('fullscreen', 'actions', 'fff', 1, true)); } - - &.icon-menu-people, - &.icon-fullscreen { - filter: none; + &.icon-audio { + background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true)); + } + &.icon-audio-off { + background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true)); + } + &.icon-video { + background-image: url(icon-color-path('video', 'actions', 'fff', 1, true)); + } + &.icon-video-off { + background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true)); + } + &.icon-screen { + background-image: url(icon-color-path('screen', 'actions', 'fff', 1, true)); + } + &.icon-screen-off { + background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true)); } } @@ -1071,8 +1087,8 @@ input[type="password"] { /** * Dark-Theme fixes */ +// We always want to use the white icons, this is why we don't use var(--color-white) here. .avatar.icon { - // We always want to use the white icons, this is why we don't use var(--color-white) here. &.icon-public { background-image: url(icon-color-path('public', 'actions', 'fff', 1, true)); } diff --git a/css/video.scss b/css/video.scss index 4e2eeae8d..92014235a 100644 --- a/css/video.scss +++ b/css/video.scss @@ -51,7 +51,7 @@ video { #app-content.screensharing .videoContainer video { max-height: 200px; background-color: transparent; - box-shadow: 0; + box-shadow: none; } #screens video { diff --git a/js/views/sidebarview.js b/js/views/sidebarview.js index b227ce206..e47def154 100644 --- a/js/views/sidebarview.js +++ b/js/views/sidebarview.js @@ -28,7 +28,7 @@ OCA.SpreedMe.Views = OCA.SpreedMe.Views || {}; var TEMPLATE = - '
' + + '
' + '
' + '
' + '
' + diff --git a/js/views/templates.js b/js/views/templates.js index 4e4544541..b3d1d9c4c 100644 --- a/js/views/templates.js +++ b/js/views/templates.js @@ -116,11 +116,11 @@ templates['chatview_comment'] = template({"1":function(container,depth0,helpers, templates['mediacontrolsview'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression; - return "\n\n\n\n\n
\n
    \n
  • \n - - + + +
    • diff --git a/js/webrtc.js b/js/webrtc.js index 8a8cf16b8..6cf3715f3 100644 --- a/js/webrtc.js +++ b/js/webrtc.js @@ -386,11 +386,11 @@ var spreedPeerConnectionTable = []; mediaIndicator.className = 'mediaIndicator'; var muteIndicator = document.createElement('button'); - muteIndicator.className = 'muteIndicator icon-white icon-shadow icon-audio-off audio-on'; + muteIndicator.className = 'muteIndicator force-icon-white-in-call icon-shadow icon-audio-off audio-on'; muteIndicator.disabled = true; var hideRemoteVideoButton = document.createElement('button'); - hideRemoteVideoButton.className = 'hideRemoteVideo icon-white icon-shadow icon-video'; + hideRemoteVideoButton.className = 'hideRemoteVideo force-icon-white-in-call icon-shadow icon-video'; hideRemoteVideoButton.setAttribute('style', 'display: none;'); hideRemoteVideoButton.setAttribute('data-original-title', t('spreed', 'Disable video')); hideRemoteVideoButton.onclick = function() { @@ -398,11 +398,11 @@ var spreedPeerConnectionTable = []; }; var screenSharingIndicator = document.createElement('button'); - screenSharingIndicator.className = 'screensharingIndicator icon-white icon-shadow icon-screen screen-off'; + screenSharingIndicator.className = 'screensharingIndicator force-icon-white-in-call icon-shadow icon-screen screen-off'; screenSharingIndicator.setAttribute('data-original-title', t('spreed', 'Show screen')); var iceFailedIndicator = document.createElement('button'); - iceFailedIndicator.className = 'iceFailedIndicator icon-white icon-shadow icon-error not-failed'; + iceFailedIndicator.className = 'iceFailedIndicator force-icon-white-in-call icon-shadow icon-error not-failed'; iceFailedIndicator.disabled = true; $(hideRemoteVideoButton).tooltip({ diff --git a/templates/index-public.php b/templates/index-public.php index 96e1cd212..e4e511eba 100644 --- a/templates/index-public.php +++ b/templates/index-public.php @@ -59,7 +59,7 @@ script(
      - +
      diff --git a/templates/index.php b/templates/index.php index e42367800..83de43f9e 100644 --- a/templates/index.php +++ b/templates/index.php @@ -66,7 +66,7 @@ script(
      - +