Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

More design fixes #553

Merged
merged 9 commits into from
Jan 10, 2018
Merged

More design fixes #553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a105870
Use dark icons when not in a call (= white background)
jancborchardt Jan 9, 2018
33eaa27
Proper default display and hover effect for dark fullscreen and menu …
jancborchardt Jan 9, 2018
dda6de7
Always show app-sidebar-trigger on top, fullscreen icon below
jancborchardt Jan 9, 2018
6af4f02
Combine fullscreen handling rules, ensure white background if 1 parti…
jancborchardt Jan 9, 2018
18358b6
Rename remaining CSS files to SCSS
jancborchardt Jan 9, 2018
b458794
Submit arrow is supposed to be inside the input field, right padding …
jancborchardt Jan 9, 2018
e6dfd58
Fix icons not actually turning white
jancborchardt Jan 9, 2018
c3e7f09
Still use white icons outside of calls when local video shows
jancborchardt Jan 9, 2018
2a19f95
Add 'video-disabled' class to mute button when video is disabled.
Ivansss Jan 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 css/authenticate.css → css/authenticate.scss
View file
Open in desktop
File renamed without changes.
9 changes: 4 additions & 5 deletions css/comments.css → css/comments.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,18 @@
}

#commentsTabView .newCommentForm .message {
width: calc(100% - 81px); /* 36 (left margin) + 30 (right padding) + 15 (right padding of surrounding box) */
width: calc(100% - 32px);
margin-left: 36px;
padding-right: 30px;
display: block;
}

#commentsTabView .newCommentForm .submit {
position: absolute;
bottom: 0px;
right: 8px;
width: 30px;
bottom: -4px;
right: -8px;
margin: 0;
padding: 7px 9px;
padding: 13px 22px;;
background-color: transparent;
border: none;
opacity: .3;
Expand Down
112 changes: 79 additions & 33 deletions css/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,26 @@ video {
background-color: #000;
}

/* Use dark icons when not in a call (= white background) */
#app-content:not(.incall) .icon-white.icon-shadow {
/* Still use white icons outside of calls when local video shows */
&#hideVideo.video-disabled,
&#mute.video-disabled {
filter: none;
}

&.icon-menu-people,
&.icon-fullscreen {
filter: none;
opacity: .5;

&:hover,
&:focus {
opacity: 1;
}
}
}

#app-content.screensharing .videoContainer video {
max-height: 200px;
background-color: transparent;
Expand Down Expand Up @@ -436,12 +456,13 @@ video {

#video-fullscreen {
position: absolute;
top: 44px;
right: 0;
z-index: 90;
}

#video-fullscreen.public {
top: 45px;
top: 89px;
}

#video-fullscreen,
Expand Down Expand Up @@ -505,18 +526,51 @@ video {
opacity: .8 !important;
}

#app-content:-webkit-full-screen {

/* Fullscreen handling */

/**
* Different browsers handle fullscreen elements with a margin in different
* ways: Firefox ignores the margin and uses the full width, while Chromium uses
* a strange mix which is neither the full width nor the full margin. Due to
* this the margin is removed to unify the appearance across browsers; visually,
* this causes the sidebar to slide on the content instead of "pushing" it to
* the left.
*/
#app-content:-webkit-full-screen {
width: 100%;
margin-right: 0;

&.participants-1 {
background: #fff;
}
}
#app-content:-moz-full-screen {
width: 100%;
margin-right: 0;

&.participants-1 {
background: #fff;
}
}
#app-content:-ms-fullscreen {
width: 100%;
margin-right: 0;

&.participants-1 {
background: #fff;
}
}
#app-content:fullscreen {
width: 100%;
margin-right: 0;

&.participants-1 {
background: #fff;
}
}

/* No switching between rooms in fullscreen, focus on the current call. */
#app-content:-webkit-full-screen #app-navigation-toggle {
display: none !important;
}
Expand All @@ -530,27 +584,6 @@ video {
display: none !important;
}

/**
* Different browsers handle fullscreen elements with a margin in different
* ways: Firefox ignores the margin and uses the full width, while Chromium uses
* a strange mix which is neither the full width nor the full margin. Due to
* this the margin is removed to unify the appearance across browsers; visually,
* this causes the sidebar to slide on the content instead of "pushing" it to
* the left.
*/
#app-content:-webkit-full-screen {
margin-right: 0;
}
#app-content:-moz-full-screen {
margin-right: 0;
}
#app-content:-ms-fullscreen {
margin-right: 0;
}
#app-content:fullscreen {
margin-right: 0;
}

/**
* In fullscreen mode there is no header, so the sidebar has to be moved to the
* top.
Expand Down Expand Up @@ -583,19 +616,32 @@ video {
display: none !important;
}

/* As there is no header the fullscreen button can be moved to the top. */
#app-content:-webkit-full-screen #video-fullscreen.public {
/* As there is no header in fullscreen the buttons can be moved to the top. */
#app-content:-webkit-full-screen #app-sidebar-trigger {
top: 0;
}
#app-content:-moz-full-screen #video-fullscreen.public {
#app-content:-moz-full-screen #app-sidebar-trigger {
top: 0;
}
#app-content:-ms-fullscreen #video-fullscreen.public {
#app-content:-ms-fullscreen #app-sidebar-trigger {
top: 0;
}
#app-content:fullscreen #video-fullscreen.public {
#app-content:fullscreen #app-sidebar-trigger {
top: 0;
}
#app-content:-webkit-full-screen #video-fullscreen {
top: 44px;
}
#app-content:-moz-full-screen #video-fullscreen {
top: 44px;
}
#app-content:-ms-fullscreen #video-fullscreen {
top: 44px;
}
#app-content:fullscreen #video-fullscreen {
top: 44px;
}


.localmediaerror h2 {
color: red;
Expand Down Expand Up @@ -672,11 +718,7 @@ video {

#app-sidebar-trigger {
position: fixed;
/* Although it would be desirable due to their complementary behaviour, the
* trigger can not be placed at the same position as the close button
* (top: 45px) due to the "Switch to fullscreen" icon shown during calls.
* Set to 45px (header) + 44px (fullscreen icon). */
top: 89px;
top: 45px;
right: 0;
/* Higher than the z-index of the emptycontent */
z-index: 50;
Expand Down Expand Up @@ -732,10 +774,14 @@ video {
/* As the header is hidden (except for the logo), move the fullscreen button and
* sidebar to the top during calls */
#body-public #app-content:not(.participants-1) #app-sidebar,
#body-public #app-content:not(.participants-1) #app-sidebar-trigger,
#body-public #app-content:not(.participants-1) #video-fullscreen {
top: 0;
z-index: 3000;
}
#body-public #app-content:not(.participants-1) #video-fullscreen {
top: 44px;
}

/**
* Right sidebar
Expand Down
4 changes: 4 additions & 0 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -632,13 +632,15 @@
},
enableVideo: function() {
var $hideVideoButton = $('#hideVideo');
var $audioMuteButton = $('#mute');
var avatarContainer = $hideVideoButton.closest('.videoView').find('.avatar-container');
var localVideo = $hideVideoButton.closest('.videoView').find('#localVideo');

OCA.SpreedMe.webrtc.resumeVideo();
$hideVideoButton.attr('data-original-title', t('spreed', 'Disable video'))
.removeClass('video-disabled icon-video-off')
.addClass('icon-video');
$audioMuteButton.removeClass('video-disabled');

avatarContainer.hide();
localVideo.show();
Expand All @@ -647,13 +649,15 @@
},
hideVideo: function() {
var $hideVideoButton = $('#hideVideo');
var $audioMuteButton = $('#mute');
var avatarContainer = $hideVideoButton.closest('.videoView').find('.avatar-container');
var localVideo = $hideVideoButton.closest('.videoView').find('#localVideo');

if (!$hideVideoButton.hasClass('no-video-available')) {
$hideVideoButton.attr('data-original-title', t('spreed', 'Enable video'))
.addClass('video-disabled icon-video-off')
.removeClass('icon-video');
$audioMuteButton.addClass('video-disabled');
}

var avatar = avatarContainer.find('.avatar');
Expand Down