You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/03/30 16:41:22 UTC
[royale-asjs] branch feature/jewel-ui-set updated: close icon,
simplify other icons and more css changes
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/jewel-ui-set by this push:
new aa70805 close icon, simplify other icons and more css changes
aa70805 is described below
commit aa70805707dde8941ddb89bc6335a6d3e0c0388a
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Mar 30 18:41:16 2018 +0200
close icon, simplify other icons and more css changes
---
.../projects/Jewel/src/main/resources/defaults.css | 28 ++++++++++++++--------
.../apache/royale/jewel/beads/views/AlertView.as | 3 +++
.../projects/Jewel/src/main/sass/_global.sass | 1 +
.../Jewel/src/main/sass/components/_alert.sass | 22 +++++++++++------
.../src/main/sass/components/_controlbar.sass | 4 ++--
.../Jewel/src/main/sass/components/_titlebar.sass | 4 ++--
.../src/main/resources/assets/close-icon.svg | 19 +++++++++++++++
.../JewelTheme/src/main/resources/defaults.css | 8 +++----
.../src/main/sass/components/_checkbox.sass | 4 ++--
.../src/main/sass/components/_radiobutton.sass | 4 ++--
10 files changed, 68 insertions(+), 29 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index af7a52c..5bf4a03 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -33,15 +33,17 @@
.layout.horizontal.space {
display: flex;
justify-content: space-between;
+ align-items: flex-start;
}
.jewel.alert {
+ display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
- padding: 20px;
+ padding: 0;
min-width: 350px;
min-height: 200px;
max-width: 100%;
@@ -58,20 +60,26 @@
font-weight: bold;
}
.jewel.alert .jewel.titlebar .closebutton {
- min-width: 24px;
- min-height: 24px;
+ border: 0px;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ min-width: 16px;
+ min-height: 16px;
padding: 4px;
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 14 14' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-829, -278)'><g fill='#777777' transform='translate(825, 274)'><path d='M15.9921875,18 C15.8133104,18 11,13.05896 11,13.05896 C11,13.05896 6.20438984,18 6.0255127,18 C5.84663556,18 4,16.2295363 4,16.0506592 C4,15.871782 9.07348633,11 9.07348633,11 C9.07348633,11 4,6.21037128 4,6.03149414 C4,5.852617 5.84663556,4.05688477 6.0255127,4.05688477 C6.2043 [...]
+ background-repeat: no-repeat;
+ background-attachment: fixed;
}
.jewel.alert .Group {
- margin: 10px 0;
- padding: 0px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 60px 20px 20px 20px;
border: 1px solid rgba(0, 0, 0, 0.3);
width: 100%;
height: 100%;
overflow: auto;
}
.jewel.alert .Group .jewel.label {
- border: 1px solid rgba(0, 0, 0, 0.3);
font-size: 1.1em;
}
.jewel.alert .jewel.controlbar {
@@ -101,9 +109,9 @@ j|Alert {
}
}
.jewel.controlbar {
- padding: 6px;
background-color: transparent;
- height: 30px;
+ padding: 0px;
+ min-height: 34px;
}
j|ControlBar {
@@ -166,8 +174,8 @@ j|TextField {
.jewel.titlebar {
background-color: transparent;
- padding: 6px;
- min-height: 30px;
+ padding: 0px;
+ min-height: 34px;
}
j|TitleBar {
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
index f30f8a4..a351508 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/AlertView.as
@@ -37,6 +37,7 @@ package org.apache.royale.jewel.beads.views
import org.apache.royale.jewel.TextButton;
import org.apache.royale.jewel.TitleBar;
import org.apache.royale.jewel.ControlBar;
+ import org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween;
COMPILE::SWF
{
@@ -127,6 +128,7 @@ package org.apache.royale.jewel.beads.views
if (alertModel.title)
{
titleBar = new TitleBar();
+ titleBar.addBead(new HorizontalLayoutSpaceBetween());
titleBar.title = alertModel.title;
IParent(_strand).addElement(titleBar);
}
@@ -159,6 +161,7 @@ package org.apache.royale.jewel.beads.views
COMPILE::JS
{
controlBar = new ControlBar();
+ controlBar.addBead(new HorizontalLayoutSpaceBetween());
}
var flags:uint = alertModel.flags;
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index 3d6a380..451e01d 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -32,5 +32,6 @@
.layout.horizontal.space
display: flex
justify-content: space-between
+ align-items: flex-start
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
index ee07516..e2cf7d2 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
@@ -18,12 +18,13 @@
////////////////////////////////////////////////////////////////////////////////
.jewel.alert
+ display: block
position: fixed
top: 50%
left: 50%
transform: translate(-50%, -50%)
margin: 0
- padding: 20px
+ padding: 0
min-width: 350px
min-height: 200px
max-width: 100%
@@ -46,21 +47,28 @@
weight: bold
.closebutton
- //vertical-align: top
- min-width: 24px
- min-height: 24px
+ border: 0px
+ border: 1px solid rgba(0, 0, 0, .3)
+ min-width: 16px
+ min-height: 16px
padding: 4px
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 14 14' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-829, -278)'><g fill='#777777' transform='translate(825, 274)'><path d='M15.9921875,18 C15.8133104,18 11,13.05896 11,13.05896 C11,13.05896 6.20438984,18 6.0255127,18 C5.84663556,18 4,16.2295363 4,16.0506592 C4,15.871782 9.07348633,11 9.07348633,11 C9.07348633,11 4,6.21037128 4,6.03149414 C4,5.852617 5.84663556,4.05688477 6.0255127,4.056884 [...]
+ background-repeat: no-repeat
+ //background-size: 60%
+ //background-position: center
+ background-attachment: fixed
.Group
- margin: 10px 0
- padding: 0px
+ position: absolute
+ top: 0
+ left: 0
+ padding: 60px 20px 20px 20px
border: 1px solid rgba(0, 0, 0, .3)
width: 100%
height: 100%
overflow: auto
.jewel.label
- border: 1px solid rgba(0, 0, 0, .3)
font:
size: 1.1em
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass
index 5ca8797..55e78ff 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_controlbar.sass
@@ -18,9 +18,9 @@
////////////////////////////////////////////////////////////////////////////////
.jewel.controlbar
- padding: 6px
background-color: transparent
- height: 30px
+ padding: 0px
+ min-height: 34px
j|ControlBar
IBeadView: ClassReference("org.apache.royale.html.beads.GroupView")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass b/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
index 6c34aa5..1f3d6f1 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_titlebar.sass
@@ -19,8 +19,8 @@
.jewel.titlebar
background-color: transparent
- padding: 6px
- min-height: 30px
+ padding: 0px
+ min-height: 34px
j|TitleBar
IBeadModel: ClassReference("org.apache.royale.html.beads.models.TitleBarModel")
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/close-icon.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/close-icon.svg
new file mode 100644
index 0000000..1afc5aa
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/close-icon.svg
@@ -0,0 +1,19 @@
+<!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+-->
+<svg viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-829, -278)"><g transform="translate(825, 274)"><path d="M15.9921875,18 C15.8133104,18 11,13.05896 11,13.05896 C11,13.05896 6.20438984,18 6.0255127,18 C5.84663556,18 4,16.2295363 4,16.0506592 C4,15.871782 9.07348633,11 9.07348633,11 C9.07348633,11 4,6.21037128 4,6.03149414 C4,5.852617 5.84663556,4.05688477 6.0255127,4.05688477 C6.20438984,4.05688477 11,9.06176758 11,9.06176758 C11,9.06176758 [...]
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index b2e08e9..66c696c 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -211,7 +211,7 @@ div {
border-radius: 3px;
}
.jewel.checkbox input:checked, .jewel.checkbox input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><g><polygon fill='#3CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>"), #b3dffa;
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='#3CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #b3dffa;
background-repeat: no-repeat;
background-size: 90%;
background-position: center;
@@ -232,7 +232,7 @@ div {
}
.jewel.checkbox input[disabled]:checked {
border: 1px solid #c6c6c6;
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><g><polygon fill='lightgray' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>"), #F9F9F9;
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='lightgray' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), #F9F9F9;
background-size: 90%;
background-position: center;
background-repeat: no-repeat;
@@ -278,7 +278,7 @@ div {
border-radius: 50%;
}
.jewel.radiobutton input:checked, .jewel.radiobutton input:checked:active {
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><g><circle fill='#3CADF1' cx='11' cy='11' r='6'></circle></g></g></g></svg>"), #b3dffa;
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='#3CADF1' cx='11' cy='11' r='6'></circle></g></g></svg>"), #b3dffa;
background-repeat: no-repeat;
background-size: 60%;
background-position: center;
@@ -299,7 +299,7 @@ div {
}
.jewel.radiobutton input[disabled]:checked {
border: 1px solid #c6c6c6;
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><g><circle fill='lightgray' cx='11' cy='11' r='6'></circle></g></g></g></svg>"), #F9F9F9;
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='lightgray' cx='11' cy='11' r='6'></circle></g></g></svg>"), #F9F9F9;
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
index 5c29a1a..a52e126 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
@@ -61,7 +61,7 @@ $checkbox-label-font-size: 16px
border-radius: $checkbox-border-radius
&:checked, &:checked:active
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><g><polygon fill='#{$primary-color}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>"), lighten($primary-color, 25%)
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='#{$primary-color}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), lighten($primary-color, 25%)
background-repeat: no-repeat
background-size: 90%
background-position: center
@@ -89,7 +89,7 @@ $checkbox-label-font-size: 16px
&:checked
border: 1px solid darken($disabled-color, 20%)
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><g><polygon fill='#{darken($disabled-color, 15%)}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>"), $disabled-color
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760, 285)'><polygon fill='#{darken($disabled-color, 15%)}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></svg>"), $disabled-color
background-size: 90%
background-position: center
background-repeat: no-repeat
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
index 9aca4f6..a7b4ff0 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
@@ -61,7 +61,7 @@ $radiobutton-label-font-size: 16px
border-radius: $radiobutton-border-radius
&:checked, &:checked:active
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><g><circle fill='#{$primary-color}' cx='11' cy='11' r='6'></circle></g></g></g></svg>"), lighten($primary-color, 25%)
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='#{$primary-color}' cx='11' cy='11' r='6'></circle></g></g></svg>"), lighten($primary-color, 25%)
background-repeat: no-repeat
background-size: 60%
background-position: center
@@ -85,7 +85,7 @@ $radiobutton-label-font-size: 16px
&:checked
border: 1px solid darken($disabled-color, 20%)
- background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><g><circle fill='#{darken($disabled-color, 15%)}' cx='11' cy='11' r='6'></circle></g></g></g></svg>"), $disabled-color
+ background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, -350)'><g transform='translate(611, 345)'><circle fill='#{darken($disabled-color, 15%)}' cx='11' cy='11' r='6'></circle></g></g></svg>"), $disabled-color
background-size: 60%
background-position: center
background-repeat: no-repeat
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.