haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref(toolbar): remove use-new-toolbox class 

Very likely I broke something subtle and I'm prepared to fix it.
This commit is contained in:
Leonard Kim 2018-06-22 15:12:23 -07:00
parent cc319ad5e9
commit c958c64ba8
10 changed files with 62 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/_atlaskit_overrides.scss Normal file
View File

@ -0,0 +1,12 @@
/**
* Move Atlaskit Flag up a little bit so it does not cover the toolbar with the
* first notification.
*/
.cxGWJB{
bottom: calc(#{$newToolbarSizeWithPadding}) !important;
}
.gXSEsl:nth-child(n+2) {
transform: translateX(0) translateY(100%) translateY(16px) !important;
-ms-transform: translateX(0) translateY(100%) translateY(16px) !important;
-webkit-transform: translateX(0) translateY(100%) translateY(16px) !important;
}

52
css/_chat.scss
View File

@ -6,7 +6,7 @@
#chatconversation {
visibility: hidden;
position: relative;
top: 5px;
top: 15px;
padding: 5px;
text-align: left;
line-height: 20px;
@ -60,37 +60,7 @@
}
.localuser {
color: #087dba;
}
.use-new-toolbox {
.chatmessage {
color: white;
}
.localuser {
color: #4C9AFF;
}
.remoteuser {
color: #B8C7E0;
}
#usermsg {
color: white;
}
.chatmessage,
#smileysarea,
#smileysContainer,
#usermsg {
background-color: $newToolbarBackgroundColor;
}
.smileyContainer:hover {
background-color: $newToolbarButtonToggleColor;
border-radius: 5px;
cursor: pointer;
}
color: #4C9AFF
}
.errorMessage {
@ -98,10 +68,11 @@
}
.remoteuser {
color: white;
color: #B8C7E0;
}
#usermsg {
background-color: $newToolbarBackgroundColor;
visibility:hidden;
position: absolute;
bottom: 0px;
@ -112,8 +83,7 @@
max-height:150px;
min-height:35px;
border: 0px none;
background: #3a3a3a;
color: #a7a7a7;
color: white;
box-shadow: none;
border-radius:0;
font-size: 10pt;
@ -183,7 +153,7 @@
}
.chatmessage {
background: #3a3a3a;
background-color: $newToolbarBackgroundColor;;
width: 93%;
margin-left: 9px;
margin-right: auto;
@ -191,7 +161,7 @@
border-top-left-radius: 0px;
margin-top: 3px;
left: 5px;
color: #a7a7a7;
color: white;
overflow: hidden;
padding-bottom: 3px;
}
@ -227,7 +197,7 @@
max-height:150px;
min-height:35px;
border: 0px none;
background: #3a3a3a;
background-color: $newToolbarBackgroundColor;
overflow: hidden;
visibility: hidden;
}
@ -239,7 +209,7 @@
#smileysContainer {
display: none;
position: absolute;
background: #3a3a3a;
background-color: $newToolbarBackgroundColor;
border-bottom: 1px solid;
border-top: 1px solid;
width: 100%;
@ -257,7 +227,9 @@
}
.smileyContainer:hover {
background: #3e3e3e;
background-color: $newToolbarButtonToggleColor;
border-radius: 5px;
cursor: pointer;
}
#usermsg::-webkit-input-placeholder {

21
css/_filmstrip.scss
View File

@ -5,28 +5,19 @@
justify-content: flex-start;
}
.use-new-toolbox {
.filmstrip.reduce-height {
bottom: $newToolbarSizeWithPadding;
}
.filmstrip {
transition: bottom .3s;
}
.filmstrip__videos.hidden {
bottom: calc(-196px - #{$newToolbarSizeWithPadding});
}
}
.filmstrip {
position: absolute;
bottom: 0;
right: 0;
padding: 10px 5px;
@extend %align-right;
transition: bottom .3s;
z-index: $filmstripVideosZ;
&.reduce-height {
bottom: $newToolbarSizeWithPadding;
}
&__toolbar {
@include flex();
flex-direction: column-reverse;
@ -83,7 +74,7 @@
}
&.hidden {
bottom: -196px;
bottom: calc(-196px - #{$newToolbarSizeWithPadding});
}
.remote-videos-container {

46
css/_side_toolbar_container.scss
View File

@ -1,41 +1,14 @@
/**
* Toolbar side panel main container element.
*/
.use-new-toolbox #sideToolbarContainer {
#sideToolbarContainer {
background-color: $newToolbarBackgroundColor;
/**
* Make the sidebar flush with the top of the toolbar. Take the size of
* the toolbar and subtract from 100%.
*/
height: calc(100% - #{$newToolbarSizeWithPadding});
left: 0;
.side-toolbar-close {
background: gray;
border: 3px solid rgba(255, 255, 255, 0.1);
border-radius: 100%;
color: white;
cursor:pointer;
height: 10px;
line-height: 10px;
padding: 4px;
position: absolute;
right: 5px;
text-align: center;
top: 5px;
width: 10px;
z-index: 1;
}
#chatconversation {
top: 15px;
}
}
#sideToolbarContainer {
background-color: $sideToolbarContainerBg;
height: 100%;
left: $defaultToolbarSize;
max-width: $sidebarWidth;
overflow: hidden;
position: absolute;
@ -112,4 +85,21 @@
margin-top: 0 !important;
}
}
.side-toolbar-close {
background: gray;
border: 3px solid rgba(255, 255, 255, 0.1);
border-radius: 100%;
color: white;
cursor:pointer;
height: 10px;
line-height: 10px;
padding: 4px;
position: absolute;
right: 5px;
text-align: center;
top: 5px;
width: 10px;
z-index: 1;
}
}

11
css/_toolbars.scss
View File

@ -19,17 +19,6 @@
vertical-align: middle;
}
.use-new-toolbox {
.cxGWJB{
bottom: calc(#{$newToolbarSizeWithPadding});
}
.gXSEsl:nth-child(n+2) {
transform: translateX(0) translateY(100%) translateY(16px);
-ms-transform: translateX(0) translateY(100%) translateY(16px);
-webkit-transform: translateX(0) translateY(100%) translateY(16px);
}
}
/**
* TODO: when the old filmstrip has been removed, remove the "new-" prefix.
*/

23
css/_vertical_filmstrip_overrides.scss
View File

@ -19,20 +19,6 @@
text-align: left;
}
&.use-new-toolbox {
/**
* Adjust the height of the filmstrip as the toolbar is displayed.
*/
.filmstrip {
top: 0;
transition: height .3s ease-in;
&.reduce-height {
height: calc(100% - #{$newToolbarSizeWithPadding});
}
}
}
.filmstrip {
align-items: flex-end;
box-sizing: border-box;
@ -46,8 +32,17 @@
* any parent is also fixed.
*/
position: fixed;
top: 0;
transition: height .3s ease-in;
z-index: $filmstripVideosZ;
/**
* Adjust the height of the filmstrip as the toolbar is displayed.
*/
&.reduce-height {
height: calc(100% - #{$newToolbarSizeWithPadding});
}
/**
* Hide videos by making them slight to the right.
*/

1
css/main.scss
View File

@ -31,6 +31,7 @@
/* Modules BEGIN */
@import 'aui_reset';
@import 'atlaskit_overrides';
@import 'base';
@import 'utils';
@import 'overlay/overlay';

5
css/modals/invite/_info.scss
View File

@ -1,10 +1,7 @@
.use-new-toolbox {
font-size: 14px;
}
.info-dialog {
cursor: default;
display: flex;
font-size: 14px;
.info-dialog-action-link {
display: inline-block;

6
modules/UI/UI.js
View File

@ -319,12 +319,6 @@ UI.start = function() {
// Initialize side panels
SidePanels.init(eventEmitter);
// TODO: remove this class once the old toolbar has been removed. This
// class is set so that any CSS changes needed to adjust elements
// outside of the new toolbar can be scoped to just the app with the new
// toolbar enabled.
$('body').addClass('use-new-toolbox');
}
interfaceConfig.VERTICAL_FILMSTRIP

4
react/features/filmstrip/components/web/Filmstrip.js
View File

@ -108,7 +108,9 @@ class Filmstrip extends Component<*> {
// will get updated without replacing the DOM. If the known DOM gets
// modified, then the views will get blown away.
const reduceHeight
= _toolboxVisible && interfaceConfig.TOOLBAR_BUTTONS.length;
= !_filmstripOnly
&& _toolboxVisible
&& interfaceConfig.TOOLBAR_BUTTONS.length;
const classNames
= `filmstrip ${
_remoteVideosVisible ? '' : 'hide-videos'} ${