You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by hi...@apache.org on 2021/12/08 22:35:27 UTC
[royale-asjs] branch develop updated (69be14a -> 782bbf5)
This is an automated email from the ASF dual-hosted git repository.
hiedra pushed a change to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git.
from 69be14a Cleanup incomplete example TriStateCheckBox in TDJ
new 59aae67 New Jewel ReadOnly bead
new b17481b Added emphasized and secondary sass settings for Jewel checkbox / switch / TriStateCheckBox
new 782bbf5 Added Jewel TriStateCheckBox example in TDJ
The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../src/main/resources/jewel-example-styles.css | 21 ++
.../TourDeJewel/src/main/royale/MainContent.mxml | 1 +
.../main/royale/TriStateCheckBoxPlayGround.mxml | 307 +++++++++++++++++++++
.../src/main/royale/models/MainNavigationModel.as | 1 +
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../beads/controls/{Disabled.as => ReadOnly.as} | 44 +--
.../main/sass/components-emphasized/_checkbox.sass | 131 +++++++++
.../main/sass/components-secondary/_checkbox.sass | 130 +++++++++
8 files changed, 615 insertions(+), 21 deletions(-)
create mode 100644 examples/jewel/TourDeJewel/src/main/royale/TriStateCheckBoxPlayGround.mxml
copy frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/{Disabled.as => ReadOnly.as} (72%)
[royale-asjs] 01/03: New Jewel ReadOnly bead
Posted by hi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hiedra pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 59aae6755c9a7181bdc021d669ef8ccf54feea88
Author: Maria José Esteve <hi...@local.iest.com>
AuthorDate: Wed Dec 8 23:29:02 2021 +0100
New Jewel ReadOnly bead
---
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../apache/royale/jewel/beads/controls/ReadOnly.as | 145 +++++++++++++++++++++
2 files changed, 146 insertions(+)
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 582a0da..5ec114b 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -189,6 +189,7 @@
<component id="ResponsiveSize" class="org.apache.royale.jewel.beads.controls.ResponsiveSize"/>
<component id="TextAlign" class="org.apache.royale.jewel.beads.controls.TextAlign"/>
<component id="ResponsiveVisibility" class="org.apache.royale.jewel.beads.layouts.ResponsiveVisibility"/>
+ <component id="ReadOnly" class="org.apache.royale.jewel.beads.controls.ReadOnly"/>
<component id="ResponsiveDrawer" class="org.apache.royale.jewel.beads.controls.drawer.ResponsiveDrawer"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/ReadOnly.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/ReadOnly.as
new file mode 100644
index 0000000..d64ef21
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/ReadOnly.as
@@ -0,0 +1,145 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.controls
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.core.HTMLElementWrapper;
+ import org.apache.royale.core.IUIBase;
+ }
+ import org.apache.royale.core.DispatcherBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.ValueEvent;
+ import org.apache.royale.utils.sendStrandEvent;
+
+ /**
+ * The ReadOnly bead class is a specialty bead that can be used to read-only a Jewel control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class ReadOnly extends DispatcherBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.8
+ */
+ public function ReadOnly()
+ {
+ }
+
+ COMPILE::JS
+ protected var lastElementTabVal:String = null;
+
+ protected var initialized:Boolean = false;
+
+ private var _readonly:Boolean = true;
+ /**
+ * A boolean flag to lock or unlock the host control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Bindable]
+ public function get readOnly():Boolean
+ {
+ return _readonly;
+ }
+ public function set readOnly(value:Boolean):void
+ {
+ if(value != _readonly)
+ {
+ _readonly = value;
+ COMPILE::JS
+ {
+ if(_strand)
+ {
+ updateHost();
+ sendStrandEvent(_strand, new ValueEvent("readOnlyChange", readOnly));
+ }
+ }
+ }
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion HTMLInputElement
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ updateHost();
+ }
+
+ protected function updateHost():void
+ {
+ COMPILE::JS
+ {
+ var elem:HTMLElement = (_strand as HTMLElementWrapper).element;
+ var pos:HTMLElement = (_strand as IUIBase).positioner;
+
+ if(!initialized){
+ initialized = true;
+ lastElementTabVal = elem.getAttribute("tabindex");
+ }
+
+ if(_readonly) {
+ setReadOnlyAndTabIndex(pos, true);
+ setReadOnlyAndTabIndex(elem);
+ } else {
+ removeReadOnlyAndTabIndex(pos, true);
+ removeReadOnlyAndTabIndex(elem, false, lastElementTabVal);
+ }
+ }
+ }
+
+ COMPILE::JS
+ protected function setReadOnlyAndTabIndex(o:HTMLElement, positioner:Boolean = false):void
+ {
+ o.setAttribute("read-only", "");
+ o.style.pointerEvents = 'none';
+ //o.style.cursor = 'none';
+ if(!positioner)
+ o.tabIndex = -1;
+ }
+
+ COMPILE::JS
+ protected function removeReadOnlyAndTabIndex(o:*, positioner:Boolean = false, lastTabVal:String = null):void
+ {
+ o.removeAttribute("read-only");
+ o.style.pointerEvents = '';
+ o.style.cursor = 'auto';
+ if(!positioner)
+ o.tabIndex = (lastTabVal == null) ? null : lastTabVal;
+ }
+ }
+}
[royale-asjs] 03/03: Added Jewel TriStateCheckBox example in TDJ
Posted by hi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hiedra pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 782bbf58518422540fcc05562aecc7efec329c88
Author: Maria José Esteve <hi...@local.iest.com>
AuthorDate: Wed Dec 8 23:34:08 2021 +0100
Added Jewel TriStateCheckBox example in TDJ
---
.../src/main/resources/jewel-example-styles.css | 21 ++
.../TourDeJewel/src/main/royale/MainContent.mxml | 1 +
.../main/royale/TriStateCheckBoxPlayGround.mxml | 307 +++++++++++++++++++++
.../src/main/royale/models/MainNavigationModel.as | 1 +
4 files changed, 330 insertions(+)
diff --git a/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css b/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
index a15a1cb..3d51629 100644
--- a/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
+++ b/examples/jewel/TourDeJewel/src/main/resources/jewel-example-styles.css
@@ -132,3 +132,24 @@ j|IconButtonBar
IItemRenderer: ClassReference("itemRenderers.NavigationGroupExampleItemRenderer");
}
+.groupoptions {
+ background: white;
+ border-radius: 0.25rem;
+ border: 1px solid #d2dadf;
+ font-size: 1em;
+ font-weight: 400;
+ min-height: 52px;
+ min-width: 120px;
+ padding: 0;
+ position: relative;
+}
+
+.groupoptions-header {
+ padding: 12px 20px;
+}
+
+.groupoptions-content {
+ border-top: 1px solid #d2dadf;
+ margin-top: 0 !important;
+ padding: 12px 20px;
+}
\ No newline at end of file
diff --git a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
index 1d19544..21c7d62 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
+++ b/examples/jewel/TourDeJewel/src/main/royale/MainContent.mxml
@@ -362,6 +362,7 @@ limitations under the License.
<local:DateComponentsPlayGround name="datecomponents_panel"/>
<local:ComboBoxPlayGround name="combobox_panel"/>
<local:CheckBoxPlayGround name="checkbox_panel"/>
+ <local:TriStateCheckBoxPlayGround name="tristatecheckbox_panel"/>
<local:MiscelaneaPlayGound name="miscelanea_panel"/>
<local:HeadingsAndText name="text_panel"/>
<local:LabelPlayGround name="label_panel"/>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/TriStateCheckBoxPlayGround.mxml b/examples/jewel/TourDeJewel/src/main/royale/TriStateCheckBoxPlayGround.mxml
new file mode 100644
index 0000000..28e7ec6
--- /dev/null
+++ b/examples/jewel/TourDeJewel/src/main/royale/TriStateCheckBoxPlayGround.mxml
@@ -0,0 +1,307 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+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.
+
+-->
+<c:ExampleAndSourceCodeTabbedSectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:j="library://ns.apache.org/royale/jewel"
+ xmlns:html="library://ns.apache.org/royale/html"
+ xmlns:js="library://ns.apache.org/royale/basic"
+ xmlns:c="components.*" sourceCodeUrl="TriStateCheckBoxPlayGround.mxml">
+
+
+ <fx:Script>
+ <![CDATA[
+
+ [Bindable]
+ private var trcGroupText:String = "None";
+ private function computeTrcGroup():void
+ {
+ var numcheck:int = 0;
+
+ numcheck += trcOp1.selected?1:0;
+ numcheck += trcOp2.selected?1:0;
+ numcheck += trcOp3.selected?1:0;
+
+ if(numcheck == 3)
+ {
+ trcGroup.selected = true;
+ trcGroupText = "All";
+ }
+ else if(numcheck == 0)
+ {
+ trcGroup.selected = false;
+ trcGroupText = "None";
+ }
+ else
+ {
+ trcGroup.indeterminate = true;
+ trcGroupText = "Some";
+ }
+
+ }
+
+ ]]>
+ </fx:Script>
+
+ <c:beads>
+ <js:ViewDataBinding/>
+ </c:beads>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:beads>
+ <js:Paddings paddingTop="0" paddingLeft="50" paddingRight="50" paddingBottom="50"/>
+ </j:beads>
+
+ <c:ExampleHeader title="Jewel TriStateCheckBox">
+ <c:description>
+ <![CDATA[<strong>Jewel TriStateCheckBox</strong> examples.]]>
+ </c:description>
+ </c:ExampleHeader>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <j:CardHeader>
+ <j:CardTitle text="States" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:Label multiline="true">
+ <j:html><![CDATA[<p>A <strong>TriStateCheckBox</strong> can have the following six states.</p>]]></j:html>
+ </j:Label>
+
+ <j:TriStateCheckBox text="Not Checked (with ReadOnly bead)"/>
+
+ <j:TriStateCheckBox text="Checked" selected="true"/>
+
+ <j:TriStateCheckBox text="indeterminate" indeterminate="true"/>
+
+ <j:TriStateCheckBox text="Disabled">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:TriStateCheckBox>
+
+ <j:TriStateCheckBox text="Checked And Disabled" selected="true">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:TriStateCheckBox>
+
+ <j:TriStateCheckBox text="indeterminate And Disabled" indeterminate="true">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:TriStateCheckBox>
+
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <j:CardHeader>
+ <j:CardTitle text="States - Rejected Version" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:Label multiline="true">
+ <j:html><![CDATA[<p>By setting the property <strong>"rejectedVersion=true"</strong> the indeterminate status symbol appears as a "minus sign".</p>]]></j:html>
+ </j:Label>
+
+ <j:TriStateCheckBox rejectedVersion="true" text="Not Checked"/>
+
+ <j:TriStateCheckBox rejectedVersion="true" text="Checked" selected="true"/>
+
+ <j:TriStateCheckBox rejectedVersion="true" text="Rejected" indeterminate="true"/>
+
+ <j:TriStateCheckBox rejectedVersion="true" text="Disabled">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:TriStateCheckBox>
+
+ <j:TriStateCheckBox rejectedVersion="true" text="Checked And Disabled" selected="true">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:TriStateCheckBox>
+
+ <j:TriStateCheckBox rejectedVersion="true" text="Rejected And Disabled" indeterminate="true">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:TriStateCheckBox>
+
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+
+ <j:CardHeader itemsVerticalAlign="itemsCenter" gap="10">
+ <j:CardTitle text="Setting the state by code" className="primary-normal"/>
+ </j:CardHeader>
+
+ <j:CardPrimaryContent>
+
+ <j:Label multiline="true">
+ <j:html><![CDATA[<p>Select one or more options.</p>]]></j:html>
+ </j:Label>
+
+ <j:VGroup width="230" gap="5" className="groupoptions">
+
+ <j:HGroup itemsVerticalAlign="itemsCenter" percentWidth="100" className="groupoptions-header primary-normal">
+ <j:TriStateCheckBox localId="trcGroup" text="{trcGroupText}" emphasis="secondary">
+ <j:beads>
+ <j:ReadOnly />
+ </j:beads>
+ </j:TriStateCheckBox>
+ </j:HGroup>
+
+ <j:VGroup percentWidth="100" gap="5" className="groupoptions-content">
+ <j:CheckBox localId="trcOp1" text="Op 1" change="computeTrcGroup()"/>
+ <j:CheckBox localId="trcOp2" text="Op 2" change="computeTrcGroup()"/>
+ <j:CheckBox localId="trcOp3" text="Op 3" change="computeTrcGroup()"/>
+ </j:VGroup>
+ </j:VGroup>
+
+ <j:Label multiline="true">
+ <j:html><![CDATA[<p>Set the desired state.</p>]]></j:html>
+ </j:Label>
+
+ <j:HGroup percentWidth="100" gap="3">
+ <j:Button text="Set unchecked" click="trcSetManual.selected=false;"/>
+ <j:Button text="Set checked" click="trcSetManual.selected=true;"/>
+ <j:Button text="Set rejected" click="trcSetManual.indeterminate=true;"/>
+ </j:HGroup>
+
+ <j:TriStateCheckBox localId="trcSetManual" rejectedVersion="true"/>
+
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2" tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <j:CardHeader>
+ <j:CardTitle text="Beads" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:Label multiline="true">
+ <j:html><![CDATA[<p>The <strong>TriStateCheckBoxLabelState</strong> bead allows us to display a different Text for each state.</p>]]></j:html>
+ </j:Label>
+
+ <j:TriStateCheckBox indeterminate="true">
+ <j:beads>
+ <j:TriStateCheckBoxLabelState checkedText="Checked..." uncheckedText="Unchecked..." indeterminateText="Indeterminate..."/>
+ </j:beads>
+ </j:TriStateCheckBox>
+
+ <j:TriStateCheckBox rejectedVersion="true" indeterminate="true">
+ <j:beads>
+ <j:TriStateCheckBoxLabelState checkedText="Checked..." uncheckedText="Unchecked..." indeterminateText="Rejected..."/>
+ </j:beads>
+ </j:TriStateCheckBox>
+
+ <j:Label multiline="true">
+ <j:html><![CDATA[<p>The <strong>TriStateCheckBoxStatesValues</strong> bead allows to set a custom value for each state. <p>By default, the "unchecked" state is assigned a value of "0", the "checked" state a value of "1" and the "indeterminate" state a value of "-1".</p>]]></j:html>
+ </j:Label>
+
+ <j:HGroup percentWidth="100" itemsVerticalAlign="itemsCenter" gap="5">
+ <j:Label text="Default: " width="100"/>
+ <j:TriStateCheckBox localId="trCh" text="{trCh.state}"/>
+ </j:HGroup>
+ <j:HGroup percentWidth="100" itemsVerticalAlign="itemsCenter" gap="5">
+ <j:Label text="Custom: " width="100"/>
+ <j:TriStateCheckBox localId="trCh1" text="{trCh1.state}" >
+ <j:beads>
+ <j:TriStateCheckBoxStatesValues checkedValue="valChecked" uncheckedValue="valUnchecked" indeterminateValue="valIndeterminate"/>
+ </j:beads>
+ </j:TriStateCheckBox>
+ </j:HGroup>
+
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <j:CardHeader>
+ <j:CardTitle text="InputButton Size" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+
+ <j:Label multiline="true">
+ <j:html><![CDATA[<p>The <strong>InputButtonSize</strong> bead allow to change dimensions of the check.</p><p>Left: Default version, Right: Reject version</p>]]></j:html>
+ </j:Label>
+
+ <j:HGroup percentWidth="100" >
+ <j:VGroup percentWidth="50" gap="3">
+ <j:TriStateCheckBox text="No size"/>
+
+ <j:TriStateCheckBox text="width and height to 60">
+ <j:beads>
+ <j:InputButtonSize width="60" height="60"/>
+ </j:beads>
+ </j:TriStateCheckBox>
+
+ <j:TriStateCheckBox text="Only width to 45" selected="true">
+ <j:beads>
+ <j:InputButtonSize width="45"/>
+ </j:beads>
+ </j:TriStateCheckBox>
+
+ <j:TriStateCheckBox text="Only height to 35 and disabled" indeterminate="true">
+ <j:beads>
+ <j:Disabled localId="opt3disable" disabled="true"/>
+ <j:InputButtonSize height="35"/>
+ </j:beads>
+ </j:TriStateCheckBox>
+ </j:VGroup>
+
+ <j:VGroup percentWidth="50" gap="3">
+ <j:TriStateCheckBox rejectedVersion="true" text="No size"/>
+
+ <j:TriStateCheckBox rejectedVersion="true" text="width and height to 60">
+ <j:beads>
+ <j:InputButtonSize width="60" height="60"/>
+ </j:beads>
+ </j:TriStateCheckBox>
+
+ <j:TriStateCheckBox rejectedVersion="true" text="Only width to 45" selected="true">
+ <j:beads>
+ <j:InputButtonSize width="45"/>
+ </j:beads>
+ </j:TriStateCheckBox>
+
+ <j:TriStateCheckBox rejectedVersion="true" text="Only height to 35 and disabled" indeterminate="true">
+ <j:beads>
+ <j:Disabled disabled="true"/>
+ <j:InputButtonSize height="35"/>
+ </j:beads>
+ </j:TriStateCheckBox>
+ </j:VGroup>
+ </j:HGroup>
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
+</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/examples/jewel/TourDeJewel/src/main/royale/models/MainNavigationModel.as b/examples/jewel/TourDeJewel/src/main/royale/models/MainNavigationModel.as
index 58fee31..8db37d0 100644
--- a/examples/jewel/TourDeJewel/src/main/royale/models/MainNavigationModel.as
+++ b/examples/jewel/TourDeJewel/src/main/royale/models/MainNavigationModel.as
@@ -28,6 +28,7 @@ package models
new NavigationLinkVO("Alert", "alert_panel", MaterialIconType.WEB_ASSET),
new NavigationLinkVO("Button", "button_panel", MaterialIconType.CROP_7_5),
new NavigationLinkVO("CheckBox", "checkbox_panel", MaterialIconType.CHECK_BOX),
+ new NavigationLinkVO("TriStateCheckBox", "tristatecheckbox_panel", MaterialIconType.INDETERMINATE_CHECK_BOX),
new NavigationLinkVO("ComboBox", "combobox_panel", MaterialIconType.CREDIT_CARD),
new NavigationLinkVO("Date Components", "datecomponents_panel", MaterialIconType.DATE_RANGE),
new NavigationLinkVO("DropDownList", "dropdownlist_panel", MaterialIconType.CREDIT_CARD),
[royale-asjs] 02/03: Added emphasized and secondary sass settings for Jewel checkbox / switch / TriStateCheckBox
Posted by hi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hiedra pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit b17481b8ab58eec9a59c2394efbffc10cb3de265
Author: Maria José Esteve <hi...@local.iest.com>
AuthorDate: Wed Dec 8 23:33:02 2021 +0100
Added emphasized and secondary sass settings for Jewel checkbox / switch / TriStateCheckBox
---
.../main/sass/components-emphasized/_checkbox.sass | 131 +++++++++++++++++++++
.../main/sass/components-secondary/_checkbox.sass | 130 ++++++++++++++++++++
2 files changed, 261 insertions(+)
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_checkbox.sass
index 9b0ac58..77399f4 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-emphasized/_checkbox.sass
@@ -20,3 +20,134 @@
// Jewel CheckBox
// CheckBox variables
+$checkbox-emphasized-svg-checked: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><polygon fill='#{$emphasized-color}' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/></svg>") no-repeat center center
+$checkbox-emphasized-svg-checked-disabled: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><polygon fill='#{darken($disabled-color, 15%)}' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/></svg>") no-repeat center center
+
+$checkbox-emphasized-svg-indeterminate: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><rect stroke-width='0' stroke='#FFFFFF' height='12' width='12' y='5' x='5' fill='#{$emphasized-color}' /></svg>") no-repeat center center
+$checkbox-emphasized-svg-indeterminate-disabled: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><rect stroke-width='0' stroke='#FFFFFF' height='12' width='12' y='5' x='5' fill='#{darken($disabled-color, 15%)}' /></svg>") no-repeat center center
+
+$checkbox-emphasized-svg-rejected: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><line stroke-width='4' stroke='#{$emphasized-color}' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /></svg>") no-repeat center center
+$checkbox-emphasized-svg-rejected-disabled: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><line stroke-width='4' stroke='#{darken($disabled-color, 15%)}' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /></svg>") no-repeat center center
+
+.jewel.checkbox.emphasized
+
+ // -- INPUT
+ input
+
+ + span::before
+ @if $flat
+ background: lighten($default-color, 15%)
+ border: 1px solid $default-color
+ @else
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ border: 1px solid darken($default-color, 15%)
+
+ + span::after
+ background: $checkbox-emphasized-svg-checked
+
+ &:checked + span::after, &:checked:active + span::after
+ background: $checkbox-emphasized-svg-checked
+
+ &:indeterminate + span::after, &:indeterminate:active + span::after
+ background: $checkbox-emphasized-svg-indeterminate
+
+ &:focus + span::before, &:checked:focus + span::before, &:checked:active:focus + span::before, &:indeterminate:focus + span::before, &:indeterminate:active:focus + span::before
+ @if $flat
+ background: lighten($emphasized-color, 25%)
+ border: 1px solid $emphasized-color
+ @else
+ background: linear-gradient(lighten($emphasized-color, 30%), lighten($emphasized-color, 20%))
+ border: 1px solid darken($emphasized-color, 15%)
+
+ &[disabled]
+ & + span
+ color: $disabled-font-color
+
+ & + span::before
+ background: $disabled-color
+ @if $flat
+ border: 1px solid $disabled-border-color
+ @else
+ border: 1px solid $disabled-border-color// .094em
+
+ &:checked[disabled] + span::after
+ background: $checkbox-emphasized-svg-checked-disabled
+
+ &:indeterminate[disabled] + span::after
+ background: $checkbox-emphasized-svg-indeterminate-disabled
+
+ // -- LABEL
+
+ &.rejected
+
+ input
+
+ &:indeterminate + span::after, &:indeterminate:active + span::after
+ background: $checkbox-emphasized-svg-rejected
+
+ &:indeterminate[disabled] + span::after
+ background: $checkbox-emphasized-svg-rejected-disabled
+
+// Jewel CheckBoxSwitch
+
+// CheckBoxSwitch variables
+
+.jewel.switch.emphasized
+
+ input
+ &:checked
+ + .switch
+ @if $flat
+ background: $emphasized-color
+ @else
+ background: linear-gradient(lighten($emphasized-color, 0%), lighten($emphasized-color, 10%))
+ box-shadow: 0px 0px 0px 1px darken($emphasized-color, 5%)
+
+ &:focus
+ + .switch
+ box-shadow: 0px 0px 0px 1px darken($emphasized-color, 10%)
+
+ &:checked
+ + .switch::before
+ @if $flat
+ background: lighten($emphasized-color, 45%)
+ @else
+ background: lighten($emphasized-color, 45%)
+
+ &[disabled]
+ &:checked
+ + .switch
+ @if $flat
+ background: lighten($disabled-font-color, 10%)
+ @else
+ background: lighten($disabled-font-color, 10%)
+ box-shadow: 0px 0px 0px 1px lighten($disabled-font-color, 5%)
+
+ & + .switch
+ @if $flat
+ background: lighten($default-color, 10%)
+ @else
+ background: lighten($default-color, 10%)
+ box-shadow: 0px 0px 0px 1px lighten($disabled-font-color, 15%)
+
+ & + .switch::before
+ @if $flat
+ background: lighten($default-color, 25%)
+ @else
+ background: lighten($disabled-color, 10%)
+
+ .switch
+ @if $flat
+ background: linear-gradient(lighten($default-color, 0%), lighten($default-color, 0%))
+ @else
+ background: linear-gradient(lighten($default-color, 0%), lighten($default-color, 10%))
+ box-shadow: 0px 0px 0px 1px darken($default-color, 5%)
+
+ &::before
+ @if $flat
+ background: lighten($default-color, 45%)
+ box-shadow: none
+ @else
+ background: lighten($emphasized-color, 45%)
+ box-shadow: 1px 0px 1px 0px rgba(0, 0, 0, .1)
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_checkbox.sass
index 9b0ac58..8c45959 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-secondary/_checkbox.sass
@@ -20,3 +20,133 @@
// Jewel CheckBox
// CheckBox variables
+$checkbox-secondary-svg-checked: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><polygon fill='#{$secondary-color}' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/></svg>") no-repeat center center
+$checkbox-secondary-svg-checked-disabled: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><polygon fill='#{darken($disabled-color, 15%)}' points='3.50018311 12.4854126 8.48547363 17.4989624 18.4641113 7.47589111 15.5010376 4.51739502 8.48547363 11.5650024 6.52087402 9.47265625'/></svg>") no-repeat center center
+
+$checkbox-secondary-svg-indeterminate: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><rect stroke-width='0' stroke='#FFFFFF' height='12' width='12' y='5' x='5' fill='#{$secondary-color}' /></svg>") no-repeat center center
+$checkbox-secondary-svg-indeterminate-disabled: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><rect stroke-width='0' stroke='#FFFFFF' height='12' width='12' y='5' x='5' fill='#{darken($disabled-color, 15%)}' /></svg>") no-repeat center center
+
+$checkbox-secondary-svg-rejected: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><line stroke-width='4' stroke='#{$secondary-color}' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /></svg>") no-repeat center center
+$checkbox-secondary-svg-rejected-disabled: encodeSVG("<svg viewBox='0 0 22 22' version='1.1' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='22' height='22' fill-opacity='0'/><line stroke-width='4' stroke='#{darken($disabled-color, 15%)}' stroke-linecap='undefined' stroke-linejoin='undefined' y2='10.9375' x2='17' y1='11.0625' x1='5' fill='none' /></svg>") no-repeat center center
+
+.jewel.checkbox.secondary
+
+ // -- INPUT
+ input
+
+ + span::before
+ @if $flat
+ background: lighten($default-color, 15%)
+ border: 1px solid $default-color
+ @else
+ background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
+ border: 1px solid darken($default-color, 15%)
+
+ + span::after
+ background: $checkbox-secondary-svg-checked
+
+ &:checked + span::after, &:checked:active + span::after
+ background: $checkbox-secondary-svg-checked
+
+ &:indeterminate + span::after, &:indeterminate:active + span::after
+ background: $checkbox-secondary-svg-indeterminate
+
+ &:focus + span::before, &:checked:focus + span::before, &:checked:active:focus + span::before, &:indeterminate:focus + span::before, &:indeterminate:active:focus + span::before
+ @if $flat
+ background: lighten($secondary-color, 25%)
+ border: 1px solid $secondary-color
+ @else
+ background: linear-gradient(lighten($secondary-color, 30%), lighten($secondary-color, 20%))
+ border: 1px solid darken($secondary-color, 15%)
+
+ &[disabled]
+
+ & + span
+ color: $disabled-font-color
+
+ & + span::before
+ background: $disabled-color
+ @if $flat
+ border: 1px solid $disabled-border-color
+ @else
+ border: 1px solid $disabled-border-color
+
+ &:checked[disabled] + span::after
+ background: $checkbox-secondary-svg-checked-disabled
+
+ &:indeterminate[disabled] + span::after
+ background: $checkbox-secondary-svg-indeterminate-disabled
+
+ // -- LABEL
+
+ &.rejected
+
+ input
+
+ &:indeterminate + span::after, &:indeterminate:active + span::after
+ background: $checkbox-secondary-svg-rejected
+
+ &:indeterminate[disabled] + span::after
+ background: $checkbox-secondary-svg-rejected-disabled
+
+// Jewel CheckBoxSwitch
+
+// CheckBoxSwitch variables
+
+.jewel.switch.secondary
+
+ input
+ &:checked
+ + .switch
+ @if $flat
+ background: $secondary-color
+ @else
+ background: linear-gradient(lighten($secondary-color, 0%), lighten($secondary-color, 10%))
+ box-shadow: 0px 0px 0px 1px darken($secondary-color, 5%)
+
+ &:focus
+ + .switch
+ box-shadow: 0px 0px 0px 1px darken($secondary-color, 10%)
+
+ &:checked
+ + .switch::before
+ @if $flat
+ background: lighten($secondary-color, 45%)
+ @else
+ background: lighten($secondary-color, 45%)
+
+ &[disabled]
+ &:checked
+ + .switch
+ @if $flat
+ background: lighten($disabled-font-color, 10%)
+ @else
+ background: lighten($disabled-font-color, 10%)
+ box-shadow: 0px 0px 0px 1px lighten($disabled-font-color, 5%)
+
+ & + .switch
+ @if $flat
+ background: lighten($default-color, 10%)
+ @else
+ background: lighten($default-color, 10%)
+ box-shadow: 0px 0px 0px 1px lighten($disabled-font-color, 15%)
+
+ & + .switch::before
+ @if $flat
+ background: lighten($default-color, 25%)
+ @else
+ background: lighten($disabled-color, 10%)
+
+ .switch
+ @if $flat
+ background: linear-gradient(lighten($default-color, 0%), lighten($default-color, 0%))
+ @else
+ background: linear-gradient(lighten($default-color, 0%), lighten($default-color, 10%))
+ box-shadow: 0px 0px 0px 1px darken($default-color, 5%)
+
+ &::before
+ @if $flat
+ background: lighten($default-color, 45%)
+ @else
+ background: lighten($secondary-color, 45%)
+