strepsirrhini/libreoffice-online
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add outline to color indicator for classic mode

Browse source 
- In classic mode, toolbar color indicators weren't visible when no
  text is selected. The reason is that color indicators didn't have
  border(outline) color.
- In fact, color indicators were just a box-shadow property. So,
  it was not possible(?) to add properties like border and
  border-radius.
- No need to use box-shadow property. A <div> tag can represent
  color indicators.
- Removed box-shadow property.
- Added <div> tag that has class="selected-color-classic".
- Added UI specifications for mobile. (#toolbar-down)

Signed-off-by: Bayram Çiçek <bayram.cicek@libreoffice.org>
Change-Id: I1b1b68fdc015fd3719d1c59ef7f782036a5934a5
This commit is contained in:
Bayram Çiçek 2022-08-10 14:55:34 +03:00 committed by pedropintosilva
parent 23715f72cd
commit 336f7c1664
4 changed files with 59 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
browser/css/device-mobile.css
View file

@ -517,6 +517,22 @@ nav:not(.spreadsheet-color-indicator) ~ #toolbar-wrapper #toolbar-up.w2ui-toolba
#toolbar-down table.w2ui-button .w2ui-tb-image {
margin: 5px 9px !important;
}
#toolbar-down table.w2ui-button .textcolor {
margin-bottom: 0px !important;
}
#toolbar-down table.w2ui-button .backcolor {
margin-bottom: 0px !important;
}
#toolbar-down table.w2ui-button .selected-color-classic {
height: 5px;
width: 26px;
margin: auto;
position: relative;
top: -6px;
border: 1px solid var(--color-border-dark);
border-radius: 7px;
outline: 1px solid var(--color-background-lighter);
}
.w2ui-toolbar .w2ui-break{
background-image: none;
background-color: #dae6f3;

9
browser/css/w2ui-1.5.rc1.css
View file

@ -2943,6 +2943,15 @@ button.w2ui-btn-small:focus:before {
border: 1px solid transparent;
background-color: transparent;
}
.w2ui-toolbar table.w2ui-button .selected-color-classic {
height: 7px;
width: 26px;
position: relative;
top: -6px;
border: 1px solid var(--color-border-dark);
border-radius: 7px;
outline: 1px solid var(--color-background-lighter);
}
.w2ui-toolbar table.w2ui-button .w2ui-tb-image {
width: 22px;
height: 16px;

31
browser/js/w2ui-1.5.rc1.js
View file

@ -6231,7 +6231,36 @@ w2utils.event = {
var img = '<td>&#160;</td>';
var text = item.text;
if (typeof text == 'function') text = text.call(this, item);
if (item.img) img = '<td><div class="w2ui-tb-image w2ui-icon '+ item.img +'"></div></td>';
if (item.img) {
// color indicator container for classic mode
var colorContainer = '<div class="selected-color-classic"></div>';
/**
* @css class="textcolor" used in:
* - Writer, Calc, Impress, Draw
* - as "Font Color"
*
* @css class="backcolor" used in:
* - Writer, Impress, Draw
* - as "Character Highlighting Color"
*
* @css class="backgroundcolor" used in:
* - Calc
* - as "Background Color"
* - (on mobile Calc uses "backcolor")
*
* It would be appropriate to place color indicator to below
* of those classes' container.
*
* We have to filter where to add the color indicator,
* otherwise it will be added to below of each toolbar
* elements.
*/
img = (item.img == 'textcolor' || item.img == 'backcolor' || item.img == 'backgroundcolor') ?
'<td><div class="w2ui-tb-image w2ui-icon '+ item.img +'"></div>' + colorContainer + '</td>' :
'<td><div class="w2ui-tb-image w2ui-icon '+ item.img +'"></div></td>';
}
if (item.icon) img = '<td><div class="w2ui-tb-image"><span class="'+ item.icon +'"></span></div></td>';
if (html === '') switch (item.type) {

7
browser/src/control/Control.Toolbar.js
View file

@ -858,7 +858,7 @@ function processStateChangedCommand(commandName, state) {
color = color.toString(16);
color = '#' + Array(7 - color.length).join('0') + color;
}
$('#tb_editbar_item_fontcolor .w2ui-tb-image').css('box-shadow', 'inset 0 -2px #ffffff, inset 0px -6px ' + color);
$('#tb_editbar_item_fontcolor table.w2ui-button .selected-color-classic').css('background-color', color);
$('#tb_editbar_item_fontcolor .w2ui-tb-caption').css('display', 'none');
div = L.DomUtil.get('fontcolorindicator');
@ -877,10 +877,11 @@ function processStateChangedCommand(commandName, state) {
color = '#' + Array(7 - color.length).join('0') + color;
}
//writer
$('#tb_editbar_item_backcolor .w2ui-tb-image').css('box-shadow', 'inset 0 -2px #ffffff, inset 0px -6px ' + color);
$('#tb_editbar_item_backcolor table.w2ui-button .selected-color-classic').css('background-color', color);
$('#tb_editbar_item_backcolor .w2ui-tb-caption').css('display', 'none');
//calc?
$('#tb_editbar_item_backgroundcolor .w2ui-tb-image').css('box-shadow', 'inset 0 -2px #ffffff, inset 0px -6px ' + color);
$('#tb_editbar_item_backgroundcolor table.w2ui-button .selected-color-classic').css('background-color', color);
$('#tb_editbar_item_backgroundcolor .w2ui-tb-caption').css('display', 'none');
div = L.DomUtil.get('backcolorindicator');