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

Style color-picker and add icons; move rules to mobilewizard.css

Browse source 
Change-Id: Icc8261c9ef138ea5ea4869296a156c0b860e983b
Reviewed-on: https://gerrit.libreoffice.org/81335
Reviewed-by: Szymon Kłos <szymon.klos@collabora.com>
Tested-by: Szymon Kłos <szymon.klos@collabora.com>
This commit is contained in:
Pedro 2019-10-22 15:55:44 +02:00 committed by Szymon Kłos
parent 30b0749051
commit 9e790e53fc
5 changed files with 111 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
loleaflet/css/mobilewizard.css
View file

@ -113,3 +113,104 @@ span#main-menu-btn-icon {
.layout.layout_head02a {
background: url('images/layout_head02a.svg') no-repeat center !important;
}
/*Color-picker*/
.color-sample-selected {
height: 32px !important;
width: 32px !important;
border: 1px solid #8A8A8A;
border-radius: 100px;
}
.no-color-selected {
text-align: center;
font-size: 30pt;
line-height: 32px;
font-weight: 300;
color: #ff0000 !important;
background-color: #fff !important;
}
.colors-container-selected-basic-color{
box-shadow: 0 2px 3px -2px #0b87e7;
border-radius: 4px;
}
.color-sample-small {
border: 2px solid #fff;
width: 28px;
height: 28px;
color: #f0f8ff;
text-align: center;
vertical-align: bottom;
display: table-cell;
}
.color-sample-big {
padding: 5px;
width: 118px;
height: 42px;
color: #f0f8ff;
text-align: right;
vertical-align: bottom;
display: table-cell;
box-shadow: 0px 0px 0px 1px #dddddd, 1px 1px 0 3px #ffffff;
}
.colors-container {
display: table;
}
.colors-container-no-color-row {
display: flex;
justify-content: space-between;
height: 50px;
}
.colors-container-basic-colors-row {
padding-bottom: 20px;
}
.colors-container-tints {
padding-bottom: 0px;
}
.no-color-control-label {
display:table-cell;
padding-left: 4px;
vertical-align: middle;
}
.no-color-control-mark {
color: #0b87e7 !important;
font-size: larger;
line-height: 0;
}
.no-color-control-icon {
display: table-cell;
height: 32px !important;
width: 32px !important;
text-align: center;
font-size: 26pt;
line-height: 28px;
font-weight: 300;
color: #ff0000 !important;
background: url(images/lc_square_rounded_unfilled.svg) no-repeat center;
}
.colors-container-basic-color-mark {
border: 4px solid transparent;
border-top: 5px solid #0b87e7;
margin-top: 2px;
position: absolute;
margin-left: 10px
}
.colors-container-tint-mark {
width: 20px;
height: 20px;
background-image: url('images/lc_color-picker-selected.svg');
margin-left: auto;
background-repeat: no-repeat;
background-size: auto;
}

96
loleaflet/css/toolbar.css
View file

@ -1262,99 +1262,3 @@ menu-entry-with-icon.padding-left + menu-entry-icon.width */
vertical-align: middle;
padding-left: 8px;
}
.color-sample-selected {
height: 32px !important;
width: 32px !important;
border: 1px solid #8A8A8A;
border-radius: 100px;
}
.no-color-selected {
text-align: center;
font-size: 30pt;
line-height: 32px;
font-weight: 300;
color: #ff0000 !important;
background-color: #fff !important;
}
.color-sample-small {
border-left: 3px solid #fff;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
width: 28px;
height: 28px;
color: #f0f8ff;
text-align: center;
vertical-align: bottom;
display: table-cell;
}
.color-sample-big {
border: 5px solid #f2f8f0;
padding: 5px;
width: 118px;
height: 42px;
color: #f0f8ff;
text-align: right;
vertical-align: bottom;
display: table-cell;
}
.colors-container {
display: table;
}
.colors-container-no-color-row {
display: flex;
justify-content: space-between;
height: 50px;
}
.colors-container-basic-colors-row {
padding-bottom: 20px;
}
.colors-container-tints {
padding-bottom: 0px;
}
.no-color-control-label {
display:table-cell;
padding-left: 30px;
vertical-align: middle;
}
.no-color-control-mark {
color: #0b87e7 !important;
font-size: larger;
line-height: 0;
}
.no-color-control-icon {
display: table-cell;
height: 28px !important;
width: 28px !important;
border: 1px solid #8A8A8A;
border-radius: 100px;
text-align: center;
font-size: 26pt;
line-height: 28px;
font-weight: 300;
color: #ff0000 !important;
background-color: #fff;
}
.colors-container-basic-color-mark {
/*TODO: please, Pedro set up this one as you suggested on MM*/
}
.colors-container-tint-mark {
width: 20px;
height: 20px;
background-image: url('images/icon-set-symbols1-check.svg');
margin-left: auto;
background-repeat: no-repeat;
background-size: auto;
}

8
loleaflet/images/lc_color-picker-selected.svg Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20" height="20" version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<g stroke-width=".83333">
<path d="m0 0h20v20h-20z" fill="none"/>
<path d="m10 1.6667c-4.6 0-8.3333 3.7333-8.3333 8.3333s3.7333 8.3333 8.3333 8.3333 8.3333-3.7333 8.3333-8.3333-3.7333-8.3333-8.3333-8.3333zm-2.2583 11.908-2.9917-2.9917c-0.325-0.325-0.325-0.85 0-1.175s0.85-0.325 1.175 0l2.4083 2.4 5.7333-5.7333c0.325-0.325 0.85-0.325 1.175 0s0.325 0.85 0 1.175l-6.325 6.325c-0.31667 0.325-0.85 0.325-1.175 0z" fill="#fff"/>
<path d="m7.7417 13.575-2.9917-2.9917c-0.325-0.325-0.325-0.85 0-1.175s0.85-0.325 1.175 0l2.4083 2.4 5.7333-5.7333c0.325-0.325 0.85-0.325 1.175 0s0.325 0.85 0 1.175l-6.325 6.325c-0.31667 0.325-0.85 0.325-1.175 0z" fill="#1a1a1a"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 811 B

1
loleaflet/images/lc_square_rounded_unfilled.svg Normal file
View file

@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#4d82b8"><path d="m4.875 2.5c-1.3157349 0-2.375 1.0592651-2.375 2.375v14.25c0 1.315734 1.0592651 2.375 2.375 2.375h14.25c1.315734 0 2.375-1.059266 2.375-2.375v-14.25c0-1.3157349-1.059266-2.375-2.375-2.375z"/><path d="m6.5 15.5 11-6.9999996" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 382 B

2
loleaflet/src/control/ColorPicker.js
View file

@ -96,7 +96,7 @@ L.ColorPicker = L.Class.extend({
_createNoColorControl: function () {
var icon = {
type: 'fixedtext',
text: '\\',
text: '',
style: 'no-color-control-icon'
};
var label = {type: 'fixedtext', style: 'no-color-control-label', text: _('No color')};