This is an automated email from the ASF dual-hosted git repository.
solomax pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/openmeetings.git
The following commit(s) were added to refs/heads/master by this push:
new c62063e [OPENMEETINGS-2165] initial work on icons
c62063e is described below
commit c62063efc296f43a4296d85036e2ee6ee1afb9bb
Author: Maxim Solodovnik <[email protected]>
AuthorDate: Sun Mar 8 23:59:14 2020 +0700
[OPENMEETINGS-2165] initial work on icons
---
.../web/room/sidebar/icon/ClientIcon.java | 2 +-
.../apache/openmeetings/web/room/wb/WbPanel.html | 63 ++++++--------
.../openmeetings/web/room/wb/raw-wb-board.js | 36 ++++----
.../src/main/webapp/css/raw-general.css | 3 +-
openmeetings-web/src/main/webapp/css/raw-room.css | 34 ++++----
openmeetings-web/src/main/webapp/css/raw-tree.css | 5 +-
openmeetings-web/src/main/webapp/css/raw-wb.css | 99 +++++++++-------------
7 files changed, 109 insertions(+), 133 deletions(-)
diff --git
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/sidebar/icon/ClientIcon.java
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/sidebar/icon/ClientIcon.java
index 212e0a4..8e0368a 100644
---
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/sidebar/icon/ClientIcon.java
+++
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/sidebar/icon/ClientIcon.java
@@ -38,7 +38,7 @@ import org.apache.wicket.spring.injection.annot.SpringBean;
public abstract class ClientIcon extends WebMarkupContainer {
protected static final String FUNC_ACTION = "OmUtil.roomAction";
private static final long serialVersionUID = 1L;
- protected static final String ICON_CLASS = "ui-icon ";
+ protected static final String ICON_CLASS = "om-icon ";
protected static final String CLS_CLICKABLE = "clickable ";
private boolean self;
protected final String uid;
diff --git
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html
index 647a9f0..ca0c274 100644
---
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html
+++
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html
@@ -50,43 +50,32 @@
<i class="fas fa-times"></i>
<span class="sr-only"><wicket:message key="85"/></span>
</button>
- <div id="wb-area-texts" class="btn-group texts align-left">
- <a class="dropdown-toggle" data-toggle="dropdown">
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu om-left">
- <li>
- <div wicket:message="title:73"
class="ui-widget-header clickable om-icon big text"></div>
- <div wicket:message="title:82"
class="ui-widget-header clickable om-icon big textbox"></div>
- </li>
- </ul>
- </div>
- <div id="wb-area-drawings" class="btn-group drawings
align-left">
- <a class="dropdown-toggle" data-toggle="dropdown">
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu om-left">
- <li>
- <div wicket:message="title:74"
class="ui-widget-header clickable om-icon big paint"></div>
- <div wicket:message="title:75"
class="ui-widget-header clickable om-icon big line"></div>
- <div wicket:message="title:76"
class="ui-widget-header clickable om-icon big uline"></div>
- <div wicket:message="title:77"
class="ui-widget-header clickable om-icon big rect"></div>
- <div wicket:message="title:78"
class="ui-widget-header clickable om-icon big ellipse"></div>
- <div wicket:message="title:79"
class="ui-widget-header clickable om-icon big arrow"></div>
- <div
wicket:message="title:wb.tool.white-out" class="ui-widget-header clickable
om-icon big eraser"></div>
- </li>
- </ul>
- </div>
- <div id="wb-area-cliparts" class="btn-group cliparts
align-left">
- <a class="dropdown-toggle" data-toggle="dropdown"
wicket:message="title:1323">
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu om-left">
- <li>
- <div wicket:id="clipart"
class="ui-widget-header clickable om-icon big clipart"
-
data-image="./public/cliparts/"></div>
- </li>
- </ul>
+ <div id="wb-area-texts" class="btn-group texts dropleft">
+ <a class="dropdown-toggle" data-toggle="dropdown"></a>
+ <div class="dropdown-menu">
+ <div wicket:message="title:73" class="clickable
om-icon big text"></div>
+ <div wicket:message="title:82" class="clickable
om-icon big textbox"></div>
+ </div>
+ </div>
+ <div id="wb-area-drawings" class="btn-group drawings dropleft">
+ <a class="dropdown-toggle" data-toggle="dropdown"></a>
+ <div class="dropdown-menu">
+ <div wicket:message="title:74" class="clickable
om-icon big paint"></div>
+ <div wicket:message="title:75" class="clickable
om-icon big line"></div>
+ <div wicket:message="title:76" class="clickable
om-icon big uline"></div>
+ <div wicket:message="title:77" class="clickable
om-icon big rect"></div>
+ <div wicket:message="title:78" class="clickable
om-icon big ellipse">
+ <div/>
+ </div>
+ <div wicket:message="title:79" class="clickable
om-icon big arrow"></div>
+ <div wicket:message="title:wb.tool.white-out"
class="clickable om-icon big eraser"></div>
+ </div>
+ </div>
+ <div id="wb-area-cliparts" class="btn-group cliparts dropleft">
+ <a class="dropdown-toggle" data-toggle="dropdown"
wicket:message="title:1323"></a>
+ <div class="dropdown-menu">
+ <div wicket:id="clipart" class="clickable
om-icon big clipart" data-image="./public/cliparts/"></div>
+ </div>
</div>
<div id="wb-area" class="tab-pane" role="tabpanel">
<div class="scroll-container">
diff --git
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-wb-board.js
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-wb-board.js
index 3207bb8..46f525c 100644
---
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-wb-board.js
+++
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-wb-board.js
@@ -3,17 +3,17 @@ var Wb = function() {
const ACTIVE = 'active', BUMPER = 100, wb = {id: -1, name: ''},
canvases = []
, area = $('.room-block .wb-block .wb-area .tabs'), bar =
area.find('.wb-tabbar')
, extraProps = ['uid', 'fileId', 'fileType', 'count', 'slide',
'omType', '_src', 'formula'];
- let c, t, z, s, f, mode, slide = 0, width = 0, height = 0
+ let c, tools, z, s, f, mode, slide = 0, width = 0, height = 0
, zoom = 1., zoomMode = 'PAGE_WIDTH', role = null,
scrollTimeout = null;
function _getBtn(m) {
- return !!t ? t.find('.om-icon.' + (m || mode) + ':not(.stub)')
: null;
+ return !!tools ? tools.find('.om-icon.' + (m || mode) +
':not(.stub)') : null;
}
function _cleanActive() {
- !!t && t.find('.om-icon.' + ACTIVE).removeClass(ACTIVE);
+ !!tools && tools.find('.om-icon.' + ACTIVE).removeClass(ACTIVE);
}
function _setActive() {
- !!t && t.find('.om-icon.' + mode).addClass(ACTIVE);
+ !!tools && tools.find('.om-icon.' + mode).addClass(ACTIVE);
}
function __validBtn(btn) {
return !!btn && btn.length === 1
@@ -90,7 +90,7 @@ var Wb = function() {
_initGroupHandle(c);
}
function _initDrawings(sBtn) {
- const c = _initGroup('#wb-area-drawings', t.find('.texts'));
+ const c = _initGroup('#wb-area-drawings', tools.find('.texts'));
_initToolBtn('eraser', false, Whiteout(wb, s, sBtn));
_initToolBtn('paint', false, Paint(wb, s, sBtn));
_initToolBtn('line', false, Line(wb, s, sBtn));
@@ -102,7 +102,7 @@ var Wb = function() {
}
function _initCliparts(sBtn) {
const c = OmUtil.tmpl('#wb-area-cliparts');
- t.find('.drawings').after(c);
+ tools.find('.drawings').after(c);
c.find('.om-icon.clipart').each(function() {
const cur = $(this);
cur.css('background-image', 'url(' + cur.data('image')
+ ')')
@@ -251,8 +251,8 @@ var Wb = function() {
, containment: 'parent'
, scroll: false
});
- const clearAll = t.find('.om-icon.clear-all')
- , sBtn = t.find('.om-icon.settings');
+ const clearAll = tools.find('.om-icon.clear-all')
+ , sBtn = tools.find('.om-icon.settings');
let _firstToolItem = true;
switch (role) {
case PRESENTER:
@@ -311,19 +311,19 @@ var Wb = function() {
_initDrawings(sBtn);
_initToolBtn('math', _firstToolItem, TMath(wb,
s, sBtn));
_initCliparts(sBtn);
- t.find('.om-icon.settings').click(function() {
+
tools.find('.om-icon.settings').click(function() {
s.show();
});
- t.find('.om-icon.math').click(function() {
+ tools.find('.om-icon.math').click(function() {
f.show();
});
- t.find('.om-icon.clear-slide').click(function()
{
+
tools.find('.om-icon.clear-slide').click(function() {
OmUtil.confirmDlg('clear-slide-confirm', function() { OmUtil.wbAction({action:
'clearSlide', data: {wbId: wb.id, slide: slide}}); });
});
- t.find('.om-icon.save').click(function() {
+ tools.find('.om-icon.save').click(function() {
OmUtil.wbAction({action: 'save', data:
{wbId: wb.id}});
});
- t.find('.om-icon.undo').click(function() {
+ tools.find('.om-icon.undo').click(function() {
OmUtil.wbAction({action: 'undo', data:
{wbId: wb.id}});
});
f.find('.ui-dialog-titlebar-close').click(function() {
@@ -771,15 +771,15 @@ var Wb = function() {
const sc = wbEl.find('.scroll-container');
z = OmUtil.tmpl('#wb-zoom')
.attr('style', 'position: absolute; top: 0px; '
+ (Settings.isRtl ? 'right' : 'left') + ': 80px;');
- __safeRemove(t);
+ __safeRemove(tools);
__safeRemove(s);
__safeRemove(f);
if (role === NONE) {
__destroySettings();
- t = !!Room.getOptions().questions ?
OmUtil.tmpl('#wb-tools-readonly') : wbEl.find('invalid-wb-element');
+ tools = !!Room.getOptions().questions ?
OmUtil.tmpl('#wb-tools-readonly') : wbEl.find('invalid-wb-element');
sc.off('scroll', scrollHandler);
} else {
- t = OmUtil.tmpl('#wb-tools');
+ tools = OmUtil.tmpl('#wb-tools');
s = OmUtil.tmpl('#wb-tool-settings')
.attr('style', 'display: none; bottom:
100px; ' + (Settings.isRtl ? 'left' : 'right') + ': 100px;');
f = OmUtil.tmpl('#wb-formula')
@@ -787,10 +787,10 @@ var Wb = function() {
wbEl.append(s, f);
sc.on('scroll', scrollHandler);
}
- wbEl.find('.tools').append(t);
+ wbEl.find('.tools').append(tools);
wbEl.append(z);
showCurrentSlide();
- t = wbEl.find('.tools div'), s =
wbEl.find('.wb-tool-settings');
+ tools = wbEl.find('.tools div'), s =
wbEl.find('.wb-tool-settings');
wb.eachCanvas(function(canvas) {
setHandlers(canvas);
canvas.forEachObject(function(__o) {
diff --git a/openmeetings-web/src/main/webapp/css/raw-general.css
b/openmeetings-web/src/main/webapp/css/raw-general.css
index 596f291..04bd5eb 100644
--- a/openmeetings-web/src/main/webapp/css/raw-general.css
+++ b/openmeetings-web/src/main/webapp/css/raw-general.css
@@ -239,6 +239,7 @@ html, body {
}
.om-icon.big::before {
font-size: 2.2em;
+ line-height: 1.2em;
}
.add.om-icon::before {
content: '\f055';
@@ -553,7 +554,7 @@ select.messages.selector {
height: calc(100% - var(--nav-height) - var(--lbl-nav-height) -
var(--buffer-size));
}
.list-table thead {
- /* head takes the height it requires,
+ /* head takes the height it requires,
and it's not scaled when table is resized */
flex: 0 0 auto;
width: calc(100% - 1.0em);
diff --git a/openmeetings-web/src/main/webapp/css/raw-room.css
b/openmeetings-web/src/main/webapp/css/raw-room.css
index e77a05f..3f565f3 100644
--- a/openmeetings-web/src/main/webapp/css/raw-room.css
+++ b/openmeetings-web/src/main/webapp/css/raw-room.css
@@ -71,11 +71,13 @@ html[dir="rtl"] .room-block .sidebar {
padding-left: 5px;
height: var(--room-sidebar-header-height);
}
-#room-sidebar-tab-users .header .ui-icon {
- margin-top: 5px;
- margin-left: 5px;
- width: 32px;
- height: 32px;
+#room-sidebar-tab-users .header .om-icon {
+ width: 34px;
+ height: 34px;
+}
+#room-sidebar-tab-users .header .om-icon::before {
+ font-size: 2.2em;
+ line-height: 1.2em;
}
.room-block .sidebar .user-list {
overflow-y: auto;
@@ -230,24 +232,24 @@ html[dir="rtl"] .room-block .sidebar {
background-size: auto !important; /* IE */
background-size: initial !important;
}
-.settings.ui-icon, .settings.om-icon {
- background-image: url(images/settings.png);
+.settings.om-icon::before {
+ content: '\f013';
}
-.activity.cam.ui-icon {
- background-image: url(images/webcam_enable.png);
+.activity.cam.om-icon::before {
+ content: '\f03d';
}
-.activity.cam.enabled.ui-icon {
- background-image: url(images/webcam_disable.png);
+.activity.cam.enabled.om-icon::before {
+ content: '\f4e2';
}
-.activity.mic.ui-icon {
- background-image: url(images/microphone_enable.png);
+.activity.mic.om-icon::before {
+ content: '\f130';
}
.ui-icon.disabled, .om-icon.disabled {
filter: grayscale(100%);
pointer-events: none;
}
-.activity.mic.enabled.ui-icon {
- background-image: url(images/microphone_disable.png);
+.activity.mic.enabled.om-icon::before {
+ content: '\f131';
}
.room-block .sidebar .user-list .user .user.actions .ui-icon.bumper
, #room-sidebar-tab-users .header .ui-icon.bumper {
@@ -458,7 +460,7 @@ html[dir="rtl"] .room-block .sidebar {
}
.pod-area.max17, .pod-area.max25, .pod-area.max33 {
grid-template-columns: repeat(8, 1fr);
- grid-template-areas:
+ grid-template-areas:
"b01 b02 a a a a b03 b04"
"b05 b06 a a a a b07 b08"
"b09 b10 a a a a b11 b12"
diff --git a/openmeetings-web/src/main/webapp/css/raw-tree.css
b/openmeetings-web/src/main/webapp/css/raw-tree.css
index f29c5bb..cc88adc 100644
--- a/openmeetings-web/src/main/webapp/css/raw-tree.css
+++ b/openmeetings-web/src/main/webapp/css/raw-tree.css
@@ -29,7 +29,7 @@
line-height: 20px;
color: transparent;
height: var(--tree-header-height);
- padding-top: 5px;
+ padding-top: 3px;
overflow: hidden;
}
.trash-toolbar .om-confirm-dialog {
@@ -70,8 +70,7 @@
}
.trees .om-icon.big::before {
position: absolute;
- left: -3px;
- top: -10px;
+ left: 3px;
}
.trees .om-icon span {
white-space: nowrap;
diff --git a/openmeetings-web/src/main/webapp/css/raw-wb.css
b/openmeetings-web/src/main/webapp/css/raw-wb.css
index afd5d5c..7db582a 100644
--- a/openmeetings-web/src/main/webapp/css/raw-wb.css
+++ b/openmeetings-web/src/main/webapp/css/raw-wb.css
@@ -69,35 +69,6 @@ html[dir="rtl"] .room-block .wb-block {
display: inline-block;
border: 0;
}
-.room-block .wb-block .tools .bumper {
- float: left;
- display: inline-block;
- background: repeating-linear-gradient(-45deg, transparent, transparent
3px, gray 3px, gray 5px);
-}
-.room-block .wb-block .tools.vertical .bumper {
- width: 35px;
- height: 9px;
-}
-.room-block .wb-block .tools.horisontal .bumper {
- width: 9px;
- height: 35px;
-}
-.room-block .wb-block .tools.vertical {
- width: 35px;
- height: 394px;
-}
-.room-block .wb-block .tools.readonly.vertical {
- width: 35px;
- height: 43px;
-}
-.room-block .wb-block .tools.horisontal {
- width: 394px;
- height: 35px;
-}
-.room-block .wb-block .tools.readonly.horisontal {
- width: 44px;
- height: 35px;
-}
.room-block .wb-block .tools .om-icon.big {
float: left;
vertical-align: top;
@@ -106,6 +77,7 @@ html[dir="rtl"] .room-block .wb-block {
background-size: 27px;
margin: 0;
background-position: 4px !important;
+ position: relative;
}
.room-block .wb-block .tools .om-icon.big.settings {
border: 0 !important;
@@ -119,50 +91,63 @@ html[dir="rtl"] .room-block .wb-block {
.room-block .wb-block .tools .dropdown-menu .om-icon.big.active {
border: 1px solid #6b6565;
}
-.room-block .wb-block .tools .om-icon.big.paint {
- background-image: url(images/paintbrush.png);
+.room-block .wb-block .tools .om-icon.big::before {
+ padding-left: 5px;
+}
+.room-block .wb-block .tools .om-icon.big.paint::before {
+ content: '\f304'
}
-.room-block .wb-block .tools .om-icon.big.pointer {
- background-image: url(images/pointer.png);
+.room-block .wb-block .tools .om-icon.big.pointer::before {
+ content: '\f245';
}
.room-block .wb-block .tools .om-icon.big.apointer {
background-image: url(images/wbpointer.png);
}
-.room-block .wb-block .tools .om-icon.big.line {
- background-image: url(images/line.png);
+.room-block .wb-block .tools .om-icon.big.line::before {
+ content: '/';
+ font-weight: 900;
+ font-size: 2.8em;
+ line-height: 1em;
+ position: absolute;
+ right: 10px;
}
-.room-block .wb-block .tools .om-icon.big.uline {
- background-image: url(images/uline.png);
+.room-block .wb-block .tools .om-icon.big.uline::before {
+ content: '\f591'
}
-.room-block .wb-block .tools .om-icon.big.rect {
- background-image: url(images/rectangle.png);
+.room-block .wb-block .tools .om-icon.big.rect::before {
+ content: '\f5cb'
}
-.room-block .wb-block .tools .om-icon.big.ellipse {
- background-image: url(images/ellipse.png);
+.room-block .wb-block .tools .om-icon.big.ellipse div {
+ width: 30px;
+ height: 30px;
+ display: inline-block;
+ border-radius: 50%;
+ margin: 2px;
+ background-color: var(--secondary);
}
-.room-block .wb-block .tools .om-icon.big.text {
- background-image: url(images/font.png);
+.room-block .wb-block .tools .om-icon.big.text::before {
+ content: 'T';
}
-.room-block .wb-block .tools .om-icon.big.arrow {
- background-image: url(images/arrow.png);
+.room-block .wb-block .tools .om-icon.big.arrow::before {
+ content: '\f30b';
}
-.room-block .wb-block .tools .om-icon.big.eraser {
- background-image: url(images/clear-icon.png);
+.room-block .wb-block .tools .om-icon.big.eraser::before {
+ content: '\f12d';
}
-.room-block .wb-block .tools .om-icon.big.clear-all {
- background-image: url(images/cancel.png);
+.room-block .wb-block .tools .om-icon.big.clear-all::before {
+ content: '\f2ed';
}
-.room-block .wb-block .tools .om-icon.big.clear-slide {
- background-image: url(images/page_delete.png);
+.room-block .wb-block .tools .om-icon.big.clear-slide::before {
+ content: '\f1c3';
}
-.room-block .wb-block .tools .om-icon.big.save {
- background-image: url(images/file_save_as.png);
+.room-block .wb-block .tools .om-icon.big.save::before {
+ content: '\f0c7';
}
-.room-block .wb-block .tools .om-icon.big.undo {
- background-image: url(images/arrow_undo.png);
+.room-block .wb-block .tools .om-icon.big.undo::before {
+ content: '\f0e2';
}
-.room-block .wb-block .tools .om-icon.big.math {
- background-image: url(images/math.png);
+.room-block .wb-block .tools .om-icon.big.math::before {
+ content: '\f534';
}
.room-block .wb-block .tools .om-icon.big.textbox {
background-image: url(images/textbox.png);
