This is an automated email from the ASF dual-hosted git repository. solomax pushed a commit to branch OPENMEETINGS-2225-alternative in repository https://gitbox.apache.org/repos/asf/openmeetings.git
commit 8e901ab752440d8ffbcdb171e51f3d4e9014bc56 Author: Maxim Solodovnik <[email protected]> AuthorDate: Sun Apr 5 11:39:59 2020 +0700 [OPENMEETINGS-2225] alternative fix for menu issue --- .../apache/openmeetings/web/room/RoomPanel.html | 10 +- openmeetings-web/src/main/webapp/css/raw-menu.css | 7 +- openmeetings-web/src/main/webapp/css/raw-room.css | 110 ++++++++++---------- .../src/main/webapp/css/raw-variables.css | 3 +- openmeetings-web/src/main/webapp/css/raw-wb.css | 112 ++++++++++----------- 5 files changed, 123 insertions(+), 119 deletions(-) diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html index 2a51e15..787b877 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html @@ -23,10 +23,12 @@ <div class="room-block"> <div class="room-container" wicket:id="roomContainer"> <div class="menu" wicket:id="menu"></div> - <div class="sidebar" wicket:id="sidebar"></div> - <div wicket:id="wb-area" class="wb-block"> - <div class="wb-drop-area"></div> - <div class="wb-area" wicket:id="whiteboard"></div> + <div class="sb-wb"> + <div class="sidebar" wicket:id="sidebar"></div> + <div wicket:id="wb-area" class="wb-block"> + <div class="wb-drop-area"></div> + <div class="wb-area" wicket:id="whiteboard"></div> + </div> </div> </div> <div class="event-details" wicket:id="event-details"></div> diff --git a/openmeetings-web/src/main/webapp/css/raw-menu.css b/openmeetings-web/src/main/webapp/css/raw-menu.css index 3565289..b628f34 100644 --- a/openmeetings-web/src/main/webapp/css/raw-menu.css +++ b/openmeetings-web/src/main/webapp/css/raw-menu.css @@ -3,9 +3,6 @@ padding-top: 0; padding-bottom: 0; } -.room-block .menu { - height: var(--room-menu-height); -} .room-block .menu .top.exit { padding-left: 0; } @@ -26,9 +23,7 @@ font-weight: bold; } .room-block .menu .details .room.name.screen { - color: red; -} -.room-block .menu .details .room.demo { + color: var(--danger); } .room-block .menu .details .icon { width: 30px; diff --git a/openmeetings-web/src/main/webapp/css/raw-room.css b/openmeetings-web/src/main/webapp/css/raw-room.css index cd24fc1..dcdc81b 100644 --- a/openmeetings-web/src/main/webapp/css/raw-room.css +++ b/openmeetings-web/src/main/webapp/css/raw-room.css @@ -3,18 +3,6 @@ width: 100%; height: 100%; } -.room-block .sidebar .user-list .user .om-icon.user-status { - border-radius: 50%; -} -.room-block .sidebar .user-list .user .om-icon.user-status.user { - background-color: var(--success); -} -.room-block .sidebar .user-list .user .om-icon.user-status.wb { - background-color: var(--warning); -} -.room-block .sidebar .user-list .user .om-icon.user-status.mod { - background-color: var(--danger); -} .room-block .event-details.modal { position: absolute; width: 300px; @@ -28,37 +16,44 @@ padding: 0; margin: 0; } -.room-block .sidebar { +.room-block .sb-wb { + height: calc(100% - var(--room-menu-height)); + width: calc(100% - var(--chat-width) - var(--buffer-size)); + display: inline-block; + position: relative; +} +.room-block .sb-wb .sidebar { min-width: 155px; width: var(--room-sidebar-width); position: absolute; - height: calc(100% - var(--room-menu-height)); + height: 100%; + top: 0; right: auto; left: 0; } -.room-block .sidebar #room-sidebar-tabs { +.room-block .sb-wb .sidebar #room-sidebar-tabs { height: calc(100% - var(--buffer-size) - var(--activities-height)); } -.room-block .sidebar .tab { +.room-block .sb-wb .sidebar .tab { padding: 5px 0 0 0; } -.room-block .sidebar .tab i { +.room-block .sb-wb .sidebar .tab i { font-size: 2.0em; vertical-align: top; } -html[dir="rtl"] .room-block .sidebar { +html[dir="rtl"] .room-block .sb-wb .sidebar { right: 0; left: auto; } -.room-block .sidebar #busy-indicator { +.room-block .sb-wb .sidebar #busy-indicator { margin: 8px; } -.room-block .sidebar .ui-resizable-handle, #chatPanel.room .ui-resizable-handle { +.room-block .sb-wb .sidebar .ui-resizable-handle, #chatPanel.room .ui-resizable-handle { width: 4px; background-color: #f3f3f4; border: 1px solid #dedee0; } -.room-block .sidebar .ui-resizable-handle:hover, #chatPanel.room .ui-resizable-handle:hover { +.room-block .sb-wb .sidebar .ui-resizable-handle:hover, #chatPanel.room .ui-resizable-handle:hover { background-color: #b6bdca; border-color: #bebec3; } @@ -74,11 +69,11 @@ html[dir="rtl"] .room-block .sidebar { font-size: 2.0em; line-height: 1.2em; } -.room-block .sidebar .user-list { +.room-block .sb-wb .sidebar .user-list { overflow-y: auto; height: calc(100% - var(--room-sidebar-header-height) - var(--buffer-size)); } -.room-block .sidebar .user-list .user.entry { +.room-block .sb-wb .sidebar .user-list .user.entry { min-height: 60px; padding-left: 5px; padding-top: 5px; @@ -87,27 +82,27 @@ html[dir="rtl"] .room-block .sidebar { background-position: 2px 2px; position: relative; } -.room-block .sidebar .user-list .user.entry:hover { +.room-block .sb-wb .sidebar .user-list .user.entry:hover { background-size: 80px 80px; min-height: 80px; } -.room-block .sidebar .user-list .user.entry:hover .user.name { +.room-block .sb-wb .sidebar .user-list .user.entry:hover .user.name { padding: 0; margin-top: 84px; min-height: 18px; } -.room-block .sidebar .user-list .user.entry .user.actions { +.room-block .sb-wb .sidebar .user-list .user.entry .user.actions { display: none; } .room-block.narrow .sidebar .user-list .user.entry:hover .user.actions { margin-top: 84px; } -.room-block .sidebar .user-list .user.entry:hover .user.actions { +.room-block .sb-wb .sidebar .user-list .user.entry:hover .user.actions { display: block; padding: 0; margin-right: 35px; } -.room-block .sidebar .user-list .user.name { +.room-block .sb-wb .sidebar .user-list .user.name { line-height: 18px; height: 18px; padding: 0; @@ -118,7 +113,19 @@ html[dir="rtl"] .room-block .sidebar { .room-block.narrow .sidebar .user-list .user.name { display: none; } -.room-block .sidebar .user-list .user.entry .om-icon.audio-activity { +.room-block .sb-wb .sidebar .user-list .user.entry .om-icon.user-status { + border-radius: 50%; +} +.room-block .sb-wb .sidebar .user-list .user.entry .om-icon.user-status.user { + background-color: var(--success); +} +.room-block .sb-wb .sidebar .user-list .user.entry .om-icon.user-status.wb { + background-color: var(--warning); +} +.room-block .sb-wb .sidebar .user-list .user.entry .om-icon.user-status.mod { + background-color: var(--danger); +} +.room-block .sb-wb .sidebar .user-list .user.entry .om-icon.audio-activity { position: absolute; bottom: 2px; right: 2px; @@ -143,23 +150,23 @@ html[dir="rtl"] .room-block .sidebar { .user-list .user.entry .video-container .footer { display: none !important; } -.room-block .sidebar .icon-undock, .room-block .sidebar .icon-dock { +.room-block .sb-wb .sidebar .icon-undock, .room-block .sb-wb .sidebar .icon-dock { font-size: 1.6em; padding-top: 3px; } -.room-block .sidebar .icon-dock:before { +.room-block .sb-wb .sidebar .icon-dock:before { content: "\f101"; } -.room-block .sidebar .icon-undock::before { +.room-block .sb-wb .sidebar .icon-undock::before { content: "\f100"; } -.room-block .sidebar #room-sidebar-tabs .tab-content { +.room-block .sb-wb .sidebar #room-sidebar-tabs .tab-content { height: calc(100% - 44px); } -.room-block .sidebar #room-sidebar-tabs .tab-content .tab-pane { +.room-block .sb-wb .sidebar #room-sidebar-tabs .tab-content .tab-pane { height: 100%; } -.room-block .sidebar.closed .tab-content .tab-pane { +.room-block .sb-wb .sidebar.closed .tab-content .tab-pane { display: none; } .om-icon.ulist-small { @@ -306,7 +313,7 @@ html[dir="rtl"] .room-block .sidebar { .right.mute-others.om-icon::before { content: '\f6a9'; } -.room-block .sidebar .user-list .user.entry .kick i { +.room-block .sb-wb .sidebar .user-list .user.entry .kick i { font-size: 1.5em; } .settings.om-icon::before { @@ -336,7 +343,7 @@ html[dir="rtl"] .room-block .sidebar { content: '\f131'; color: var(--warning); } -.room-block .sidebar .user-list .user.entry.current { +.room-block .sb-wb .sidebar .user-list .user.entry.current { font-weight: bold; background-color: var(--light); } @@ -364,18 +371,18 @@ html[dir="rtl"] .room-block .sidebar { .sip .button-row #sip-dialer-btn-erase { margin-left: 5px; } -.room-block .sidebar .tab.om-icon.big { +.room-block .sb-wb .sidebar .tab.om-icon.big { line-height: 30px; width: auto; max-width: 80px; position: relative; } -.room-block .sidebar .tab .badge { +.room-block .sb-wb .sidebar .tab .badge { position: absolute; bottom: 0; right: 2px; } -.room-block .sidebar .tab.om-icon.big .label { +.room-block .sb-wb .sidebar .tab.om-icon.big .label { max-width: 50px; display: inline-block; text-overflow: ellipsis; @@ -748,36 +755,35 @@ html[dir="rtl"] .room-block .sidebar { height: var(--vdialog-footer-height) !important; } @media screen and (max-width: 1280px) { - .room-block .sidebar .tab.om-icon.big { - max-width: 0px; + .room-block .sb-wb .sidebar .tab.om-icon.big { padding-right: 0; } - .room-block.big .sidebar .tab.om-icon.big { + .room-block.big .sb-wb .sidebar .tab.om-icon.big { max-width: 80px; } - .room-block .sidebar .user-list .user.name { + .room-block .sb-wb .sidebar .user-list .user.name { display: none; } - .room-block.big .sidebar .user-list .user.name { + .room-block.big .sb-wb .sidebar .user-list .user.name { display: block; } - .room-block .sidebar .file-tree .file.item .name - , .room-block .sidebar .file-tree .file.item .name span + .room-block .sb-wb .sidebar .file-tree .file.item .name + , .room-block .sb-wb .sidebar .file-tree .file.item .name span { width: 40px; } - .room-block.big .sidebar .file-tree .file.item .name - , .room-block.big .sidebar .file-tree .file.item .name span + .room-block.big .sb-wb .sidebar .file-tree .file.item .name + , .room-block.big .sb-wb .sidebar .file-tree .file.item .name span { width: 255px; } - .room-block .sidebar .file-tree .file.item .name span { + .room-block .sb-wb .sidebar .file-tree .file.item .name span { padding: 0; } - .room-block .sidebar .file-tree .file.item { + .room-block .sb-wb .sidebar .file-tree .file.item { width: 80px; } - .room-block.big .sidebar .file-tree .file.item { + .room-block.big .sb-wb .sidebar .file-tree .file.item { width: auto; } } diff --git a/openmeetings-web/src/main/webapp/css/raw-variables.css b/openmeetings-web/src/main/webapp/css/raw-variables.css index 35c8200..55b38dc 100644 --- a/openmeetings-web/src/main/webapp/css/raw-variables.css +++ b/openmeetings-web/src/main/webapp/css/raw-variables.css @@ -42,7 +42,7 @@ body.no-menu { } .main.room { --header-height: 0px; - --room-menu-height: 34px; + --room-menu-height: calc(22px + 1rem); --room-sidebar-width: 315px; --room-wb-tabs-height: 45px; --room-sidebar-header-height: 37px; @@ -52,6 +52,7 @@ body.no-menu { --vdialog-titlebar-height: 27px; --vdialog-footer-height: 0px; --wb-zoom-height: 33px; + --menu-height: 0px; } .main.room.INTERVIEW { --rec-btn-height: 40px; diff --git a/openmeetings-web/src/main/webapp/css/raw-wb.css b/openmeetings-web/src/main/webapp/css/raw-wb.css index 3942014..b49f668 100644 --- a/openmeetings-web/src/main/webapp/css/raw-wb.css +++ b/openmeetings-web/src/main/webapp/css/raw-wb.css @@ -1,34 +1,34 @@ /* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */ -.room-block .wb-block { +.room-block .sb-wb .wb-block { position: absolute; - height: calc(100% - var(--room-menu-height)); - width: calc(100% - var(--room-sidebar-width) - var(--chat-width) - 2 * var(--buffer-size)); - top: var(--room-menu-height); + height: 100%; + width: calc(100% - var(--room-sidebar-width) - var(--buffer-size)); + top: 0; left: calc(var(--room-sidebar-width) + var(--buffer-size)); } -html[dir="rtl"] .room-block .wb-block { +html[dir="rtl"] .room-block .sb-wb .wb-block { right: calc(var(--room-sidebar-width) + var(--buffer-size)); left: auto; } -.room-block .wb-block.droppable-hover { +.room-block .sb-wb .wb-block.droppable-hover { border: 0; } -.room-block .wb-block .wb-area { +.room-block .sb-wb .wb-block .wb-area { height: 100%; } -.room-block .wb-block.droppable-hover .wb-area { +.room-block .sb-wb .wb-block.droppable-hover .wb-area { visibility: hidden; height: 1px !important; } -.room-block .wb-block .wb-drop-area { +.room-block .sb-wb .wb-block .wb-drop-area { display: none; } -.room-block .wb-block.droppable-hover .wb-drop-area { +.room-block .sb-wb .wb-block.droppable-hover .wb-drop-area { display: block; height: inherit; background-position: center; } -.room-block .wb-block.droppable-hover .wb-drop-area::before { +.room-block .sb-wb .wb-block.droppable-hover .wb-drop-area::before { font-family: 'Font Awesome 5 Free'; font-weight: 400; font-size: 20em; @@ -38,14 +38,14 @@ html[dir="rtl"] .room-block .wb-block { text-align: center; color: var(--success); } -.room-block .wb-block .tabs { +.room-block .sb-wb .wb-block .tabs { height: calc(100% - var(--buffer-size)); } -.room-block .wb-block .tabs .wb-tabbar li a { +.room-block .sb-wb .wb-block .tabs .wb-tabbar li a { position: relative; padding-right: 25px; } -.room-block .wb-block .tabs .wb-tabbar li a button { +.room-block .sb-wb .wb-block .tabs .wb-tabbar li a button { width: 20px; height: 20px; padding: 0; @@ -53,106 +53,106 @@ html[dir="rtl"] .room-block .wb-block { top: 2px; right: 2px; } -.room-block .wb-block .tabs .wb-tab-content { +.room-block .sb-wb .wb-block .tabs .wb-tab-content { height: calc(100% - var(--room-wb-tabs-height)); position: relative; } -.room-block .wb-block .tabs .wb-tab-content .tab-pane { +.room-block .sb-wb .wb-block .tabs .wb-tab-content .tab-pane { height: 100%; } -.room-block .wb-block .tools { +.room-block .sb-wb .wb-block .tools { position: relative; display: inline-block; border: 0; } -.room-block .wb-block .tools .btn-group, .room-block .wb-block .tools .om-icon.big { +.room-block .sb-wb .wb-block .tools .btn-group, .room-block .sb-wb .wb-block .tools .om-icon.big { width: 35px; height: 35px; } -.room-block .wb-block .tools .om-icon.big { +.room-block .sb-wb .wb-block .tools .om-icon.big { vertical-align: top; background-size: 27px; margin: 0; background-position: 4px !important; position: relative; } -.room-block .wb-block .tools .om-icon.big.stub { +.room-block .sb-wb .wb-block .tools .om-icon.big.stub { width: 30px; height: 30px; } -.room-block .wb-block .tools .dropleft .dropdown-toggle::before { +.room-block .sb-wb .wb-block .tools .dropleft .dropdown-toggle::before { vertical-align: bottom; margin-right: 0; } -.room-block .wb-block .tools .dropdown-menu .om-icon.big { +.room-block .sb-wb .wb-block .tools .dropdown-menu .om-icon.big { float: none; } -.room-block .wb-block .tools .om-icon.big.active { +.room-block .sb-wb .wb-block .tools .om-icon.big.active { background-color: whitesmoke; } -.room-block .wb-block .tools .dropdown-menu .om-icon.big.active { +.room-block .sb-wb .wb-block .tools .dropdown-menu .om-icon.big.active { border: 1px solid #6b6565; } -.room-block .wb-block .tools .om-icon.big::before { +.room-block .sb-wb .wb-block .tools .om-icon.big::before { padding-left: 5px; } -.room-block .wb-block .tools .drawings .om-icon.big.stub::before -, .room-block .wb-block .tools .om-icon.big.math::before +.room-block .sb-wb .wb-block .tools .drawings .om-icon.big.stub::before +, .room-block .sb-wb .wb-block .tools .om-icon.big.math::before { font-size: 1.5em; } -.room-block .wb-block .tools .om-icon.big.paint::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.paint::before { content: '\f304' } -.room-block .wb-block .tools .om-icon.big.pointer::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.pointer::before { content: '\f245'; } -.room-block .wb-block .tools .om-icon.big.apointer::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.apointer::before { content: '\f3c5'; } -.room-block .wb-block .tools .om-icon.big.line::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.line::before { content: '\f715'; } -.room-block .wb-block .tools .om-icon.big.uline::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.uline::before { content: '\f591' } -.room-block .wb-block .tools .om-icon.big.rect::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.rect::before { content: '\f5cb' } -.room-block .wb-block .tools .om-icon.big.ellipse::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.ellipse::before { content: '\f111' } -.room-block .wb-block .tools .om-icon.big.text::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.text::before { content: 'T'; } -.room-block .wb-block .tools .om-icon.big.arrow::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.arrow::before { content: '\f30b'; } -.room-block .wb-block .tools .om-icon.big.eraser::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.eraser::before { content: '\f12d'; } -.room-block .wb-block .tools .om-icon.big.clear-all::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.clear-all::before { content: '\f2ed'; } -.room-block .wb-block .tools .om-icon.big.clear-slide::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.clear-slide::before { content: '\f1c3'; } -.room-block .wb-block .tools .om-icon.big.save::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.save::before { content: '\f0c7'; } -.room-block .wb-block .tools .om-icon.big.undo::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.undo::before { content: '\f0e2'; } -.room-block .wb-block .tools .om-icon.big.math::before { +.room-block .sb-wb .wb-block .tools .om-icon.big.math::before { content: '\f534'; } -.room-block .wb-block .tools .om-icon.big.textbox { +.room-block .sb-wb .wb-block .tools .om-icon.big.textbox { background-image: url(images/textbox.png); } -.room-block .wb-block .om-icon.big.next::before { +.room-block .sb-wb .wb-block .om-icon.big.next::before { content: '\f054'; } -.room-block .wb-block .om-icon.big.prev::before { +.room-block .sb-wb .wb-block .om-icon.big.prev::before { content: '\f053'; } .wb-tool-settings, .wb-formula { @@ -162,27 +162,27 @@ html[dir="rtl"] .room-block .wb-block { .wb-formula .latex-guide { padding: 0 10px; } -.room-block .wb-block .tools.vertical .dropdown-toggle { +.room-block .sb-wb .wb-block .tools.vertical .dropdown-toggle { width: 35px; height: 28px; } -.room-block .wb-block .tools.horisontal .dropdown-toggle { +.room-block .sb-wb .wb-block .tools.horisontal .dropdown-toggle { width: 35px; height: 23px; } -.room-block .wb-block .tools .dropdown-toggle { +.room-block .sb-wb .wb-block .tools .dropdown-toggle { position: relative; display: inline-block; } -.room-block .wb-block .tools.horisontal .dropdown-toggle .caret { +.room-block .sb-wb .wb-block .tools.horisontal .dropdown-toggle .caret { left: -1px; bottom: -12px; } -.room-block .wb-block .tools.vertical .dropdown-toggle .caret { +.room-block .sb-wb .wb-block .tools.vertical .dropdown-toggle .caret { left: -1px; bottom: -7px; } -.room-block .wb-block .tools .dropdown-toggle .caret { +.room-block .sb-wb .wb-block .tools .dropdown-toggle .caret { position: absolute; border-top: 8px solid transparent; border-left: 8px solid blue; @@ -296,25 +296,25 @@ html[dir="rtl"] .room-block .wb-block { .wb-tabbar .next { right: 2px; } -.room-block .wb-block .tabs .wb-tab-content .wb-with-zoom { +.room-block .sb-wb .wb-block .tabs .wb-tab-content .wb-with-zoom { width: calc(100% - 40px); height: 100%; display: inline-block; } -.room-block .wb-block .tabs .wb-tab-content .scroll-container { +.room-block .sb-wb .wb-block .tabs .wb-tab-content .scroll-container { overflow: auto; height: calc(100% - var(--wb-zoom-height)); } -.room-block .wb-block .tabs .wb-tab-content .wb-zoom-block { +.room-block .sb-wb .wb-block .tabs .wb-tab-content .wb-zoom-block { height: var(--wb-zoom-height); } -.room-block .wb-block .tabs .wb-tab-content .tools { +.room-block .sb-wb .wb-block .tabs .wb-tab-content .tools { width: 35px; height: 100%; display: inline-block; vertical-align: top; } -.room-block .wb-block .tabs .wb-tab-content .scroll-container .canvas-container { +.room-block .sb-wb .wb-block .tabs .wb-tab-content .scroll-container .canvas-container { margin-top: 5px; margin-left: 5px; border: 1px solid #888888;
