From 71b3cbda4eb70b26362ccfd08a8e7f96d6a7bcea Mon Sep 17 00:00:00 2001 From: Sungtaek Hong Date: Fri, 18 Nov 2016 11:41:07 +0900 Subject: [PATCH] theme: expand radio as text expands Change-Id: I051c1c81f0729f239fbaf9f7630958eeb65e366e Signed-off-by: Sungtaek Hong --- packaging/elm-sharp.spec | 4 +- src/ElmSharp/theme/mobile/HD-inc.edc | 6 + .../User_Input_Elements/core_radio_bg_01.svg | 8 + .../User_Input_Elements/core_radio_bg_02.svg | 9 + .../images/User_Input_Elements/core_radio_icon.svg | 7 + .../User_Input_Elements/core_radio_stroke.svg | 8 + .../User_Input_Elements/core_radio_white_bg.svg | 8 + src/ElmSharp/theme/mobile/color_classes.edc | 34 ++ .../theme/mobile/elm-sharp-theme-mobile.edc | 1 + src/ElmSharp/theme/mobile/widgets/radio.edc | 559 +++++++++++++++++++++ 10 files changed, 643 insertions(+), 1 deletion(-) create mode 100755 src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_bg_01.svg create mode 100755 src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_bg_02.svg create mode 100755 src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_icon.svg create mode 100755 src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_stroke.svg create mode 100755 src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_white_bg.svg create mode 100644 src/ElmSharp/theme/mobile/widgets/radio.edc diff --git a/packaging/elm-sharp.spec b/packaging/elm-sharp.spec index 938d2b0..e9fa69f 100644 --- a/packaging/elm-sharp.spec +++ b/packaging/elm-sharp.spec @@ -43,7 +43,9 @@ find $ASM/*.csproj -exec xbuild {} /p:Configuration=%{BUILDCONF} \; nuget pack $ASM/$ASM.nuspec -Version %{version} -Properties Configuration=%{BUILDCONF} done -edje_cc ElmSharp/theme/%{profile}/elm-sharp-theme-%{profile}.edc ElmSharp/theme/elm-sharp-theme.edj +edje_cc -id ElmSharp/theme/%{profile}/HD/images/ \ + -id ElmSharp/theme/%{profile}/HD/images/User_Input_Elements \ + ElmSharp/theme/%{profile}/elm-sharp-theme-%{profile}.edc ElmSharp/theme/elm-sharp-theme.edj %install # Runtime Binary diff --git a/src/ElmSharp/theme/mobile/HD-inc.edc b/src/ElmSharp/theme/mobile/HD-inc.edc index f98fff3..c3266bd 100644 --- a/src/ElmSharp/theme/mobile/HD-inc.edc +++ b/src/ElmSharp/theme/mobile/HD-inc.edc @@ -69,3 +69,9 @@ //****************************************************************************// #define LABEL_FONT_SIZE_INC 24 +//****************************************************************************// +// RADIO +//****************************************************************************// +#define RADIO_DEFAULT_SIZE_INC 50 50 +#define RADIO_PAD_BEFORE_TEXT_INC 32 0 + diff --git a/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_bg_01.svg b/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_bg_01.svg new file mode 100755 index 0000000..a903fc2 --- /dev/null +++ b/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_bg_01.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_bg_02.svg b/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_bg_02.svg new file mode 100755 index 0000000..4bf9638 --- /dev/null +++ b/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_bg_02.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_icon.svg b/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_icon.svg new file mode 100755 index 0000000..3170adc --- /dev/null +++ b/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_icon.svg @@ -0,0 +1,7 @@ + + + + + + diff --git a/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_stroke.svg b/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_stroke.svg new file mode 100755 index 0000000..9a8fdab --- /dev/null +++ b/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_stroke.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_white_bg.svg b/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_white_bg.svg new file mode 100755 index 0000000..054a779 --- /dev/null +++ b/src/ElmSharp/theme/mobile/HD/images/User_Input_Elements/core_radio_white_bg.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/src/ElmSharp/theme/mobile/color_classes.edc b/src/ElmSharp/theme/mobile/color_classes.edc index 726b914..f71991c 100644 --- a/src/ElmSharp/theme/mobile/color_classes.edc +++ b/src/ElmSharp/theme/mobile/color_classes.edc @@ -57,4 +57,38 @@ color_classes { name: "label/slide_bounce/bg"; color: 0 0 0 0; } + + /* + * Radio + */ + color_class { "radio/default/icon"; + color: 61 185 204 255; + } + color_class { "radio/default/bg"; + color: 250 250 250 51; + } + color_class { "radio/default/icon_disabled"; + color: 61 185 204 77; + } + color_class { "radio/default/bg_disabled"; + color: 250 250 250 38; + } + color_class { "radio/default/bg_border_on"; + color: 250 250 250 77; + } + color_class { "radio/default/bg_border_on_disabled"; + color: 250 250 250 38; + } + color_class { "radio/default/stroke"; + color: 61 185 204 255; + } + color_class { "radio/default/stroke_disabled"; + color: 61 185 204 77; + } + color_class { "radio/default/bg_on"; + color: 250 250 250 255; + } + color_class { "radio/default/bg_on_disabled"; + color: 250 250 250 255; + } } diff --git a/src/ElmSharp/theme/mobile/elm-sharp-theme-mobile.edc b/src/ElmSharp/theme/mobile/elm-sharp-theme-mobile.edc index c0b7a34..2a95234 100644 --- a/src/ElmSharp/theme/mobile/elm-sharp-theme-mobile.edc +++ b/src/ElmSharp/theme/mobile/elm-sharp-theme-mobile.edc @@ -86,6 +86,7 @@ collections { #include "widgets/colorselector.edc" #include "widgets/entry.edc" #include "widgets/label.edc" +#include "widgets/radio.edc" } diff --git a/src/ElmSharp/theme/mobile/widgets/radio.edc b/src/ElmSharp/theme/mobile/widgets/radio.edc new file mode 100644 index 0000000..abfafe2 --- /dev/null +++ b/src/ElmSharp/theme/mobile/widgets/radio.edc @@ -0,0 +1,559 @@ +/* + * Copyright (c) 2015 Samsung Electronics Co., Ltd All Rights Reserved + * + * BSD 2-Clause License (http://www.opensource.org/licenses/bsd-license.php) + * + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are met: + * + * 1. Redistributions of source code must retain the above copyright notice, this + * list of conditions and the following disclaimer. + * 2. Redistributions in binary form must reproduce the above copyright notice, + * this list of conditions and the following disclaimer in the documentation + * and/or other materials provided with the distribution. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND + * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED + * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE + * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR + * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES + * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; + * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND + * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT + * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS + * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + */ +#define STYLE_TAGS \ + tag: "br" "\n";\ + tag: "ps" "ps";\ + tag: "tab" "\t";\ + tag: "b" "+ font_weight=Bold"; + +styles{ + style { name: "radio_default"; + base: "color=#000000FF font=Tizen:weight=Light font_size=40 text_class=tizen ellipsis=1.0"; + STYLE_TAGS + } + style { name: "radio_default_dim"; + base: "color=#000000A3 font=Tizen:weight=Light font_size=40 text_class=tizen ellipsis=1.0"; + STYLE_TAGS + } + style { name: "radio_default_press"; + base: "color=#000000FF font=Tizen:weight=Light font_size=40 text_class=tizen ellipsis=1.0"; + STYLE_TAGS + } +} +#undef STYLE_TAGS + +group { "elm/radio/event/default"; + inherit_only: 1; + parts { + rect { "event"; + mouse; + desc { "default"; + color: 0 0 0 0 ; + rel.to: "base"; + } + desc { "disabled"; + inherit: "default"; + hid; + } + } + } + programs { + program { "clicked"; + signal: "mouse,clicked,1"; + source: "event"; + action: SIGNAL_EMIT "elm,action,click" ""; + after: "on_clicked"; + } + program { "pressed"; + signal: "mouse,down,1*"; + source: "event"; + action: SIGNAL_EMIT "elm,action,press" ""; + after: "on_pressed"; + } + program { "unpressed"; + signal: "mouse,up,1"; + source: "event"; + action: SIGNAL_EMIT "elm,action,unpress" ""; + after: "on_unpressed"; + } + program { "set_radio"; + signal: "elm,state,radio,on"; + source: "elm"; + after: "on_set_radio"; + } + program { "unset_radio"; + signal: "elm,state,radio,off"; + source: "elm"; + after: "on_unset_radio"; + } + program { "disabled"; + signal: "elm,state,disabled"; + source: "elm"; + after: "on_disabled"; + } + program { "enabled"; + signal: "elm,state,enabled"; + source: "elm"; + after: "on_enabled"; + } + program { "enable_event_pass"; + signal: "elm,event,pass,enabled"; + source: "elm"; + script { + set_mouse_events(PART:"event", 0); + } + } + program { "disable_event_pass"; + signal: "elm,event,pass,disabled"; + source: "elm"; + script { + set_mouse_events(PART:"event", 1); + } + } + program { "enable_event_repeat"; + signal: "elm,event,repeat,enabled"; + source: "elm"; + script { + set_repeat_events(PART:"event", 1); + } + } + program { "disable_event_repeat"; + signal: "elm,event,repeat,disabled"; + source: "elm"; + script { + set_repeat_events(PART:"event", 0); + } + } + } +} +group { "elm/radio/base/template"; + parts { + spacer { "base"; + desc { "default"; + } + } + } + inherit: "elm/radio/event/default"; + programs { + program { "on_clicked"; + } + program { "on_pressed"; + } + program { "on_unpressed"; + } + program { "on_disabled"; + } + program { "on_enabled"; + } + program { "on_set_radio"; + } + program { "on_unset_radio"; + } + } +} +group { "elm/radio/base/default"; + images{ + vector: core_radio_stroke.svg; + vector: core_radio_icon.svg; + vector: core_radio_bg_01.svg; + vector: core_radio_bg_02.svg; + vector: core_radio_white_bg.svg; + } + nomouse; + target_group: "vector_group" "clipper_bg_vector" "clipper_icon" "clipper_icon_inner" "clipper_icon_outer" "clipper_icon_stroke"; + parts { + spacer { "base"; + scale; + desc { "default"; + min: RADIO_DEFAULT_SIZE_INC; + } + } + //bg shape + vector { "bg_vector"; + scale; + clip: "clipper_bg_vector"; + desc { "default"; + image.normal: "core_radio_white_bg.svg"; + min: RADIO_DEFAULT_SIZE_INC; + rel1.relative: 0 0.5; + rel2.relative: 0 0.5; + align: 0 0.5; + fixed: 1 1; + } + } + rect { "clipper_bg_vector"; + desc { "default"; + color_class: "radio/default/bg"; + } + desc { "on"; + color_class: "radio/default/bg_border_on"; + } + desc { "off"; + inherit: "default"; + } + desc { "disabled_on"; + color_class: "radio/default/bg_border_on_disabled"; + } + desc { "disabled_off"; + color_class: "radio/default/bg_disabled"; + } + } + vector { "icon"; + scale; + clip: "clipper_icon"; + desc { "default"; + image.normal: "core_radio_icon.svg"; + rel1.to: "bg_vector"; + rel2.to: "bg_vector"; + } + } + rect { "clipper_icon"; + desc { "default"; + color: 250 250 250 0; + } + desc { "on"; + color_class: "radio/default/bg_on" ; + } + desc { "off"; + inherit: "default"; + } + desc { "disabled_off"; + inherit: "default"; + } + desc { "disabled_on"; + color_class: "radio/default/bg_on_disabled" ; + } + } + vector { "icon_inner"; + scale; + clip: "clipper_icon_inner"; + desc { "default"; + image.normal: "core_radio_bg_01.svg"; + rel.to: "bg_vector"; + } + } + rect { "clipper_icon_inner"; + desc { "default"; + rel1.relative: 0.5 0.5; + rel2.relative: 0.5 0.5; + rel.to: "bg_vector"; + } + desc { "on"; + rel.to: "bg_vector"; + color_class: "radio/default/icon"; + } + desc { "off"; + inherit: "default"; + } + desc { "disabled_off"; + inherit: "default"; + } + desc { "disabled_on"; + rel.to: "bg_vector"; + color_class: "radio/default/icon_disabled"; + } + } + vector { "icon_outer"; + scale; + clip: "clipper_icon_outer"; + desc { "default"; + image.normal: "core_radio_bg_02.svg"; + rel1.to: "bg_vector"; + rel2.to: "bg_vector"; + } + } + rect { "clipper_icon_outer"; + desc { "default"; + color: 61 185 204 0; + } + desc { "on"; + color_class: "radio/default/icon"; + } + desc { "off"; + inherit: "default"; + } + desc { "disabled_off"; + inherit: "default"; + } + desc { "disabled_on"; + color_class: "radio/default/icon_disabled"; + } + } + vector { "icon_stroke"; + scale; + clip: "clipper_icon_stroke"; + desc { "default"; + image.normal: "core_radio_stroke.svg"; + rel1.to: "bg_vector"; + rel2.to: "bg_vector"; + } + } + rect { "clipper_icon_stroke"; + desc { "default"; + color_class: "radio/default/stroke"; + } + desc { "on"; + color: 61 185 204 0; + } + desc { "off"; + inherit: "default"; + } + desc { "disabled_off"; + color_class: "radio/default/stroke_disabled"; + } + desc { "disabled_on"; + inherit: "on"; + } + } + spacer { "padding_before_text"; + scale; + desc { "default"; + align: 0.0 0.5; + min: 0 0; + rel1 { + to: "bg_vector"; + relative: 1.0 0.0; + } + rel2 { + to: "bg_vector"; + relative: 1.0 1.0; + } + } + desc { "visible"; + inherit: "default" 0.0; + min: RADIO_PAD_BEFORE_TEXT_INC; + fixed: 1 1; + } + } + textblock { "elm.text"; + scale; + desc { "default"; + hid; + fixed: 0 1; + rel1 { + relative: 1.0 0.5; + to_x: "padding_before_text"; + } + rel2 { + relative: 1.0 0.5; + } + align: 0.0 0.5; + text { + style: "radio_default"; + min: 1 0; + } + } + desc { "visible"; + inherit: "default" 0.0; + vis; + text.min: 1 1; + } + desc { "disabled"; + inherit: "default" 0.0; + vis; + text { + style: "radio_default_dim"; + min: 0 1; + } + } + desc { "pressed"; + inherit: "default" 0.0; + vis; + text { + style: "radio_default_press"; + min: 0 1; + } + } + } + } + inherit: "elm/radio/event/default"; + script { + public radio_state; + public disabled; + public text; + public animate = 0; + } + programs { + program { "on_clicked"; + script { + if (get_int(disabled) == 1) return; + emit("elm,action,radio,toggle", ""); + run_program(PROGRAM:"touch_sound"); + } + } + program { "on_pressed"; + script { + if (get_int(disabled) == 1) return; + if (get_int(text) == 1) { + set_state(PART:"elm.text", "pressed", 0.0); + } + } + } + program { "on_unpressed"; + script { + if (get_int(disabled) == 1) return; + if (get_int(radio_state) == 1) { + run_program(PROGRAM:"toggle_on_without_effect"); + }else { + run_program(PROGRAM:"toggle_off_without_effect"); + } + if (get_int(text) == 1) { + set_state(PART:"elm.text", "visible", 0.0); + } + } + } + program { "on_disabled"; + script { + set_int(disabled, 1); + if (get_int(radio_state) == 1) { + run_program(PROGRAM:"toggle_disabled_on_without_effect"); + }else { + run_program(PROGRAM:"toggle_disabled_off_without_effect"); + } + if (get_int(text) == 1) { + set_state(PART:"elm.text", "disabled", 0.0); + } + } + } + program { "on_enabled"; + script { + set_int(disabled, 0); + if (get_int(radio_state) == 1) { + run_program(PROGRAM:"toggle_on_without_effect"); + } else { + run_program(PROGRAM:"toggle_off_without_effect"); + } + if (get_int(text) == 1) { + set_state(PART:"elm.text", "visible", 0.0); + } + } + } + program { "on_set_radio"; + script { + if (get_int(disabled) == 1) { + if (get_int(animate) == 0) { + run_program(PROGRAM:"toggle_disabled_on_without_effect"); + } else { + run_program(PROGRAM:"toggle_disabled_on_with_effect"); + } + }else { + if (get_int(animate) == 0) { + run_program(PROGRAM:"toggle_on_without_effect"); + emit("elm,radio,state,toggle", "tizen_vg"); + } else { + run_program(PROGRAM:"toggle_on_with_effect"); + emit("elm,radio,action,toggle", "tizen_vg"); + } + } + set_int(animate, 0); + set_int(radio_state, 1); + } + } + program { "on_unset_radio"; + script { + if (get_int(disabled) == 1) { + if (get_int(animate) == 0) { + run_program(PROGRAM:"toggle_disabled_off_without_effect"); + } else { + run_program(PROGRAM:"toggle_disabled_off_with_effect"); + } + }else { + if (get_int(animate) == 0) { + run_program(PROGRAM:"toggle_off_without_effect"); + emit("elm,radio,state,toggle", "tizen_vg"); + } else { + run_program(PROGRAM:"toggle_off_with_effect"); + emit("elm,radio,action,toggle", "tizen_vg"); + } + } + set_int(animate, 0); + set_int(radio_state, 0); + } + } + program { "touch_sound"; + action: RUN_PLUGIN "touch_sound"; + } + program { "activate_animate_radio"; + signal: "elm,activate,radio,on"; + source: "elm"; + script { + set_int(animate, 1); + } + } + program { "deactivate_animate_radio"; + signal: "elm,activate,radio,off"; + source: "elm"; + script { + set_int(animate, 1); + } + } + program { "toggle_on_with_effect"; + action: STATE_SET "on"; + transition: DECELERATE 0.3; + target_groups: "vector_group"; + after: "finished_animation"; + } + program { "toggle_off_with_effect"; + action: STATE_SET "default"; + target_groups: "vector_group"; + transition: DECELERATE 0.3; + after: "finished_animation"; + } + program { "toggle_disabled_on_with_effect"; + action: STATE_SET "disabled_on"; + target_groups: "vector_group"; + transition: DECELERATE 0.3; + after: "finished_animation"; + } + program { "toggle_disabled_off_with_effect"; + action: STATE_SET "disabled_off"; + target_groups: "vector_group"; + transition: DECELERATE 0.3; + after: "finished_animation"; + } + program { "toggle_on_without_effect"; + action: STATE_SET "on"; + target_groups: "vector_group"; + } + program { "toggle_off_without_effect"; + action: STATE_SET "default"; + target_groups: "vector_group"; + } + program { "toggle_disabled_on_without_effect"; + action: STATE_SET "disabled_on"; + target_groups: "vector_group"; + } + program { "toggle_disabled_off_without_effect"; + action: STATE_SET "disabled_off"; + target_groups: "vector_group"; + } + program { "finished_animation"; + action: SIGNAL_EMIT "animation,finished" ""; + } + program { "visible_text"; + signal: "elm,state,text,visible"; + source: "elm"; + script { + set_int(text, 1); + set_state(PART:"padding_before_text", "visible", 0.0); + if (get_int(disabled) == 1) { + set_state(PART:"elm.text", "disabled", 0.0); + }else { + set_state(PART:"elm.text", "visible", 0.0); + } + } + } + program { "hidden_text"; + signal: "elm,state,text,hidden"; + source: "elm"; + script { + set_int(text, 0); + set_state(PART:"padding_before_text", "default", 0.0); + set_state(PART:"elm.text", "default", 0.0); + } + } + } +} -- 2.7.4