loleaflet/css/mobilewizard.css | 101 ++++++++++++++++++++++++
loleaflet/css/toolbar.css | 96 ----------------------
loleaflet/images/lc_color-picker-selected.svg | 8 +
loleaflet/images/lc_square_rounded_unfilled.svg | 1
loleaflet/src/control/ColorPicker.js | 2
5 files changed, 111 insertions(+), 97 deletions(-)
New commits:
commit 9e790e53fcfe62fb5e14a4a3bb86f3fb814c7999
Author: Pedro <pedro.si...@collabora.com>
AuthorDate: Tue Oct 22 15:55:44 2019 +0200
Commit: Szymon Kłos <szymon.k...@collabora.com>
CommitDate: Thu Oct 24 12:55:20 2019 +0200
Style color-picker and add icons; move rules to mobilewizard.css
Change-Id: Icc8261c9ef138ea5ea4869296a156c0b860e983b
Reviewed-on: https://gerrit.libreoffice.org/81335
Reviewed-by: Szymon Kłos <szymon.k...@collabora.com>
Tested-by: Szymon Kłos <szymon.k...@collabora.com>
diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css
index 5081c4476..16e29ebc1 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -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;
+}
diff --git a/loleaflet/css/toolbar.css b/loleaflet/css/toolbar.css
index 925c14406..517f826f1 100644
--- a/loleaflet/css/toolbar.css
+++ b/loleaflet/css/toolbar.css
@@ -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;
-}
diff --git a/loleaflet/images/lc_color-picker-selected.svg
b/loleaflet/images/lc_color-picker-selected.svg
new file mode 100644
index 000000000..559c961ca
--- /dev/null
+++ b/loleaflet/images/lc_color-picker-selected.svg
@@ -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>
diff --git a/loleaflet/images/lc_square_rounded_unfilled.svg
b/loleaflet/images/lc_square_rounded_unfilled.svg
new file mode 100644
index 000000000..9adbb8ad7
--- /dev/null
+++ b/loleaflet/images/lc_square_rounded_unfilled.svg
@@ -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>
\ No newline at end of file
diff --git a/loleaflet/src/control/ColorPicker.js
b/loleaflet/src/control/ColorPicker.js
index 7c230bf0b..a5aae9a9f 100644
--- a/loleaflet/src/control/ColorPicker.js
+++ b/loleaflet/src/control/ColorPicker.js
@@ -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')};
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
