<li><a href="widgets/searchbar.html">Searchbar</a></li>
<li><a href="widgets/entry.html">Entry</a></li>
<li><a href="widgets/datefield.html">Time picker</a></li>
- <li><a href="widgets/controlbar/controlbar.html">Controlbar</a></li>
<li><a href="widgets/progressbar.html">Progressbar</a></li>
<li><a href="#slider-demo">Slider</a></li>
<li><a href="widgets/imageslider.html">ImageSlider</a></li>
<li><a href="widgets/selectioninfo.html">SelectionInfo</a></li>
<li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
<li><a href="#multibuttonentry">Multi-Button Entry</a></li>
- <li><a href="widgets/colorpicker.html">Color picker</a></li>
<li data-role="list-divider">PageLayout</li>
<li><a href="widgets/naviframe/naviframe.html">Naviframe</a></li>
<li><a href="widgets/pagelayout/barcontrol.html">Header/Footer(fixed/non-fixed) Control</a></li>
<li><a href="widgets/pagelayout/backbutton-control.html">Back Button Control</a></li>
+ <li data-role="list-divider">Controlbar</li>
+ <li><a href="widgets/controlbar/controlbar.html">Controlbar</a></li>
+ <li><a href="#controlbar_persist_a">Persist toolbar</a></li>
+
<li data-role="list-divider">Scrollview</li>
<li><a href="widgets/scrollview_x.html">Horizontal Scroll</a></li>
<li><a href="widgets/scrollview_y.html">Vertical Scroll</a></li>
</div>
</div>
+<div data-role="page" id="controlbar_persist_a">
+ <div data-role="header" data-position="fixed">
+ <div data-role="controlbar" data-id="persist_header" >
+ <ul>
+ <li><a href="#controlbar_persist_a" class="ui-btn-active ui-state-persist">Menu</a></li>
+ <li><a href="#controlbar_persist_b" >Save</a></li>
+ <li><a href="#controlbar_persist_c" >Next</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+
+ <div data-role="content">
+ <p>page a</p>
+ </div>
+</div>
+
+<div data-role="page" id="controlbar_persist_b">
+ <div data-role="header" data-position="fixed">
+ <div data-role="controlbar" data-id="persist_header" >
+ <ul>
+ <li><a href="#controlbar_persist_a" >Menu</a></li>
+ <li><a href="#controlbar_persist_b" class="ui-btn-active ui-state-persist">Save</a></li>
+ <li><a href="#controlbar_persist_c" >Next</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+
+ <div data-role="content">
+ <p>page b</p>
+ </div>
+</div>
+
+<div data-role="page" id="controlbar_persist_c">
+ <div data-role="header" data-position="fixed">
+ <div data-role="controlbar" data-id="persist_header" >
+ <ul>
+ <li><a href="#controlbar_persist_a" >Menu</a></li>
+ <li><a href="#controlbar_persist_b" >Save</a></li>
+ <li><a href="#controlbar_persist_c" class="ui-btn-active ui-state-persist">Next</a></li>
+ </ul>
+ </div><!-- /controlbar -->
+ </div>
+
+ <div data-role="content">
+ <p>page c</p>
+ </div>
+</div>
+
+
<div data-role="page" id="notImplemented">
<div data-role="header" data-position="fixed">
<h1>Not Implemented</h1>
}
});
});
-
- $("#checkHideInput").bind("change", function (e) {
- $("#colorpickerbutton").colorpickerbutton("option", "hideInput", $("#checkHideInput").is(":checked"));
- });
$('#scroller-demo').bind('pageshow', function ( e ) {
$page = $( e.target );
// TODO: 'create' is called twice!!
});
});
-
- /* Color widget demo */
- var clrWidgetsAreInit = false;
- $("#colorwidgets-demo").bind("pageshow", function () {
- if ( clrWidgetsAreInit ) {
- return;
- }
-
- $("#colorpicker").bind("colorchanged", function ( e, clr ) {
- $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
- $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
- $("#hsvpicker").hsvpicker( "option", "color", clr );
- $("#colortitle").colortitle( "option", "color", clr );
- $("#colorpalette").colorpalette( "option", "color", clr );
- });
-
- $("#colorpickerbutton").bind("colorchanged", function ( e, clr ) {
- $("#colorpicker").colorpicker( "option", "color", clr );
- $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
- $("#hsvpicker").hsvpicker( "option", "color", clr );
- $("#colortitle").colortitle( "option", "color", clr );
- $("#colorpalette").colorpalette( "option", "color", clr );
- });
-
- $("#colorpickerbutton-noform").bind("colorchanged", function ( e, clr ) {
- $("#colorpicker").colorpicker( "option", "color", clr );
- $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
- $("#hsvpicker").hsvpicker( "option", "color", clr );
- $("#colortitle").colortitle( "option", "color", clr );
- $("#colorpalette").colorpalette( "option", "color", clr );
- });
-
- $("#hsvpicker").bind("colorchanged", function ( e, clr ) {
- $("#colorpicker").colorpicker( "option", "color", clr );
- $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
- $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
- $("#colortitle").colortitle( "option", "color", clr );
- $("#colorpalette").colorpalette( "option", "color", clr );
- });
-
- $("#colortitle").bind("colorchanged", function ( e, clr ) {
- $("#colorpicker").colorpicker( "option", "color", clr );
- $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
- $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
- $("#hsvpicker").hsvpicker( "option", "color", clr );
- $("#colorpalette").colorpalette( "option", "color", clr );
- });
-
- $("#colorpalette").bind("colorchanged", function ( e, clr ) {
- $("#colorpicker").colorpicker( "option", "color", clr );
- $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
- $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
- $("#hsvpicker").hsvpicker( "option", "color", clr );
- $("#colortitle").colortitle( "option", "color", clr );
- });
-
- $("#colorpalette").colorpalette("option", "color", "#45cc98");
-
- clrWidgetsAreInit = true;
- });
});
$(document).ready( function () {
<li><a href="controlbar_title_text.html">Title + Tab(text)</a></li>
<li><a href="controlbar_title_icon.html">Title Tab(icon) only</a></li>
<li><a href="controlbar_scrolling.html">Scrolling interation</a></li>
- <li><a href="#Tabbar_Main">Persist toolbar</a></li>
+
<li data-role="list-divider">Footer</li>
<li><a href="controlbar_footer_icon.html">[Progressing...]Footer + Tab(text)</a></li>
<li><a href="controlbar_footer.html">[Progressing...]Footer + Tab(text)</a></li>
+
+
<div data-role="page" id="controlbar-demo" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>ControlBar</h1>
</div>
<div class="content" data-role="content">
<ul data-role="listview" data-icon="1line-textonly">
+ <li data-role="list-divider">App samples</li>
<li><a href="#center_social_style1" data-inline="true" data-rel="popup" data-position-to="window">Social Magazine style1</a></li>
<li><a href="#center_social_style2" data-inline="true" data-rel="popup" data-position-to="window">Social Magazine style2</a></li>
+ <li data-role="list-divider">Normal samples</li>
<li><a href="#center_info" data-inline="true" data-rel="popup" data-position-to="window">Center info popup</a></li>
<li><a href="#center_title" data-inline="true" data-rel="popup" data-position-to="window">Center title popup</a></li>
<li><a href="#center_basic_1btn" data-inline="true" data-rel="popup" data-position-to="window">Center basic 1 button popup</a></li>
<li><a href="#center_liststyle_3btn" data-inline="true" data-rel="popup" data-position-to="window">Center_list style 3 button popup</a></li>
</ul>
-
-
- <!-- popup basic+text+1button -->
+ <!-- Social Magazine font popup -->
<div id="center_social_style1" data-role="popup" class="center_liststyle_2btn">
- <p class="ui-popup-title">
- Font Size
- </p>
+ <div class="ui-popup-title">
+ <h1>Font Size</h1>
+ </div>
<div class="ui-popup-scroller-bg" data-scroll="y" style="height:auto">
<ul data-role="listview">
<li class="ui-li-has-radio" id="text_fontSmall">
<div class="ui-popup-button-bg">
<div data-role="button" data-inline="true">OK</div>
<div data-role="button" data-inline="true">Cancel</div>
- <!--<input type="button" value="OK" id="popupFontSizeOKBtn" />
- <input type="button" value="Cancel" id="popupfontSizeCancelBtn"/>-->
</div>
</div>
+ <!-- Social Magazine ime popup -->
<div id="center_social_style2" data-role="popup" class="center_title_2btn">
- <p class="ui-popup-title">
- Create new category
- </p>
- <p class="ui-popup-text">
+ <div class="ui-popup-title">
+ <h1>Create new category<h1>
+ </div>
+ <div class="ui-popup-text">
<input type="text" id="newCategoryPopupInput" name="newCategoryName" size="30" />
- </p>
+ </div>
<div class="ui-popup-button-bg">
<div data-role="button" data-inline="true">OK</div>
<div data-role="button" data-inline="true">Cancel</div>
-<!-- <input type="button" id="createNewCategoryPopupOKBtn" value="OK"/>
- <input type="button" id="createNewCategoryPopupCancelBtn" value="Cancel"/>-->
</div>
</div>
- <!-- text only -->
+ <!-- Center info Popup -->
<div id="center_info" data-role="popup" class="center_info">
<div class="ui-popup-text"> <p>
Pop-up dialog box, a child
</p></div>
</div>
- <!-- popup title-text -->
+ <!-- Center title Popup -->
<div id="center_title" data-role="popup" class="center_title">
- <p class="ui-popup-title">
- Popup title
- </p>
- <p class="ui-popup-text">
+ <div class="ui-popup-title">
+ <h1>Popup title</h1>
+ </div>
+ <div class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
- </p>
+ </div>
</div>
- <!-- popup basic+text+1button -->
+ <!-- Center basic 1 button popup -->
<div id="center_basic_1btn" data-role="popup" class="center_basic_1btn">
- <p class="ui-popup-text">
+ <div class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
- </p>
+ </div>
<div class="ui-popup-button-bg">
- <input type="button" value="Text Button" />
+ <div data-role="button" data-inline="true">Button</div>
</div>
</div>
- <!-- popup basic+text+2button -->
+ <!-- Center basic 2 button popup -->
<div id="center_basic_2btn" data-role="popup" class="center_basic_2btn">
- <p class="ui-popup-text">
+ <div class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
- </p>
+ </div>
<div class="ui-popup-button-bg">
-<!-- <input type="button" value="Text Button" />
- <input type="button" value="Text Button" />-->
- <div data-role="button" data-inline="true">Cancel</div>
- <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="button" data-inline="true">Button1</div>
+ <div data-role="button" data-inline="true">Button2</div>
</div>
</div>
- <!-- popup basic+text+3button -->
+ <!-- Center basic 3 button popup -->
<div id="center_basic_3btn" data-role="popup" class="center_basic_3btn">
- <p class="ui-popup-text">
+ <div class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
- </p>
+ </div>
<div class="ui-popup-button-bg">
-<!-- <input type="button" value="Button1" />
- <input type="button" value="Button2" />
- <input type="button" value="Button3" />-->
- <div data-role="button" data-inline="true">Cancel</div>
- <div data-role="button" data-inline="true">Cancel</div>
- <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="button" data-inline="true">Button1</div>
+ <div data-role="button" data-inline="true">Button2</div>
+ <div data-role="button" data-inline="true">Button3</div>
</div>
</div>
- <!-- popup title+text+1button -->
+ <!-- Center title 1 button popup -->
<div id="center_title_1btn" data-role="popup" class="center_title_1btn">
- <p class="ui-popup-title">
- Popup title
- </p>
- <p class="ui-popup-text">
+ <div class="ui-popup-title">
+ <h1>Popup title</h1>
+ </div>
+ <div class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
- </p>
+ </div>
<div class="ui-popup-button-bg">
-<!-- <input type="button" value="Text Button" />-->
- <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="button" data-inline="true">Button</div>
</div>
</div>
- <!-- popup title+text+2button -->
+ <!-- Center title 2 button popup -->
<div id="center_title_2btn" data-role="popup" class="center_title_2btn">
- <p class="ui-popup-title">
- Popup title
- </p>
- <p class="ui-popup-text">
+ <div class="ui-popup-title">
+ <h1>Popup title</h1>
+ </div>
+ <div class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
- </p>
+ </div>
<div class="ui-popup-button-bg">
-<!-- <input type="button" value="Text Button" />
- <input type="button" value="Text Button" />-->
- <div data-role="button" data-inline="true">Cancel</div>
- <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="button" data-inline="true">Button1</div>
+ <div data-role="button" data-inline="true">Button2</div>
</div>
</div>
- <!-- popup title+text+3button -->
+ <!-- Center title 3 button popup -->
<div id="center_title_3btn" data-role="popup" class="center_title_3btn">
- <p class="ui-popup-title">
- Popup title
- </p>
- <p class="ui-popup-text">
+ <div class="ui-popup-title">
+ <h1>Popup title</h1>
+ </div>
+ <div class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
- </p>
+ </div>
<div class="ui-popup-button-bg">
-<!-- <input type="button" value="Button1" />
- <input type="button" value="Button2" />
- <input type="button" value="Button3" />-->
- <div data-role="button" data-inline="true">Cancel</div>
- <div data-role="button" data-inline="true">Cancel</div>
- <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="button" data-inline="true">Button1</div>
+ <div data-role="button" data-inline="true">Button2</div>
+ <div data-role="button" data-inline="true">Button3</div>
</div>
</div>
- <!-- popup center_button_vertical -->
+ <!-- Center button vertical -->
<div id="center_button_vertical" data-role="popup" class="center_button_vertical">
- <p class="ui-popup-text">
+ <div class="ui-popup-text">
File 01.jpg
already in use
- </p>
+ </div>
<div class="ui-popup-button-bg">
- <input type="button" value="Replace" />
- <input type="button" value="Rename" />
- <input type="button" value="Cancel" />
+ <div data-role="button" data-inline="true">Rename</div>
+ <div data-role="button" data-inline="true">Replace</div>
+ <div data-role="button" data-inline="true">Cancel</div>
</div>
</div>
<!-- popup checkbox -->
<div id="center_checkbox" data-role="popup" class="center_checkbox">
- <p class="ui-popup-text">
+ <div class="ui-popup-text">
Use packet data must
be enabled to access
data service.
Change settings?
- </p>
+ </div>
<div class="ui-popup-check-bg">
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">Don't ask again</label>
</div>
<div class="ui-popup-button-bg">
- <input type="button" value="Text" />
- <input type="button" value="Text" />
+ <div data-role="button" data-inline="true">Rename</div>
+ <div data-role="button" data-inline="true">Replace</div>
</div>
</div>
<!-- popup liststyle 1 button -->
<div id="center_liststyle_1btn" data-role="popup" class="center_liststyle_1btn">
- <p class="ui-popup-title">
- Popup title
- </p>
+ <div class="ui-popup-title">
+ <h1>Popup title</h1>
+ </div>
<div class="ui-popup-scroller-bg" data-scroll="y">
<ul data-role="listview" data-icon="1line-textonly">
<li><a href="#">List item 1</a></li>
</ul>
</div>
<div class="ui-popup-button-bg">
- <input type="button" value="Text Button" />
+ <div data-role="button" data-inline="true">Cancel</div>
</div>
</div>
<!-- popup liststyle 2 button -->
<div id="center_liststyle_2btn" data-role="popup" class="center_liststyle_2btn">
- <p class="ui-popup-title">
- Popup title
- </p>
+ <div class="ui-popup-title">
+ <h1>Popup title</h1>
+ </div>
<div class="ui-popup-scroller-bg" data-scroll="y">
<ul data-role="listview" data-icon="1line-textonly">
<li><a href="#">List item 1</a></li>
</ul>
</div>
<div class="ui-popup-button-bg">
- <input type="button" value="Text Button" />
- <input type="button" value="Text Button" />
+ <div data-role="button" data-inline="true">Ok</div>
+ <div data-role="button" data-inline="true">Cancel</div>
</div>
</div>
<!-- popup liststyle 3 button -->
<div id="center_liststyle_3btn" data-role="popup" class="center_liststyle_3btn">
- <p class="ui-popup-title">
- Popup title
- </p>
+ <div class="ui-popup-title">
+ <h1>Popup title</h1>
+ </div>
<div class="ui-popup-scroller-bg" data-scroll="y">
<ul data-role="listview" data-icon="1line-textonly">
<li><a href="#">List item 1</a></li>
</ul>
</div>
<div class="ui-popup-button-bg">
- <input type="button" value="Button" />
- <input type="button" value="Button" />
- <input type="button" value="Button" />
+ <div data-role="button" data-inline="true">Rename</div>
+ <div data-role="button" data-inline="true">Replace</div>
+ <div data-role="button" data-inline="true">Cancel</div>
</div>
</div>
--- /dev/null
+From cde0eff7f9903134b8f097c8c08069ccc65c1ae8 Mon Sep 17 00:00:00 2001
+From: Minkyu Kang <mk7.kang@samsung.com>
+Date: Wed, 14 Nov 2012 14:24:31 +0900
+Subject: [PATCH] JQM: checkbox: set focus when click the checkbox
+
+Change-Id: Id0e8cb7c177a03f98611fdc0dc2046f4bfacefa0
+Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
+---
+ .../js/jquery.mobile.forms.checkboxradio.js | 1 +
+ 1 file changed, 1 insertion(+)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.checkboxradio.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.checkboxradio.js
+index 08556cf..60bcb38 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.checkboxradio.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.forms.checkboxradio.js
+@@ -175,6 +175,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
+ if ( this.checked || self.inputtype === "checkbox" ) {
+ $this.trigger( "change" );
+ }
++ $this.focus();
+ })
+ .checkboxradio( "refresh" );
+ },
+--
+1.7.9.5
+
Name: web-ui-fw
-Version: 0.1.61
+Version: 0.1.62
Release: 0
Summary: Tizen Web UI Framework Library
Group: Development/Other
###############################
%changelog
+* Fri Nov 16 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.62
+- FIX:
+ - Many winsets: Fix layout
+ - Footer: fix position to bottom
+- Spec changes:
+ - Remove color widgets
+
* Fri Nov 09 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.61
- FIX:
- Many widgets: New UX 0.6 theme implementation
.tizen-icon-common
{
/* Overlap original property */
- width: 64 * @unit_base; height: 64 * @unit_base;
+ width: 32 * @unit_base; height: 32 * @unit_base;
/* margin-top : 50 */
/* top : -32 * @unit_base; */
}
text-align: left;
}
.ui-btn.ui-btn-icon-left {
- display: block;
+ display: inline-block;
.ui-btn-inner {
min-width: 40*@unit_base; // TODO: check this after layout done.
display: inline-block;
}\r
textarea.ui-input-text {\r
height: 50*@unit_base;\r
+ resize: none;\r
-webkit-transition: height 200ms linear;\r
-moz-transition: height 200ms linear;\r
-o-transition: height 200ms linear;\r
&.ui-li-static {
padding-top : 15 * @unit_base;
padding-bottom : 15 * @unit_base;
-/* padding-left : 13 * @unit_base;
- padding-right : 13 * @unit_base;*/
display: block;
white-space: normal; // default: 1line
}
.ui-toggleswitch.ui-toggleswitch-image-style {
&:last-child {
- margin-top : -22 * @unit_base;
+ margin-top : -17 * @unit_base;
right : 0px;
}
height : 30 * @unit_base;
.ui-btn-inner {
- padding : 5 * @unit_base 5 * @unit_base 5 * @unit_base 5 * @unit_base;
line-height : 20 * @unit_base;
color : transparent;
left : 5 * @unit_base;
}
}
+
+ label.ui-btn-icon_only {
+ top : 0px;
+ margin-top : 0px;
+ }
}
}
height: 38 * @unit_base;
+ font-size : @list-font-size-divider;
+ &>.ui-btn-inner>.ui-btn-text { // For buttonMarkup-ed dividers
+ font-size : @list-font-size-divider;
+ }
&.ui-btn {
top : 0px;
margin-top: 0 * @unit_base;
border-radius : 0px;
- font-size : 16 * @unit_base;
+ font-size : @list-font-size-divider;
.ui-btn-inner.ui-btn-hastxt {
height : 100%;
padding-left : 0px;
}
}
+.ui-li-has-multiline.ui-li-has-right-btn.ui-li-has-thumb {
+ .ui-btn-inner a {
+ .ui-li-text-sub {
+ width : 64%;
+ }
+ }
+}
+
.ui-li-has-multiline.ui-li-static.ui-li-has-right-btn {
.ui-li-text-sub {
width : 74%;
}
}
+.ui-li-has-multiline.ui-li-static.ui-li-has-right-btn.ui-li-has-thumb {
+ .ui-li-text-sub {
+ width : 64%;
+ }
+}
+
.ui-li-icon-sub-right,
.ui-li-icon-sub {
position: absolute;
border-style : solid;
border-color : @color_dialogue_border_right;
border-width : 1px;
-/* border-top-width : 0px;*/
+
+ > .ui-btn-inner {
+ margin-left : 0px;
+ margin-right : 0px;
+
+ }
&:first-child {
border-top-width : 1px;
border-bottom-left-radius : 3px;
border-bottom-right-radius : 3px;
}
+
+ > img {
+ margin-left : 6 * @unit_base;
+ }
+
+ [data-role="button"]:last-child {
+ margin-right : 10 * @unit_base;
+ }
}
&> li.ui-li-dialogue.ui-body-s,
}
// Expandable list animation
-
-@-webkit-keyframes ui-expand-show {
- from {
- -webkit-transform-origin: 0% 0%;
- -webkit-transform: rotateX(90deg) skewX(30deg) translateZ(0);
- } to {
- -webkit-transform-origin: 0% 0%;
- -webkit-transform: rotateX(0deg) skewX(0deg) translateZ(0);
- }
-}
.ui-listview {
&> .ui-li-expanded {
background-color: @color_list_expandable_expanded_bg;
}
.ui-li-expand-transition-show {
visibility: visible;
- -webkit-animation: ui-expand-show 0.4s 1 ease-out;
+ -webkit-transition: all 0.2s ease;
+ -moz-transition: all 0.2s ease;
+ -o-transition: all 0.2s ease;
+ -ms-transition: all 0.2s ease;
+ transition: all 0.2s ease;
}
.ui-li-expand-transition-hide {
visibility: hidden;
min-height: 0px !important;
padding-top: 0px;
padding-bottom: 0px;
- border: 0px;
+ border-top: 0px !important;
+ border-bottom: 0px !important;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
.ui-footer.ui-bar-s {
height : 49 * @unit_base;
text-align : center;
-
+ bottom : 0px;
>.ui-btn.ui-btn-back,
>[data-icon="naviframe-more"] {
background : transparent;
+ >.ui-btn-icon-only {
+ width : 56 * @unit_base;
+ height : 49 * @unit_base;
+ padding : 0px;
+ -webkit-box-shadow : none /* temp code */
+ }
.ui-btn-footer-right .ui-btn-icon-only .ui-icon {
left : 8 * @unit_base;
}
.ui-btn-inner {
border: none;
background: transparent;
+ box-shadow: none;
}
}
.ui-br {
}
.ui-btn-box-s {
- padding: 1px;
+ padding: 1 * @unit_base;
}
.ui-btn-box-s.ui-btn-up-s {
.LESSbutton_box_style;
color: white !important;
.LESSborder-radius-all( 0 );
}
+ .ui-btn-inner {
+ background: transparent ! important;
+ box-shadow: none;
+ border: none;
+ }
}
.ui-ctxpopup .ui-btn-down-s {
font-weight: normal;
.LESSborder-radius-all( 0.9 rem );
}
-/*
+
.ui-btn-box-s.ui-btn-hover-s {
.LESSbutton_hover_style;
.LESSbutton_text1_style;
}
-
+/*
.ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle{
.LESScirclebutton_hover_style;
}
color : rgba(153, 153, 153, 1);
.ui-icon {
- width: 32 * @unit_base;
+ width: 32 * @unit_base;
height: 32 * @unit_base;
background-repeat: no-repeat;
- background-size: 100% 100%;
+ background-size: 100% 100%;
}
}
- a.ui-btn.ui-btn-active {
- color : rgba(59, 115, 182, 1);
+ &.ui-controlbar-persist {
+ a.ui-btn {
+ background: @color_bg;
+ }
+ a.ui-state-persist, a.ui-state-persist.ui-btn-active, a.ui-btn-show-style {
+ background: @color_controlbar_btn_press;
+ color : rgba(59, 115, 182, 1);
+ }
+ a.ui-btn-hover-s.ui-btn-down-s {
+ &:not(.ui-state-persist) {
+ color : rgba(59, 115, 182, 1);
+ background: @color_controlbar_btn_press;
+ }
+ }
}
-/* move concept strange */
- a.ui-btn.ui-btn-active {
- background : -webkit-linear-gradient(top, rgba(169,165,151,1) 0%,rgba(246,248,239,1) 100%);
-
+ &:not(.ui-controlbar-persist) {
+ a.ui-btn {
+ background: @color_bg;
+ }
+ a.ui-btn-active, .ui-btn-show-style,
+ a.ui-btn.ui-btn-hover-s.ui-btn-down-s {
+ color : rgba(59, 115, 182, 1);
+ background: @color_controlbar_btn_press;
+ }
}
.ui-btn-inner {
padding-top : 44 * @unit_base;
padding-bottom : 3 * @unit_base;
-
+
font-size : 15 * @unit_base;
font-weight : bold;
.ui-icon {
top : 10 * @unit_base;
-
left : 50%;
margin-left : -16 * @unit_base;
}
}
-
-/* .ui-ctrl-btn-style {
- width : 196 * @unit_base;
- }*/
+
&.ui-controlbar-noicons {
.ui-btn-inner {
padding-top : 19 * @unit_base;
padding-bottom : 18 * @unit_base;
}
}
-
+
&.ui-controlbar-notext {
.ui-btn-inner {
padding-top : 50 * @unit_base;
padding-bottom : 5 * @unit_base;
-
+
.ui-icon {
top : 11 * @unit_base;
}
padding-bottom : 0 * @unit_base;
}
}
-
+
&.ui-portrait-controlbar {
height : 47 * @unit_base;
}
-
+
&.ui-landscape-controlbar {
height : 40 * @unit_base;
}
.ui-controlbar.ui-controlbar-margin-more {
margin-left : 56 * @unit_base;
}
-
+
}
.ui-controlbar-s.ui-navbar-noicons {
.ui-btn-down-s, .ui-btn-hover-s, .ui-btn-active {
.ui-icon-ctrl-edit { background-image: url(images/controlbar/00_ctrl_edit_press.png); }
-}
\ No newline at end of file
+}
+
}
.ui-listview {
- min-width: 386 * @unit_base;
max-width: 620 * @unit_base;
- border: none;
+ border: none;
}
.ui-listview > .ui-li {
border-bottom-color: @color_ctxpopup_border_bottom;
border-top-width: 1px;
border-top-color: @color_ctxpopup_border_top;
- padding: 0 10 * @unit_base;
margin-left: 0;
margin-right: 0;
&:first-child, &:last-child {
border-top-width: 0px;
}
+ .ui-btn-inner {
+ margin: 0;
+ padding-left: 10 * @unit_base;
+ padding-right: 10 * @unit_base;
+ }
}
.ui-listview li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit, .ui-listview li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit, .ui-listview li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit {
}
.text {
- padding: 0 20 * @unit_base;
- min-width: 96 * @unit_base;
+ padding: 0 10 * @unit_base;
+ min-width: 48 * @unit_base;
}
.button {
table .ui-btn {
- margin: 8 * @unit_base;
+ margin: 0 * @unit_base;
padding: 0;
- height: 74 * @unit_base;
- width: 172 * @unit_base;
+ height: 56 * @unit_base;
+ width: 132 * @unit_base;
}
}
float: right;
.ui-btn-inner {
- padding: 0.2rem 0 0 0;
+ padding: 0.15rem 0 0 0;
+
height: 28 * @unit_base;
width: 77 * @unit_base;
+
font-size: 0.81rem;
+ color: @color_ticker_text1;
+
+ background: @color_ticker_btn;
+
+ border: 1px;
+ border-color: @color_ticker_btn_border;
+ box-shadow: 0 0 1px 1px @color_ticker_btn_border;
+ }
+
+ .ui-btn-box-s.ui-btn-up-s {
+ background: @color_ticker_btn;
+ box-shadow: 0 0 1px 1px @color_ticker_btn_border;
+ border-color: @color_ticker_btn_border;
+ }
+
+ .ui-btn-box-s.ui-btn-hover-s {
background: @color_ticker_btn;
+ box-shadow: 0 0 1px 1px @color_ticker_btn_border;
+ border-color: @color_ticker_btn_border;
}
}
@import "config.less";
-/* Resource color mapping table
-
-@color_popup_title_bg: popup_title_bg.png
-@color_popup_text_bg: popup_bg.png
-@color_popup_button_bg: popup_button_bg.png
-@color_popup_font: Popup title & default
-@color_popup_text_font: Popup text
-
-*/
-
-
@popup-text-padding-vert: 22 * @unit_base;
@popup-text-padding-hori: 16 * @unit_base;
@popup-ratio: 86.12%;
.ui-popup-container {
position: absolute;
width: @popup-ratio;
- color: @color_popup_font;
z-index: (@z_base_popup + 1) !important;
background: @color_popup_text_bg;
-
- .ui-body-s {
- background: none;
+ text-align: center;
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ .ui-popup {
+ padding : 3px 2px 2px 2px;
+ background: @color_popup_text_bg;
+ width : 100%;
+ > .ui-popup-title,
+ > .ui-popup-text,
+ > .ui-popup-button-bg {
+ width : 100%;
+ }
}
- // --------- common style in popup ------------- //
.ui-popup-title {
width: 100%;
- height: 100%;
+ height: 40 * @unit_base;
+ text-align : left;
+ color : @color_bar_title_text;
+
font-size: @font_size_popup_basic_style_title;
font-weight : bold;
- color : @color_bar_title_text;
-
- text-align : left;
-
- }
- p.ui-popup-title {
- color: @color_bar_title_text;
- margin: 0*@unit_base 0*@unit_base;
- margin-left : 16 * @unit_base;
- padding: 13*@unit_base 0*@unit_base;
+ h1 {
+ font-size: @font_size_popup_basic_style_title;
+ font-weight : bold;
+ color : @color_bar_title_text;
+
+ margin : 0px;
+ padding-top : 10 * @unit_base;
+ padding-left : 16 * @unit_base;
+ }
}
.ui-popup-text {
margin-top: @popup-text-padding-vert;
margin-bottom: @popup-text-padding-vert;
color: @color_popup_text_font;
- font-size: @font_size_popup_info_style;
+ font-size: 20 * @unit_base;
background: @color_popup_text_bg;
text-align: center;
- }
.ui-li .ui-radio, .ui-li .ui-checkbox {
label {
background : transparent;
}
}
-
- .ui-popup-button-bg {
- .ui-btn-inner {
- padding-top: 5 * @unit_base;
- padding-bottom: 5 * @unit_base;
- padding-left : 20 * @unit_base;
- padding-right : 20 * @unit_base;
- }
- }
-
-
-
- // ----------------------------------------------------- //
-
- .center_info {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- // .ui-popup-text
- }
-
- .center_title {
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
}
- .center_basic_1btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-text
-
- .ui-popup-button-bg {
+ .ui-popup-button-bg {
font-size: @font_size_popup_button_text;
+ height : 37 * @unit_base;
+ padding-top: 10 * @unit_base;
+ padding-bottom: 10 * @unit_base;
width: 100%;
- height : 57 * @unit_base;
- .ui-btn-inner {
- padding-top: 5 * @unit_base;
- padding-bottom: 5 * @unit_base;
- padding-left : 20 * @unit_base;
- padding-right : 20 * @unit_base;
- }
vertical-align: middle;
- .ui-btn {
+ > .ui-btn {
+ display : inline-block;
margin:auto;
+ height : 37 * @unit_base;
}
- }
- }
- .center_basic_2btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-text
- .ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
- height : 57 * @unit_base;
.ui-btn-inner {
padding-top: 5 * @unit_base;
padding-bottom: 5 * @unit_base;
padding-left : 20 * @unit_base;
padding-right : 20 * @unit_base;
- }
- vertical-align: middle;
-
- .ui-btn {
- height: 37*@unit_base;
- width : 200 * @unit_base;
- top : 5 * @unit_base;
- margin-top: 0*@unit_base;
- margin-bottom: 0*@unit_base;
- margin-left: 5*@unit_base;
- margin-right: 5*@unit_base;
-
- display: inline-block;
- }
- }
- }
- .center_basic_3btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-text
-
- .ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
- padding-top: 11*@unit_base;
- padding-bottom: 11*@unit_base;
- vertical-align: middle;
-
- .ui-btn {
- width: 186*@unit_base;
- height: 37*@unit_base;
- margin-top: 0*@unit_base;
- margin-bottom: 0*@unit_base;
- margin-left: 5*@unit_base;
- margin-right: 5*@unit_base;
-
- display: inline-block;
- }
}
}
- .center_title_1btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-title
- // .ui-popup-text
-
- .ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
- padding-top: 11*@unit_base;
- padding-bottom: 11*@unit_base;
- vertical-align: middle;
- text-align : center;
-
- .ui-btn {
- width: 402*@unit_base;
- height: 37*@unit_base;
- margin:auto;
-
- }
- }
- }
- .center_title_2btn {
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
- text-align: center;
-
- // .ui-popup-title
- // .ui-popup-text
-
- .ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
-/* background: @color_popup_button_bg;*/
- width: 100%;
- padding-top: 11*@unit_base;
- padding-bottom: 11*@unit_base;
- vertical-align: middle;
-
- .ui-btn {
- width: 130*@unit_base;
- height: 37*@unit_base;
- margin-top: 0*@unit_base;
- margin-bottom: 0*@unit_base;
- margin-left: 5*@unit_base;
- margin-right: 5*@unit_base;
- .ui-btn-inner {
- padding-top: 5 * @unit_base;
- padding-bottom: 5 * @unit_base;
- padding-left : 20 * @unit_base;
- padding-right : 20 * @unit_base;
- }
- display: inline-block;
- }
- }
- }
+/***** Normal Samples *****/
+ .center_info,
+ .center_title,
+ .center_basic_1btn,
+ .center_basic_2btn,
+ .center_basic_3btn,
+ .center_title_1btn,
+ .center_title_2btn,
.center_title_3btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-title
- // .ui-popup-text
-
- .ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
- padding-top: 11*@unit_base;
- padding-bottom: 11*@unit_base;
- vertical-align: middle;
-
- .ui-btn {
- width: 186*@unit_base;
- height: 37*@unit_base;
- margin-top: 0*@unit_base;
- margin-bottom: 0*@unit_base;
- margin-left: 5*@unit_base;
- margin-right: 5*@unit_base;
-
- display: inline-block;
- }
- }
}
- .center_button_vertical {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-text
+ .center_button_vertical {
.ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
- padding-top: 1px;
- padding-bottom: 16*@unit_base;
- vertical-align: middle;
-
+ display : block;
+ height : auto;
.ui-btn {
- width: 356*@unit_base;
- height: 37*@unit_base;
- margin-top: 16*@unit_base;
- margin-bottom: 0*@unit_base;
- margin-left: auto;
- margin-right: auto;
+ width: 200*@unit_base;
}
}
}
- .center_checkbox {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-text
+ .center_checkbox {
.ui-popup-check-bg {
- font-size: @font_size_popup_info_style;
+ font-size: 20 * @unit_base;
background: @color_popup_text_bg;
width: 100%;
padding-top: 0*@unit_base;
}
}
.center_liststyle_1btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-title
-
.ui-popup-scroller-bg {
width: 100%;
overflow: hidden;
height: 512*@unit_base;
}
.ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
- .ui-btn {
- width: 201*@unit_base;
- height: 37*@unit_base;
- margin:auto;
-
- }
}
}
.center_liststyle_2btn {
-
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-title
-
.ui-popup-scroller-bg {
width: 100%;
overflow: hidden;
height: 512*@unit_base;
}
.ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
}
}
}
- .center_liststyle_3btn {
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
-
- // .ui-popup-title
+ .center_title_2btn {
+ .ui-popup-button-bg {
+ .ui-btn {
+ width: 130*@unit_base;
+ }
+ }
+ }
+ .center_liststyle_3btn {
.ui-popup-scroller-bg {
width: 100%;
overflow: hidden;
height: 512*@unit_base;
}
.ui-popup-button-bg {
- font-size: @font_size_popup_button_text;
- background: @color_popup_button_bg;
- width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
.center_progressbar {
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
+ text-align: center;
.ui-popup-text {
font-size: @font_size_popup_center_progressbar_title;
.centertext_progressbar {
- .LESSdisplaybox();
- .LESSbox-orient(vertical);
- .LESSbox-align(center);
- .LESSbox-pack(center);
-
- text-align: center;
+ text-align: center;
.ui-popup-text {
font-size: @font_size_popup_center_progressbar_title;
height: 100%;
}
}
-
-/*
- .ui-btn{
- .LESSpopup_button_style;
- }
- .ui-btn.ui-btn-hover-s{
- .LESSpopup_button_hover_style;
- }
- .ui-btn.ui-btn-down-s{
- .LESSpopup_button_press_style;
- }*/
}
display: block;
top: 0;
width: 100%;
- height: 5 * @unit_base;
+ height: 10 * @unit_base;
opacity: 0;
background: -webkit-gradient(linear,
left bottom,
display: block;
bottom: 0;
width:100%;
- height: 5 * @unit_base;
+ height: 10 * @unit_base;
opacity: 0;
background: -webkit-gradient(linear,
left bottom,
position: absolute;
right: 0*@unit_base;
background-color: @color_shortcutscroll_rollover_bg;
- width: 30*@unit_base;
+ width: 25*@unit_base;
-ms-user-select: none;
-o-user-select: none;
-moz-user-select: none;
list-style-type: none;
margin: 0;
padding: 0;
+
}
li {
cursor: pointer;
color: @color_shortcutscroll_rollover_text;
padding: 2*@unit_base 2*@unit_base 2*@unit_base 2*@unit_base;
- text-align: right;
+ text-align: center;
+ font-size : 16 * @unit_base;
+ font-weight : bold;
+
+ border-left-width : 3 * @unit_base;
+ border-left-color : @color_shortcutscroll_popup_bg;
+ border-left-style : solid;
}
}
color: @color_shortcutscroll_rollover_text;
padding: 2*@unit_base 2*@unit_base 2*@unit_base 2*@unit_base;
text-align: right;
+
+
+
}
}
position: absolute;
right: 0*@unit_base;
background-color: @color_shortcutscroll_rollover_bg;
- width: 30*@unit_base;
+ width: 25 * @unit_base;
z-index: 10;
top: 0;
}
display:none;
box-sizing:border-box;
}
+
+li.ui-shortcutscroll-hover {
+ color : @color_shortcutscroll_popup_bg;
+}
+
+li.ui-shortcutscroll-hover,
+li.ui-shortcutscroll-hover-up,
+li.ui-shortcutscroll-hover-down {
+ background : @color_list_bg;
+
+ border-style : solid;
+ border-color : @color_shortcutscroll_popup_bg;
+ border-width : 0px;
+ border-right-width : 3 * @unit_base;
+ border-left-width : 1px;
+ border-left-color : @color_list_bg;
+}
+
+li.ui-shortcutscroll-hover-up {
+ border-top-width : 3 * @unit_base;
+}
+
+li.ui-shortcutscroll-hover-down {
+ border-bottom-width : 3 * @unit_base;
+}
padding-top: 7 * @unit_base;
.ui-toggleswitch-sign{
position: absolute;
- width: 44 * @unit_base;
- height: 44 * @unit_base;
+ width: 66 * @unit_base;
+ height: 35 * @unit_base;
/*left: 50%;*/
margin-left:-2px;
background: url(images/00_button_off.png) no-repeat;
text-align: center;
.ui-toggleswitch-sign{
position: absolute;
- width: 44 * @unit_base;
- height: 44 * @unit_base;
+ width: 66 * @unit_base;
+ height: 35 * @unit_base;
left: 50%;
margin-left:-7px;
background: url(images/00_button_on.png) no-repeat;
.ui-toggleswitch.ui-toggleswitch-image-style {
display : inline-block;
- width : 44 * @unit_base;
- height : 44 * @unit_base;
+ width : 66 * @unit_base;
+ height : 35 * @unit_base;
.ui-toggleswitch-mover {
.ui-toggleswitch-off,
.ui-toggleswitch-on {
background-image : none;
- height : 44 * @unit_base;
- width : 44 * @unit_base;
+ height : 66 * @unit_base;
+ width : 35 * @unit_base;
.ui-toggleswitch-img {
padding-top : 0px;
@color_bar_title_text : rgba(59, 115, 182, 1); /* #3b73b6 */ /* title text */
@color_bar_btn_press : rgba(0, 0, 0, 0.1);
+/***************** Controlbar *********************************/
+@color_controlbar_btn_press : -webkit-linear-gradient(top, rgba(169,165,151,1) 0%,rgba(246,248,239,1) 100%);
+
/***************** Body ***************************************/
@color_bg: rgb(248, 246, 239); // #F8F6EF // Main Background color
@color_text: rgb(0, 0, 0); // 0 0 0
@color_list_bubble_link_text: rgb(34, 129, 157);
+/****************** Shortcut Scroll *************************/
+@color_shortcutscroll_rollover_bg: rgba(230, 227, 216, 1); /* B0723 : 00_fast_scroll_rollover_bg.9.png */
+@color_shortcutscroll_rollover_text: rgba(160, 159, 154, 1); /* B0721 : Rollover text */
+@color_shortcutscroll_popup_bg: rgba(59, 115, 182, 1); /* B0731 : 00_fast_scroll_popup_bg.png */
+@color_shortcutscroll_popup_shadow: rgba(199, 199, 199, 0.5);
+@color_shortcutscroll_popup_text: rgba(255, 255, 255, 1); /* B0732 : Scroll popup text */
+
/***************** SearchBar(forms.textinput) *****************/
@color_searchbar_bg : rgba(248, 246, 239, 1);
@color_searchbar_default_text : rgba(121, 131, 138, 1); /* Search default text */
/***************** Popup **************************************/
@font_size_popup_info_style: 24 * @unit_base;
-@color_popup_text_bg: rgba(248, 246, 239, 1); /* B061L1 */
+@color_popup_text_bg: rgba(248, 246, 239, 1); /* B061L1 : Popop info */
/***************** Button *************************************/
font-size: 1.0rem;
font-style:normal;
color: @color_button_text_black;
- &:hover {color: @color_button_text_normal;}
}
.LESSbutton_hover_style{
@style_list_bubble_date_text_align: center;
-/***************************************************************************
- Shortcut Scroll
-***************************************************************************/
-@color_shortcutscroll_rollover_bg: none;
-@color_shortcutscroll_rollover_text: rgba(160, 172, 179, 1);
-@color_shortcutscroll_popup_bg: rgba(229, 229, 229, 1); // 00_fast_scroll_popup_bg.png
-@color_shortcutscroll_popup_shadow: rgba(199, 199, 199, 0.5);
-@color_shortcutscroll_popup_text: rgb(42, 137, 194);
/***************************************************************************
@color_popup_title_bg: rgba(80, 147, 182, 255); /* popup_title_bg.png */
@color_popup_button_bg: rgba(248, 246, 239, 1);
-@color_popup_font: white;
+@color_popup_font: rgba(248, 246, 239, 1); /* maybe not use only popupwindow*/
@color_popup_text_font: black;
@color_popup_buttonbg: rgb(84, 126, 153);
@color_controlbar_bg : transparent;
@color_controlbar_btn_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-@color_controlbar_btn_press : -webkit-linear-gradient(top, rgb(61,121,150) 0%,rgb(48,91,118) 100%);
+
@color_border_top : rgba(255, 255, 255, 0.5);
@color_border_bottom : rgba(0, 0, 0, 0.5);
@color_ticker_text1: rgb(255, 255, 255);
@color_ticker_text2: rgb(255, 255, 255);
@color_ticker_btn: rgb(64, 64, 64);
+@color_ticker_btn_border: rgb(50, 50, 50);
/***************************************************************************
+++ /dev/null
-/*
- *
- * This software is licensed under the MIT licence (as defined by the OSI at
- * http://www.opensource.org/licenses/mit-license.php)
- *
- * ***************************************************************************
- * Copyright (C) 2011 by Intel Corporation Ltd.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software" ),
- * to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the
- * Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * DEALINGS IN THE SOFTWARE.
- * ***************************************************************************
- */
-
-(function ( $, undefined ) {
-
- $.widget( "tizen.colorwidget", $.tizen.widgetex, {
- options: {
- color: "#ff0972"
- },
-
- _value: {
- attr: "data-" + ( $.mobile.ns || "" ) + "color",
- signal: "colorchanged"
- },
-
- _getElementColor: function ( el, cssProp ) {
- return el.jqmData( "clr" );
- },
-
- _setElementColor: function ( el, hsl, cssProp ) {
- var clrlib = $.tizen.colorwidget.clrlib,
- clr = clrlib.RGBToHTML( clrlib.HSLToRGB( hsl ) ),
- dclr = clrlib.RGBToHTML( clrlib.HSLToGray( hsl ) );
-
- el.jqmData( "clr", clr );
- el.jqmData( "dclr", dclr );
- el.jqmData( "cssProp", cssProp );
- el.attr( "data-" + ( $.mobile.ns || "" ) + "has-dclr", true );
- el.css( cssProp, this.options.disabled ? dclr : clr );
-
- return { clr: clr, dclr: dclr };
- },
-
- _displayDisabledState: function ( toplevel ) {
- var self = this,
- sel = ":jqmData(has-dclr='true')",
- dst = toplevel.is( sel ) ? toplevel : $([]),
- el;
-
- dst.add( toplevel.find( sel ) )
- .each( function () {
- el = $( this );
- el.css( el.jqmData( "cssProp" ), el.jqmData( self.options.disabled ? "dclr" : "clr" ) );
- } );
- },
- _isValidColorCode: function( value ) {
- return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test( value );
- },
- _setColor: function ( value ) {
- var currentValue = ( this.options.color ),
- self = this;
-
- if( !self._isValidColorCode( value ) )
- {
- console.log( " Color code is invalid " );
- value = "#000000";
- }
-
- value = value.match(/#[0-9A-Fa-f]{6}/)
- ? value
- : currentValue.match(/#[0-9A-Fa-f]{6}/)
- ? currentValue
- : $.tizen.colorwidget.prototype.options.color;
-
- if ( this.options.color !== value ) {
- this.options.color = value;
- this._setValue( value );
- return true;
- }
- return false;
- }
- } );
-
- $.tizen.colorwidget.clrlib = {
- nearestInt: function ( val ) {
- var theFloor = Math.floor( val );
-
- return ( ( ( val - theFloor ) > 0.5 ) ? ( theFloor + 1 ) : theFloor );
- },
-
- // Converts html color string to rgb array.
- //
- // Input: string clr_str, where
- // clr_str is of the form "#aabbcc"
- //
- // Returns: [ r, g, b ], where
- // r is in [0, 1]
- // g is in [0, 1]
- // b is in [0, 1]
- HTMLToRGB: function ( clr_str ) {
- clr_str = ( ( '#' == clr_str.charAt( 0 ) ) ? clr_str.substring( 1 ) : clr_str );
-
- return [ parseInt(clr_str.substring(0, 2), 16) / 255.0,
- parseInt(clr_str.substring(2, 4), 16) / 255.0,
- parseInt(clr_str.substring(4, 6), 16) / 255.0 ];
- },
-
- // Converts rgb array to html color string.
- //
- // Input: [ r, g, b ], where
- // r is in [0, 1]
- // g is in [0, 1]
- // b is in [0, 1]
- //
- // Returns: string of the form "#aabbcc"
- RGBToHTML: function ( rgb ) {
- var ret = "#", val, theFloor,
- Nix;
- for ( Nix in rgb ) {
- val = rgb[Nix] * 255;
- theFloor = Math.floor( val );
- val = ( ( val - theFloor > 0.5 ) ? ( theFloor + 1 ) : theFloor );
- ret = ret + ( ( ( val < 16 ) ? "0" : "" ) + ( val & 0xff ).toString( 16 ) );
- }
-
- return ret;
- },
-
- // Converts hsl to rgb.
- //
- // From http://130.113.54.154/~monger/hsl-rgb.html
- //
- // Input: [ h, s, l ], where
- // h is in [0, 360]
- // s is in [0, 1]
- // l is in [0, 1]
- //
- // Returns: [ r, g, b ], where
- // r is in [0, 1]
- // g is in [0, 1]
- // b is in [0, 1]
- HSLToRGB: function ( hsl ) {
- var h = hsl[0] / 360.0, s = hsl[1], l = hsl[2],
- temp1,
- temp2,
- temp3,
- ret;
-
- if ( 0 === s ) {
- return [ l, l, l ];
- }
-
- temp2 = ( ( l < 0.5 )
- ? l * ( 1.0 + s )
- : l + s - l * s);
-
- temp1 = 2.0 * l - temp2;
- temp3 = {
- r: h + 1.0 / 3.0,
- g: h,
- b: h - 1.0 / 3.0
- };
-
- temp3.r = ( ( temp3.r < 0 ) ? ( temp3.r + 1.0 ) : ( ( temp3.r > 1 ) ? ( temp3.r - 1.0 ) : temp3.r ) );
- temp3.g = ( ( temp3.g < 0 ) ? ( temp3.g + 1.0 ) : ( ( temp3.g > 1 ) ? ( temp3.g - 1.0 ) : temp3.g ) );
- temp3.b = ( ( temp3.b < 0 ) ? ( temp3.b + 1.0 ) : ( ( temp3.b > 1 ) ? ( temp3.b - 1.0 ) : temp3.b ) );
-
- ret = [( ( ( 6.0 * temp3.r ) < 1 ) ? ( temp1 + ( temp2 - temp1 ) * 6.0 * temp3.r ) :
- ( ( ( 2.0 * temp3.r ) < 1 ) ? temp2 :
- ( ( ( 3.0 * temp3.r ) < 2 ) ? ( temp1 + ( temp2 - temp1 ) * ( ( 2.0 / 3.0 ) - temp3.r ) * 6.0 ) :
- temp1) ) ),
- ( ( ( 6.0 * temp3.g ) < 1) ? ( temp1 + ( temp2 - temp1 ) * 6.0 * temp3.g ) :
- ( ( ( 2.0 * temp3.g ) < 1 ) ? temp2 :
- ( ( ( 3.0 * temp3.g ) < 2 ) ? ( temp1 + ( temp2 - temp1 ) * ( ( 2.0 / 3.0 ) - temp3.g ) * 6.0 ) :
- temp1 ) ) ),
- ( ( ( 6.0 * temp3.b ) < 1 ) ? ( temp1 + ( temp2 - temp1 ) * 6.0 * temp3.b ) :
- ( ( ( 2.0 * temp3.b ) < 1 ) ? temp2 :
- ( ( ( 3.0 * temp3.b ) < 2 ) ? ( temp1 + ( temp2 - temp1 ) * ( ( 2.0 / 3.0 ) - temp3.b ) * 6.0 ) :
- temp1 ) ) )];
-
- return ret;
- },
-
- // Converts hsv to rgb.
- //
- // Input: [ h, s, v ], where
- // h is in [0, 360]
- // s is in [0, 1]
- // v is in [0, 1]
- //
- // Returns: [ r, g, b ], where
- // r is in [0, 1]
- // g is in [0, 1]
- // b is in [0, 1]
- HSVToRGB: function ( hsv ) {
- return $.tizen.colorwidget.clrlib.HSLToRGB( $.tizen.colorwidget.clrlib.HSVToHSL( hsv ) );
- },
-
- // Converts rgb to hsv.
- //
- // from http://coecsl.ece.illinois.edu/ge423/spring05/group8/FinalProject/HSV_writeup.pdf
- //
- // Input: [ r, g, b ], where
- // r is in [0, 1]
- // g is in [0, 1]
- // b is in [0, 1]
- //
- // Returns: [ h, s, v ], where
- // h is in [0, 360]
- // s is in [0, 1]
- // v is in [0, 1]
- RGBToHSV: function ( rgb ) {
- var min, max, delta, h, s, v, r = rgb[0], g = rgb[1], b = rgb[2];
-
- min = Math.min( r, Math.min( g, b ) );
- max = Math.max( r, Math.max( g, b ) );
- delta = max - min;
-
- h = 0;
- s = 0;
- v = max;
-
- if ( delta > 0.00001 ) {
- s = delta / max;
-
- if ( r === max ) {
- h = ( g - b ) / delta;
- } else {
- if ( g === max ) {
- h = 2 + ( b - r ) / delta;
- } else {
- h = 4 + ( r - g ) / delta;
- }
- }
- h *= 60;
-
- if ( h < 0 ) {
- h += 360;
- }
- }
-
- return [h, s, v];
- },
-
- // Converts hsv to hsl.
- //
- // Input: [ h, s, v ], where
- // h is in [0, 360]
- // s is in [0, 1]
- // v is in [0, 1]
- //
- // Returns: [ h, s, l ], where
- // h is in [0, 360]
- // s is in [0, 1]
- // l is in [0, 1]
- HSVToHSL: function ( hsv ) {
- var max = hsv[2],
- delta = hsv[1] * max,
- min = max - delta,
- sum = max + min,
- half_sum = sum / 2,
- s_divisor = ( ( half_sum < 0.5 ) ? sum : ( 2 - max - min ) );
-
- return [ hsv[0], ( ( 0 == s_divisor ) ? 0 : ( delta / s_divisor ) ), half_sum ];
- },
-
- // Converts rgb to hsl
- //
- // Input: [ r, g, b ], where
- // r is in [0, 1]
- // g is in [0, 1]
- // b is in [0, 1]
- //
- // Returns: [ h, s, l ], where
- // h is in [0, 360]
- // s is in [0, 1]
- // l is in [0, 1]
- RGBToHSL: function ( rgb ) {
- return $.tizen.colorwidget.clrlib.HSVToHSL( $.tizen.colorwidget.clrlib.RGBToHSV( rgb ) );
- },
-
- // Converts hsl to grayscale
- // Full-saturation magic grayscale values were taken from the Gimp
- //
- // Input: [ h, s, l ], where
- // h is in [0, 360]
- // s is in [0, 1]
- // l is in [0, 1]
- //
- // Returns: [ r, g, b ], where
- // r is in [0, 1]
- // g is in [0, 1]
- // b is in [0, 1]
- HSLToGray: function ( hsl ) {
- var intrinsic_vals = [0.211764706, 0.929411765, 0.71372549, 0.788235294, 0.070588235, 0.28627451, 0.211764706],
- idx = Math.floor(hsl[0] / 60),
- lowerHalfPercent,
- upperHalfPercent,
- begVal,
- endVal,
- val;
-
- // Find hue interval
- begVal = intrinsic_vals[idx];
- endVal = intrinsic_vals[idx + 1];
-
- // Adjust for lum
- if ( hsl[2] < 0.5 ) {
- lowerHalfPercent = hsl[2] * 2;
- begVal *= lowerHalfPercent;
- endVal *= lowerHalfPercent;
- } else {
- upperHalfPercent = ( hsl[2] - 0.5 ) * 2;
- begVal += ( 1.0 - begVal ) * upperHalfPercent;
- endVal += ( 1.0 - endVal ) * upperHalfPercent;
- }
-
- // This is the gray value at full sat, whereas hsl[2] is the gray value at 0 sat.
- val = begVal + ( ( endVal - begVal ) * ( hsl[0] - ( idx * 60 ) ) ) / 60;
-
- // Get value at hsl[1]
- val = val + ( hsl[2] - val ) * ( 1.0 - hsl[1] );
-
- return [val, val, val];
- }
- };
-
-}( jQuery ));
+++ /dev/null
-.tizen-huegradient {
- background: none; /* Old browsers */
- background: -webkit-gradient(linear, left top, right top,
- color-stop( 0% ,rgba(255, 0, 0,1)),
- color-stop( 16.666666667%,rgba(255,255, 0,1)),
- color-stop( 33.333333333%,rgba(0 ,255, 0,1)),
- color-stop( 50% ,rgba(0 ,255,255,1)),
- color-stop( 66.666666667%,rgba(0 , 0,255,1)),
- color-stop( 83.333333333%,rgba(255, 0,255,1)),
- color-stop(100% ,rgba(255, 0, 0,1))); /* Chrome,Safari4+ */
- background: -moz-linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
- background: -webkit-linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
- background: -o-linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
- background: -ms-linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
- background: linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
-}
-
-/* Full-saturation magic grayscale values were taken from the Gimp */
-.tizen-huegradient-disabled {
- background: none; /* Old browsers */
- background: -webkit-gradient(linear, left top, right top,
- color-stop( 0% ,rgba( 54, 54, 54,1)),
- color-stop( 16.666666667%,rgba(237,237,237,1)),
- color-stop( 33.333333333%,rgba(182,182,182,1)),
- color-stop( 50% ,rgba(201,201,201,1)),
- color-stop( 66.666666667%,rgba( 18, 18, 18,1)),
- color-stop( 83.333333333%,rgba( 73, 73, 73,1)),
- color-stop(100% ,rgba( 54, 54, 54,1))); /* Chrome,Safari4+ */
- background: -moz-linear-gradient(left,
- rgba( 54, 54, 54,1) 0%,
- rgba(237,237,237,1) 16.666666667%,
- rgba(182,182,182,1) 33.333333333%,
- rgba(201,201,201,1) 50%,
- rgba( 18, 18, 18,1) 66.666666667%,
- rgba( 73, 73, 73,1) 83.333333333%,
- rgba( 54, 54, 54,1) 100%);
- background: -webkit-linear-gradient(left,
- rgba( 54, 54, 54,1) 0%,
- rgba(237,237,237,1) 16.666666667%,
- rgba(182,182,182,1) 33.333333333%,
- rgba(201,201,201,1) 50%,
- rgba( 18, 18, 18,1) 66.666666667%,
- rgba( 73, 73, 73,1) 83.333333333%,
- rgba( 54, 54, 54,1) 100%);
- background: -o-linear-gradient(left,
- rgba( 54, 54, 54,1) 0%,
- rgba(237,237,237,1) 16.666666667%,
- rgba(182,182,182,1) 33.333333333%,
- rgba(201,201,201,1) 50%,
- rgba( 18, 18, 18,1) 66.666666667%,
- rgba( 73, 73, 73,1) 83.333333333%,
- rgba( 54, 54, 54,1) 100%);
- background: -ms-linear-gradient(left,
- rgba( 54, 54, 54,1) 0%,
- rgba(237,237,237,1) 16.666666667%,
- rgba(182,182,182,1) 33.333333333%,
- rgba(201,201,201,1) 50%,
- rgba( 18, 18, 18,1) 66.666666667%,
- rgba( 73, 73, 73,1) 83.333333333%,
- rgba( 54, 54, 54,1) 100%);
- background: linear-gradient(left,
- rgba( 54, 54, 54,1) 0%,
- rgba(237,237,237,1) 16.666666667%,
- rgba(182,182,182,1) 33.333333333%,
- rgba(201,201,201,1) 50%,
- rgba( 18, 18, 18,1) 66.666666667%,
- rgba( 73, 73, 73,1) 83.333333333%,
- rgba( 54, 54, 54,1) 100%);
-}
+++ /dev/null
-(function ( $, undefined ) {
-
- $.widget( "tizen.huegradient", $.tizen.widgetex, {
- _create: function () {
- this.element.addClass( "tizen-huegradient" );
- },
-
- // Crutches for IE: it is incapable of multi-stop gradients, so add multiple divs inside the given div, each with a
- // two-point gradient
- _IEGradient: function ( div, disabled ) {
- var rainbow = disabled
- ? ["#363636", "#ededed", "#b6b6b6", "#c9c9c9", "#121212", "#494949", "#363636"]
- : ["#ff0000", "#ffff00", "#00ff00", "#00ffff", "#0000ff", "#ff00ff", "#ff0000"],
- Nix;
-
- for (Nix = 0 ; Nix < 6 ; Nix++ ) {
- $( "<div></div>" )
- .css( {
- position: "absolute",
- width: ( 100 / 6 ) + "%",
- height: "100%",
- left: ( Nix * 100 / 6 ) + "%",
- top: "0px",
- filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr='" + rainbow[Nix] + "', endColorstr='" + rainbow[Nix + 1] + "', GradientType = 1)"
- } )
- .appendTo( div );
- }
- },
-
- _setDisabled: function ( value ) {
- $.Widget.prototype._setOption.call( this, "disabled", value );
- if ( $.mobile.browser.ie ) {
- this._IEGradient( this.element.empty(), value );
- }
- }
- } );
-}( jQuery ) );
+++ /dev/null
-( function ( $, undefined ) {
-
- $.widget( "todons.colorwidget", $.mobile.widget, {
- options: {
- color: "#ff0972"
- },
-
- _create: function () {
- $.extend ( this, {
- isInput: this.element.is( "input" )
- } );
-
- /* "value", if present, takes precedence over "data-color" */
- if ( this.isInput ) {
- if ( this.element.attr( "value" ).match(/#[0-9A-Fa-f]{6}/) ) {
- this.element.attr( "data-color", this.element.attr( "value" ) );
- }
- }
-
- $.mobile.todons.parseOptions( this, true );
- },
-
- _setOption: function ( key, value, unconditional ) {
- if ( undefined === unconditional ) {
- unconditional = false;
- }
-
- if ( key === "color" ) {
- this._setColor(value, unconditional);
- }
- },
-
- _setColor: function ( value, unconditional ) {
- if ( value.match(/#[0-9A-Fa-f]{6}/) && ( value != this.options.color || unconditional ) ) {
- this.options.color = value;
- this.element.attr( "data-color", value );
-
- if ( this.isInput ) {
- this.element.attr( "value", value );
- }
-
- this.element.triggerHandler( "colorchanged", value );
- return true;
- }
- return false;
- }
- } );
-
-}( jQuery ) );
+++ /dev/null
-/* TBD */
-/*
- * jQuery Mobile Widget @VERSION
- *
- * This software is licensed under the MIT licence (as defined by the OSI at
- * http://www.opensource.org/licenses/mit-license.php)
- *
- * ***************************************************************************
- * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
- * Copyright (c) 2011 by Intel Corporation Ltd.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software"),
- * to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the
- * Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * DEALINGS IN THE SOFTWARE.
- * ***************************************************************************
- *
- * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
- */
-
-// It displays a grid two rows by five columns of colors.
-//
-// The colors are automatically computed based on the hue
-// of the color set by the color attribute (see below).
-//
-// One of the displayed colors is the color attribute itself
-// and the others are multiples of 360/10 away from that color;
-// 10 is the total number of colors displayed (2 rows by 5 columns).
-//
-// To apply, add the attribute data-role="colorpalette" to a <div>
-// element inside a page. Alternatively, call colorpalette() on an
-// element.
-//
-// Options:
-//
-// color: String; initial color can be specified in html
-// using the data-color="#ff00ff" attribute or
-// when constructed in javascript, eg :
-// $("#mycolorpalette").colorpalette({ color: "#ff00ff" });
-// where the html might be :
-// <div id="mycolorpalette"></div>
-// The color can be changed post-construction like this :
-// $("#mycolorpalette").colorpalette("option", "color", "#ABCDEF");
-// Default: "#1a8039"
-
-/*
- * Colorpalette displays a grid two rows by five columns of colors.
- *
- * The colors are automatically computed based on the hue
- * of the color set by the color attribute (see below).
- *
- * One of the displayed colors is the color attribute itself
- * and the others are multiples of 360/10 away from that color;
- * 10 is the total number of colors displayed (2 rows by 5 columns).
- *
- * HTML attributes:
- *
- * To apply, add the attribute data-role="colorpalette" to a <div>
- * element inside a page. Alternatively, call colorpalette() on an
- * element.
- *
- * data-role: Myst have 'colorpalette'.
- * data-color: String; initial color can be specified in html
- * using the data-color="#ff00ff" attribute or
- * when constructed in javascript, eg :
- * $("#mycolorpalette").colorpalette({ color: "#ff00ff" });
- * where the html might be :
- * <div id="mycolorpalette"></div>
- * The color can be changed post-construction like this :
- * $("#mycolorpalette").colorpalette("option", "color", "#ABCDEF");
- * Default: "#1a8039"
- *
- *APIs:
- * $('obj').colorpalette() : Make an object to a colorpalette widget.
- *
- *Events:
- * No event.
- *
- *Examples:
- * <div data-role="colorpalette" data-color: "#ffffff"></div>
- *
- * <div id="toBeColorpalette"></div>
- * <script>
- * $("#toBeColorpalette").colorpalette({ color: "#ffffff" });
- * </script>
- *
- */
-
-( function ( $, undefined ) {
-
- $.widget( "tizen.colorpalette", $.tizen.colorwidget, {
- options: {
- showPreview: false,
- initSelector: ":jqmData(role='colorpalette')"
- },
-
- _htmlProto: {
- ui: {
- clrpalette: "#colorpalette",
- preview: "#colorpalette-preview",
- previewContainer: "#colorpalette-preview-container"
- }
- },
-
- _create: function () {
- var self = this;
-
- this.element
- .css( "display", "none" )
- .after( this._ui.clrpalette );
-
- this._ui.clrpalette.find( "[data-colorpalette-choice]" ).bind( "vclick", function ( e ) {
- var clr = $.tizen.colorwidget.prototype._getElementColor.call(this, $(e.target)),
- Nix,
- nChoices = self._ui.clrpalette.attr( "data-" + ( $.mobile.ns || "" ) + "n-choices" ),
- choiceId,
- rgbMatches;
-
- rgbMatches = clr.match(/rgb\(([0-9]*), *([0-9]*), *([0-9]*)\)/);
-
- if ( rgbMatches && rgbMatches.length > 3 ) {
- clr = $.tizen.colorwidget.clrlib.RGBToHTML( [
- parseInt(rgbMatches[1], 10) / 255,
- parseInt(rgbMatches[2], 10) / 255,
- parseInt(rgbMatches[3], 10) / 255] );
- }
-
- for ( Nix = 0 ; Nix < nChoices ; Nix++ ) {
- self._ui.clrpalette.find( "[data-colorpalette-choice=" + Nix + "]" ).removeClass( "colorpalette-choice-active" );
- }
-
- $(e.target).addClass( "colorpalette-choice-active" );
- $.tizen.colorwidget.prototype._setColor.call( self, clr );
- $.tizen.colorwidget.prototype._setElementColor.call( self, self._ui.preview, $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( clr ) ), "background" );
- } );
- },
-
- _setShowPreview: function ( show ) {
- if ( show ) {
- this._ui.previewContainer.removeAttr( "style" );
- } else {
- this._ui.previewContainer.css( "display", "none" );
- }
-
- this.element.attr( "data-" + ( $.mobile.ns || "" ) + "show-preview", show );
- this.options.showPreview = show;
- },
-
- widget: function ( value ) {
- return this._ui.clrpalette;
- },
-
- _setDisabled: function ( value ) {
- $.tizen.widgetex.prototype._setDisabled.call( this, value );
- this._ui.clrpalette[value ? "addClass" : "removeClass"]( "ui-disabled" );
- $.tizen.colorwidget.prototype._displayDisabledState.call( this, this._ui.clrpalette );
- },
-
- _setColor: function ( clr ) {
- if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
- clr = this.options.color;
-
- var Nix,
- activeIdx = -1,
- nChoices = this._ui.clrpalette.attr( "data-" + ( $.mobile.ns || "" ) + "n-choices" ),
- hsl = $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( clr ) ),
- origHue = hsl[0],
- offset = hsl[0] / 36,
- theFloor = Math.floor( offset ),
- newClr,
- currentlyActive;
-
- $.tizen.colorwidget.prototype._setElementColor.call( this, this._ui.preview,
- $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( clr ) ), "background" );
-
- offset = ( offset - theFloor < 0.5 )
- ? ( offset - theFloor )
- : ( offset - ( theFloor + 1 ) );
-
- offset *= 36;
-
- for ( Nix = 0 ; Nix < nChoices ; Nix++ ) {
- hsl[0] = Nix * 36 + offset;
- hsl[0] = ( ( hsl[0] < 0) ? ( hsl[0] + 360 ) : ( ( hsl[0] > 360 ) ? ( hsl[0] - 360 ) : hsl[0] ) );
-
- if ( hsl[0] === origHue ) {
- activeIdx = Nix;
- }
-
- newClr = $.tizen.colorwidget.clrlib.RGBToHTML( $.tizen.colorwidget.clrlib.HSLToRGB( hsl ) );
-
- $.tizen.colorwidget.prototype._setElementColor.call( this, this._ui.clrpalette.find( "[data-colorpalette-choice=" + Nix + "]" ),
- $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( newClr ) ), "background" );
- }
-
- if (activeIdx != -1) {
- currentlyActive = parseInt( this._ui.clrpalette.find( ".colorpalette-choice-active" ).attr( "data-" + ($.mobile.ns || "" ) + "colorpalette-choice" ), 10 );
- if ( currentlyActive != activeIdx ) {
- this._ui.clrpalette.find( "[data-colorpalette-choice=" + currentlyActive + "]" ).removeClass( "colorpalette-choice-active" );
- this._ui.clrpalette.find( "[data-colorpalette-choice=" + activeIdx + "]" ).addClass( "colorpalette-choice-active" );
- }
- }
- }
- }
- });
-
- $( document ).bind( "pagecreate create", function ( e ) {
- $( $.tizen.colorpalette.prototype.options.initSelector, e.target )
- .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
- .colorpalette();
- });
-
-}( jQuery ) );
\ No newline at end of file
+++ /dev/null
-@import "../../common/less/jquery.mobile.todons.defines.less";
-@colorpalette-choice-total-width: 54px;
-@colorpalette-choice-total-height: 54px;
-@colorpalette-item-border-width: 4px;
-@colorpalette-item-border-color: #c0c0c0;
-@colorpalette-preview-total-width: 304px;
-@colorpalette-preview-total-height: 109px;
-
-@colorpalette-choice-actual-width: @colorpalette-choice-total-width - 2 * @colorpalette-item-border-width;
-@colorpalette-choice-actual-height: @colorpalette-choice-total-height - 2 * @colorpalette-item-border-width;
-@colorpalette-preview-actual-width: @colorpalette-preview-total-width - 2 * @colorpalette-item-border-width;
-@colorpalette-preview-actual-height: @colorpalette-preview-total-height - 2 * @colorpalette-item-border-width;
-
-.todons-colorpalette-disabled {
- .colorpalette-table {
- .colorpalette-choice-active {
- border-color: @todons-selected-color-disabled !important;
- }
- }
-}
-
-.ui-colorpalette {
- display: table;
- padding-left: 24px;
- padding-right: 24px;
- padding-top: 15px;
- padding-bottom: 15px;
-
- .colorpalette-preview-container {
- padding-top: 48px;
- padding-bottom: 39px;
- display: table;
- margin: auto;
-
- .colorpalette-preview {
- display: table;
- margin: auto;
- width: @colorpalette-preview-actual-width;
- height: @colorpalette-preview-actual-height;
- border: @colorpalette-item-border-color @colorpalette-item-border-width solid;
- }
- }
-
- .colorpalette-table {
- .colorpalette-bottom-row {
- display: table-row;
- }
-
- .colorpalette-normal-row {
- .colorpalette-bottom-row;
- }
-
- .colorpalette-choice-container-left {
- display: table-cell;
- }
-
- .colorpalette-choice-container-rest {
- .colorpalette-choice-container-left;
- padding-left: 38px;
- }
-
- .colorpalette-normal-row .colorpalette-choice-container-left {
- padding-bottom: 16px;
- }
-
- .colorpalette-choice {
- width: @colorpalette-choice-actual-width;
- height: @colorpalette-choice-actual-width;
- border-width: @colorpalette-item-border-width;
- border-style: solid;
- border-color: @colorpalette-item-border-color;
- }
-
- .colorpalette-choice-active {
- border-color: @todons-selected-color;
- }
- }
-}
+++ /dev/null
-<div id="colorpalette" class="ui-colorpalette jquery-mobile-ui-widget" data-n-choices="10">
- <div class="colorpalette-preview-container" id="colorpalette-preview-container">
- <div id="colorpalette-preview" class="colorpalette-preview ui-corner-all"></div>
- </div>
- <div class="colorpalette-table">
- <div class="colorpalette-normal-row">
- <div class="colorpalette-choice-container-left">
- <div data-colorpalette-choice="0" class="colorpalette-choice ui-corner-all"></div>
- </div>
- <div class="colorpalette-choice-container-rest">
- <div data-colorpalette-choice="1" class="colorpalette-choice ui-corner-all"></div>
- </div>
- <div class="colorpalette-choice-container-rest">
- <div data-colorpalette-choice="2" class="colorpalette-choice ui-corner-all"></div>
- </div>
- <div class="colorpalette-choice-container-rest">
- <div data-colorpalette-choice="3" class="colorpalette-choice ui-corner-all"></div>
- </div>
- <div class="colorpalette-choice-container-rest">
- <div data-colorpalette-choice="4" class="colorpalette-choice ui-corner-all"></div>
- </div>
- </div>
- <div class="colorpalette-bottom-row">
- <div class="colorpalette-choice-container-left">
- <div data-colorpalette-choice="5" class="colorpalette-choice ui-corner-all"></div>
- </div>
- <div class="colorpalette-choice-container-rest">
- <div data-colorpalette-choice="6" class="colorpalette-choice ui-corner-all"></div>
- </div>
- <div class="colorpalette-choice-container-rest">
- <div data-colorpalette-choice="7" class="colorpalette-choice ui-corner-all"></div>
- </div>
- <div class="colorpalette-choice-container-rest">
- <div data-colorpalette-choice="8" class="colorpalette-choice ui-corner-all"></div>
- </div>
- <div class="colorpalette-choice-container-rest">
- <div data-colorpalette-choice="9" class="colorpalette-choice ui-corner-all"></div>
- </div>
- </div>
- </div>
-</div>
+++ /dev/null
-.ui-colorpicker .colorpicker-hs-container .sat-gradient {
- background: none; /* Old browsers */
- background: -webkit-gradient(linear, left top, left bottom,
- color-stop(0%,rgba(128,128,128,0)),
- color-stop(100%,rgba(128,128,128,1))); /* Chrome,Safari4+ */
- background: -moz-linear-gradient(top,
- rgba(128,128,128,0) 0%,
- rgba(128,128,128,1) 100%); /* FF3.6+ */
- background: -webkit-linear-gradient(top,
- rgba(128,128,128,0) 0%,
- rgba(128,128,128,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top,
- rgba(128,128,128,0) 0%,
- rgba(128,128,128,1) 100%); /* Opera11.10+ */
- background: -ms-linear-gradient(top,
- rgba(128,128,128,0) 0%,
- rgba(128,128,128,1) 100%); /* IE10+ */
- background: linear-gradient(top,
- rgba(128,128,128,0) 0%,
- rgba(128,128,128,1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#00808080', endColorstr="#808080", GradientType = 0);
-}
-
-.ui-colorpicker .colorpicker-l-container .l-gradient {
- background: none; /* Old browsers */
- background: -webkit-gradient(linear, left top, left bottom,
- color-stop(0%,rgba(0,0,0,1)),
- color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
- background: -moz-linear-gradient(top,
- rgba(0,0,0,1) 0%,
- rgba(255,255,255,1) 100%); /* FF3.6+ */
- background: -webkit-linear-gradient(top,
- rgba(0,0,0,1) 0%,
- rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top,
- rgba(0,0,0,1) 0%,
- rgba(255,255,255,1) 100%); /* Opera11.10+ */
- background: -ms-linear-gradient(top,
- rgba(0,0,0,1) 0%,
- rgba(255,255,255,1) 100%); /* IE10+ */
- background: linear-gradient(top,
- rgba(0,0,0,1) 0%,
- rgba(255,255,255,1) 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#000000', endColorstr="#ffffff", GradientType = 0);
-}
+++ /dev/null
-/*
- * jQuery Mobile Widget @VERSION
- *
- * This software is licensed under the MIT licence (as defined by the OSI at
- * http://www.opensource.org/licenses/mit-license.php)
- *
- * ***************************************************************************
- * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
- * Copyright (c) 2011 by Intel Corporation Ltd.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software"),
- * to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the
- * Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * DEALINGS IN THE SOFTWARE.
- * ***************************************************************************
- *
- * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
- */
-
-// Displays a 2D hue/saturation spectrum and a lightness slider.
-//
-// To apply, add the attribute data-role="colorpicker" to a <div>
-// element inside a page. Alternatively, call colorpicker()
-// on an element (see below).
-//
-//Options:
-// color: String; can be specified in html using the
-// data-color="#ff00ff" attribute or when constructed
-// $("#mycolorpicker").colorpicker({ color: "#ff00ff" });
-// where the html might be :
-// <div id="mycolorpicker"/>
-
-(function ( $, undefined ) {
-
- $.widget( "tizen.colorpicker", $.tizen.colorwidget, {
- options: {
- initSelector: ":jqmData(role='colorpicker')"
- },
-
- _htmlProto: {
- ui: {
- clrpicker: "#colorpicker",
- hs: {
- hueGradient: "#colorpicker-hs-hue-gradient",
- gradient: "#colorpicker-hs-sat-gradient",
- eventSource: "[data-event-source='hs']",
- valMask: "#colorpicker-hs-val-mask",
- selector: "#colorpicker-hs-selector"
- },
- l: {
- gradient: "#colorpicker-l-gradient",
- eventSource: "[data-event-source='l']",
- selector: "#colorpicker-l-selector"
- }
- }
- },
-
- _create: function () {
- var self = this;
-
- this.element
- .css( "display", "none" )
- .after( this._ui.clrpicker );
-
- this._ui.hs.hueGradient.huegradient();
-
- $.extend( self, {
- dragging: false,
- draggingHS: false,
- selectorDraggingOffset: {
- x : -1,
- y : -1
- },
- dragging_hsl: undefined
- } );
-
- $( document )
- .bind( "vmousemove", function ( event ) {
- if ( self.dragging ) {
- event.stopPropagation();
- event.preventDefault();
- }
- } )
- .bind( "vmouseup", function ( event ) {
- if ( self.dragging ) {
- self.dragging = false;
- }
- } );
-
- this._bindElements( "hs" );
- this._bindElements( "l" );
- },
-
- _bindElements: function ( which ) {
- var self = this,
- stopDragging = function ( event ) {
- self.dragging = false;
- event.stopPropagation();
- event.preventDefault();
- };
-
- this._ui[which].eventSource
- .bind( "vmousedown mousedown", function ( event ) { self._handleMouseDown( event, which, false ); } )
- .bind( "vmousemove" , function ( event ) { self._handleMouseMove( event, which, false ); } )
- .bind( "vmouseup" , stopDragging );
-
- this._ui[which].selector
- .bind( "vmousedown mousedown", function ( event ) { self._handleMouseDown( event, which, true); } )
- .bind( "touchmove vmousemove", function ( event ) { self._handleMouseMove( event, which, true); } )
- .bind( "vmouseup" , stopDragging );
- },
-
- _handleMouseDown: function ( event, containerStr, isSelector ) {
- var coords = $.mobile.tizen.targetRelativeCoordsFromEvent( event ),
- widgetStr = isSelector ? "selector" : "eventSource";
- if ( ( coords.x >= 0 && coords.x <= this._ui[containerStr][widgetStr].width() &&
- coords.y >= 0 && coords.y <= this._ui[containerStr][widgetStr].height() ) || isSelector ) {
- this.dragging = true;
- this.draggingHS = ( "hs" === containerStr );
-
- if ( isSelector ) {
- this.selectorDraggingOffset.x = coords.x;
- this.selectorDraggingOffset.y = coords.y;
- }
-
- this._handleMouseMove( event, containerStr, isSelector, coords );
- }
- },
-
- _handleMouseMove: function ( event, containerStr, isSelector, coords ) {
- var potential_h,
- potential_s,
- potential_l;
-
- if ( this.dragging &&
- !( ( this.draggingHS && containerStr === "l" ) ||
- ( !this.draggingHS && containerStr === "hs" ) ) ) {
- coords = ( coords || $.mobile.tizen.targetRelativeCoordsFromEvent( event ) );
-
- if ( this.draggingHS ) {
- potential_h = isSelector
- ? this.dragging_hsl[0] / 360 + ( coords.x - this.selectorDraggingOffset.x ) / this._ui[containerStr].eventSource.width()
- : coords.x / this._ui[containerStr].eventSource.width();
- potential_s = isSelector
- ? this.dragging_hsl[1] + ( coords.y - this.selectorDraggingOffset.y ) / this._ui[containerStr].eventSource.height()
- : coords.y / this._ui[containerStr].eventSource.height();
-
- this.dragging_hsl[0] = Math.min( 1.0, Math.max( 0.0, potential_h ) ) * 360;
- this.dragging_hsl[1] = Math.min( 1.0, Math.max( 0.0, potential_s ) );
- } else {
- potential_l = isSelector
- ? this.dragging_hsl[2] + ( coords.y - this.selectorDraggingOffset.y ) / this._ui[containerStr].eventSource.height()
- : coords.y / this._ui[containerStr].eventSource.height();
-
- this.dragging_hsl[2] = Math.min( 1.0, Math.max( 0.0, potential_l ) );
- }
-
- if ( !isSelector ) {
- this.selectorDraggingOffset.x = Math.ceil( this._ui[containerStr].selector.outerWidth() / 2.0 );
- this.selectorDraggingOffset.y = Math.ceil( this._ui[containerStr].selector.outerHeight() / 2.0 );
- }
-
- this._updateSelectors( this.dragging_hsl );
- event.stopPropagation();
- event.preventDefault();
- }
- },
-
- _updateSelectors: function ( hsl ) {
- var clr = $.tizen.colorwidget.prototype._setElementColor.call( this, this._ui.hs.selector, [hsl[0], 1.0 - hsl[1], hsl[2]], "background" ).clr,
- gray = $.tizen.colorwidget.clrlib.RGBToHTML( [hsl[2], hsl[2], hsl[2]] );
-
- this._ui.hs.valMask.css((hsl[2] < 0.5)
- ? { background : "#000000" , opacity : ( 1.0 - hsl[2] * 2.0 ) }
- : { background : "#ffffff" , opacity : ( ( hsl[2] - 0.5 ) * 2.0 ) } );
- this._ui.hs.selector.css( {
- left : ( hsl[0] / 360 * this._ui.hs.eventSource.width() ),
- top : ( hsl[1] * this._ui.hs.eventSource.height() )
- });
- this._ui.l.selector.css({
- top : ( hsl[2] * this._ui.l.eventSource.height() ),
- background : gray
- } );
- $.tizen.colorwidget.prototype._setColor.call( this, clr );
- },
-
- widget: function () { return this._ui.clrpicker; },
-
- _setDisabled: function ( value ) {
- $.tizen.widgetex.prototype._setDisabled.call( this, value );
- this._ui.hs.hueGradient.huegradient( "option", "disabled", value );
- this._ui.clrpicker[value ? "addClass" : "removeClass"]( "ui-disabled" );
- $.tizen.colorwidget.prototype._displayDisabledState.call( this, this._ui.clrpicker );
- },
-
- _setColor: function ( clr ) {
- if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
- this.dragging_hsl = $.tizen.colorwidget.clrlib.RGBToHSL( $.tizen.colorwidget.clrlib.HTMLToRGB( this.options.color ) );
- this.dragging_hsl[1] = 1.0 - this.dragging_hsl[1];
- this._updateSelectors( this.dragging_hsl );
- }
- }
- } );
-
- $( document ).bind( "pagecreate create", function ( e ) {
- $( $.tizen.colorpicker.prototype.options.initSelector, e.target )
- .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
- .colorpicker();
- } );
-
-}( jQuery ) );
\ No newline at end of file
+++ /dev/null
-/* Own CSS */
-
-/* @selector-size should be an odd number, in order to pixel-perfectly center on a given colour */
-@colorpicker-selector-size: 61px;
-@colorpicker-selector-border-width: 5px;
-@colorpicker-clrchannel-hs-width: 256px;
-@colorpicker-clrchannel-hs-height: 256px;
-@colorpicker-clrchannel-l-width: 16px;
-@colorpicker-clrchannel-l-height: 256px;
-
-@colorpicker-selector-total-size: @colorpicker-selector-size + 2 * @colorpicker-selector-border-width;
-@colorpicker-clrchannel-hs-padding: @colorpicker-selector-total-size / 2;
-@colorpicker-clrchannel-l-hpadding:
-
- ~`Math.max(0,
- parseInt("@{colorpicker-selector-total-size}") -
- parseInt("@{colorpicker-clrchannel-l-width}")) / 2 + "px"`;
-@colorpicker-clrchannel-l-selector-left:
- ~`Math.max(0,
- parseInt("@{colorpicker-clrchannel-l-width}") -
- parseInt("@{colorpicker-selector-total-size}")) / 2 + "px"`;
-
-.ui-colorpicker {
- display: table;
-
- .colorpicker-hs-container {
- position: relative;
- display: table-cell;
- float: left;
-
- width: @colorpicker-clrchannel-hs-width;
- height: @colorpicker-clrchannel-hs-height;
- padding: @colorpicker-clrchannel-hs-padding;
-
- .colorpicker-hs-mask {
- position: absolute;
- width: @colorpicker-clrchannel-hs-width;
- height: @colorpicker-clrchannel-hs-height;
- }
-
- .colorpicker-hs-selector {
- position: absolute;
- width: @colorpicker-selector-size;
- height: @colorpicker-selector-size;
- border: @colorpicker-selector-border-width solid black;
- }
- }
-
- .colorpicker-l-container {
- position: relative;
- float: left;
-
- width: @colorpicker-clrchannel-l-width;
- height: @colorpicker-clrchannel-l-height;
- padding-left: @colorpicker-clrchannel-l-hpadding;
- padding-right: @colorpicker-clrchannel-l-hpadding;
- padding-top: @colorpicker-clrchannel-hs-padding;
- padding-bottom: @colorpicker-clrchannel-hs-padding;
-
- .colorpicker-l-mask {
- position: absolute;
- width: @colorpicker-clrchannel-l-width;
- height: @colorpicker-clrchannel-l-height;
- }
-
- .colorpicker-l-selector {
- left: @colorpicker-clrchannel-l-selector-left;
- position: absolute;
- width: @colorpicker-selector-size;
- height: @colorpicker-selector-size;
- border: @colorpicker-selector-border-width solid black;
- }
- }
-}
+++ /dev/null
-<div id="colorpicker" class="ui-colorpicker">
- <div class="colorpicker-hs-container">
- <div id="colorpicker-hs-hue-gradient" class="colorpicker-hs-mask"></div>
- <div id="colorpicker-hs-sat-gradient" class="colorpicker-hs-mask sat-gradient"></div>
- <div id="colorpicker-hs-val-mask" class="colorpicker-hs-mask" data-event-source="hs"></div>
- <div id="colorpicker-hs-selector" class="colorpicker-hs-selector ui-corner-all"></div>
- </div>
- <div class="colorpicker-l-container">
- <div id="colorpicker-l-gradient" class="colorpicker-l-mask l-gradient" data-event-source="l"></div>
- <div id="colorpicker-l-selector" class="colorpicker-l-selector ui-corner-all"></div>
- </div>
- <div style="clear: both;"></div>
-</div>
+++ /dev/null
-/* Need to add !important below, because these classes are added before jqm enhancement */
-.ui-colorpickerbutton-input {
- max-width: 70px;
- display: inline-block !important;
-}
-
-.ui-colorpickerbutton-input-hidden {
- display: none !important;
-}
+++ /dev/null
-/*
- * jQuery Mobile Widget @VERSION
- *
- * This software is licensed under the MIT licence ( as defined by the OSI at
- * http://www.opensource.org/licenses/mit-license.php )
- *
- * ***************************************************************************
- * Copyright ( c ) 2000 - 2011 Samsung Electronics Co., Ltd.
- * Copyright ( c ) 2011 by Intel Corporation Ltd.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files ( the "Software" ),
- * to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the
- * Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * DEALINGS IN THE SOFTWARE.
- * ***************************************************************************
- *
- * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
- */
-
-// Displays a button which, when pressed, opens a popupwindow
-// containing hsvpicker.
-//
-// To apply, add the attribute data-role="colorpickerbutton" to a <div>
-// element inside a page. Alternatively, call colorpickerbutton() on an
-// element.
-//
-// Options:
-//
-// color: String; color displayed on the button and the base color
-// of the hsvpicker ( see hsvpicker ).
-// initial color can be specified in html using the
-// data-color="#ff00ff" attribute or when constructed in
-// javascript, eg :
-// $( "#mycolorpickerbutton" ).colorpickerbutton( { color: "#ff00ff" } );
-// where the html might be :
-// <div id="colorpickerbutton"></div>
-// The color can be changed post-construction like this :
-// $( "#mycolorpickerbutton" ).colorpickerbutton( "option", "color", "#ABCDEF" );
-// Default: "#1a8039"
-//
-// buttonMarkup: String; markup to use for the close button on the popupwindow, eg :
-// $( "#mycolorpickerbutton" ).colorpickerbutton( "option","buttonMarkup",
-// "<a href='#' data-role='button'>ignored</a>" );
-//
-// closeText: String; the text to display on the close button on the popupwindow.
-// The text set in the buttonMarkup will be ignored and this used instead.
-//
-// Events:
-//
-// colorchanged: emitted when the color has been changed and the popupwindow is closed.
-
-( function ( $, undefined ) {
-
- $.widget( "tizen.colorpickerbutton", $.tizen.colorwidget, {
- options: {
- buttonMarkup: {
- theme: null,
- inline: true,
- corners: true,
- shadow: true
- },
- hideInput: true,
- closeText: "Close",
- initSelector: ":jqmData(type='color'), :jqmData(role='colorpickerbutton')"
- },
-
- _htmlProto: {
- ui: {
- button: "#colorpickerbutton-button",
- buttonContents: "#colorpickerbutton-button-contents",
- popup: "#colorpickerbutton-popup-container",
- hsvpicker: "#colorpickerbutton-popup-hsvpicker",
- closeButton: "#colorpickerbutton-popup-close-button",
- closeButtonText: "#colorpickerbutton-popup-close-button-text"
- }
- },
-
- _create: function () {
- var self = this;
-
- this.element
- .css( "display", "none" )
- .after( this._ui.button );
-
- /* Tear apart the proto */
- this._ui.popup.insertBefore( this.element ).popupwindow();
- this._ui.hsvpicker.hsvpicker();
-
- $.tizen.popupwindow.bindPopupToButton( this._ui.button, this._ui.popup );
-
- this._ui.closeButton.bind( "vclick", function ( event ) {
- self._setColor( self._ui.hsvpicker.hsvpicker( "option", "color" ) );
- self.close();
- } );
-
- this.element.bind( "change keyup blur", function () {
- self._setColor( self.element.val() );
- } );
- },
-
- _setHideInput: function ( value ) {
- this.element[value ? "addClass" : "removeClass"]( "ui-colorpickerbutton-input-hidden" );
- this.element[value ? "removeClass" : "addClass"]( "ui-colorpickerbutton-input" );
- this.element.attr( "data-" + ( $.mobile.ns || "" ) + "hide-input", value );
- },
-
- _setColor: function ( clr ) {
- if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
- var clrlib = $.tizen.colorwidget.clrlib;
-
- this._ui.hsvpicker.hsvpicker( "option", "color", this.options.color );
- $.tizen.colorwidget.prototype._setElementColor.call( this, this._ui.buttonContents,
- clrlib.RGBToHSL( clrlib.HTMLToRGB( this.options.color ) ), "color" );
- }
- },
-
- _setButtonMarkup: function ( value ) {
- this._ui.button.buttonMarkup( value );
- this.options.buttonMarkup = value;
- value.inline = false;
- this._ui.closeButton.buttonMarkup( value );
- },
-
- _setCloseText: function ( value ) {
- this._ui.closeButtonText.text( value );
- this.options.closeText = value;
- this.element.attr( "data-" + ( $.mobile.ns || "" ) + "close-text", value );
- },
-
- _setDisabled: function ( value ) {
- $.tizen.widgetex.prototype._setDisabled.call( this, value );
- this._ui.popup.popupwindow( "option", "disabled", value );
- this._ui.button[value ? "addClass" : "removeClass"]( "ui-disabled" );
- $.tizen.colorwidget.prototype._displayDisabledState.call( this, this._ui.button );
- },
-
- open: function () {
- this._ui.popup.popupwindow( "open",
- this._ui.button.offset().left + this._ui.button.outerWidth() / 2,
- this._ui.button.offset().top + this._ui.button.outerHeight() / 2 );
- },
-
- _focusButton : function () {
- var self = this;
- setTimeout( function () {
- self._ui.button.focus();
- }, 40 );
- },
-
- close: function () {
- this._focusButton();
- this._ui.popup.popupwindow( "close" );
- }
- } );
-
-//auto self-init widgets
- $( document ).bind( "pagecreate create", function ( e ) {
- $( $.tizen.colorpickerbutton.prototype.options.initSelector, e.target )
- .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
- .colorpickerbutton();
- } );
-
-}( jQuery ) );
+++ /dev/null
-<div id="colorpickerbutton">
- <a id="colorpickerbutton-button" href="#" data-role="button" aria-haspopup="true">
- <span id="colorpickerbutton-button-contents">▇▇▇</span>
- </a>
- <div id="colorpickerbutton-popup-container" class="colorpickerbutton-popup-container-style">
- <div id="colorpickerbutton-popup-hsvpicker" data-role="hsvpicker"></div>
- <a id="colorpickerbutton-popup-close-button" href="#" data-role="button">
- <span id="colorpickerbutton-popup-close-button-text"></span>
- </a>
- </div>
-</div>
+++ /dev/null
-/*
- * jQuery Mobile Widget @VERSION
- *
- * This software is licensed under the MIT licence (as defined by the OSI at
- * http://www.opensource.org/licenses/mit-license.php)
- *
- * ***************************************************************************
- * Copyright (C) 2011 by Intel Corporation Ltd.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software"),
- * to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the
- * Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * DEALINGS IN THE SOFTWARE.
- * ***************************************************************************
- *
- * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
- */
-
-// Displays the color in text of the form '#RRGGBB' where
-// RR, GG, and BB are in hexadecimal.
-//
-// Apply a colortitle by adding the attribute data-role="colortitle"
-// to a <div> element inside a page. Alternatively, call colortitle()
-// on an element (see below).
-//
-// Options:
-//
-// color: String; the initial color can be specified in html using
-// the data-color="#ff00ff" attribute or when constructed
-// in javascipt eg
-// $("#mycolortitle").colortitle({ color: "#ff00ff" });
-// where the html might be :
-// <div id="mycolortitle"></div>
-// The color can be changed post-construction :
-// $("#mycolortitle").colortitle("option", "color", "#ABCDEF");
-// Default: "#1a8039".
-
-(function ( $, undefined ) {
-
- $.widget( "tizen.colortitle", $.tizen.colorwidget, {
- options: {
- initSelector: ":jqmData(role='colortitle')"
- },
-
- _htmlProto: {
- ui: {
- clrtitle: "#colortitle",
- header: "#colortitle-string"
- }
- },
-
- _create: function () {
- this.element
- .css( "display", "none" )
- .after( this._ui.clrtitle );
-
- },
-
- widget: function () { return this._ui.clrtitle; },
-
- _setDisabled: function ( value ) {
- $.tizen.widgetex.prototype._setDisabled.call( this, value );
- this._ui.clrtitle[value ? "addClass" : "removeClass"]( "ui-disabled" );
- },
-
- _setColor: function ( clr ) {
- if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
- this._ui.header.text( this.options.color );
- $( this._ui.header ).parent().css( "color", this.options.color );
- }
- }
- } );
-
- $( document ).bind( "pagecreate create", function ( e ) {
- $( $.tizen.colortitle.prototype.options.initSelector, e.target )
- .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
- .colortitle();
- } );
-
-}( jQuery ) );
\ No newline at end of file
+++ /dev/null
-@colortitle-vpadding: 15px;
-
-.ui-colortitle {
- padding-top: @colortitle-vpadding;
- padding-bottom: @colortitle-vpadding;
- h1 {
- display: table;
- margin: auto;
- color: #54a12d;
- }
-}
-
-.todons-colortitle-disabled {
- h1 {
- color: #888888;
- }
-}
+++ /dev/null
-<div id="colortitle" class="ui-colortitle jquery-mobile-ui-widget">
- <h1 id="colortitle-string"></h1>
-</div>
$( this ).addClass( $.mobile.activeBtnClass );
});
- $controlbar
- .addClass( "ui-controlbar");
-
+ $controlbar.addClass( "ui-controlbar");
$( document ).bind( "pagebeforeshow", function ( event, ui ) {
var footer_filter = $( event.target ).find( ":jqmData(role='footer')" ),
$elFooterMore = controlbar_filter.siblings( ":jqmData(icon='naviframe-more')" ),
$elFooterBack = controlbar_filter.siblings( ".ui-btn-back" );
-/*
- if ( !(controlbar_filter.find(".ui-btn-inner").children().is(".ui-icon")) ) {
- controlbar_filter.find( ".ui-btn-inner" ).addClass( "ui-navbar-textonly" );
- } else {
- if ( controlbar_filter.find( ".ui-btn-text" ).text() == "" ) {
- controlbar_filter.find( ".ui-btn" ).addClass( "ui-ctrlbar-icononly" );
- }
- }
- */
footer_filter
.css( "position", "fixed" )
.css( "bottom", 0 )
controlbar_filter.addClass( "ui-controlbar-margin-more" );
if ( $elFooterBack.length )
controlbar_filter.addClass( "ui-controlbar-margin-back" );
-
-
});
$( document ).bind( "pageshow", function ( e, ui ) {
element_width = 0,
element_count = controlbar_filter.find( 'li' ).length;
- if ( controlbar_filter.find(".ui-btn-active").length == 0 ) {
- controlbar_filter.find( "div" ).css( "left", "0px" );
- } else {
- controlbar_filter.find( "div" ).css( "left", controlbar_filter.find( ".ui-btn-active" ).parent( "li" ).index() * controlbar_filter.width() / element_count );
- }
-
if ( controlbar_filter.length ) {
element_width = controlbar_filter.find("li:first").width();
controlbar_filter.find("li:last").width( controlbar_filter.width() - element_width * ( element_count - 1 ) );
$controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
}
});
-
},
_setDisabled: function ( value, cnt ) {
+++ /dev/null
-.ui-hsvpicker .hsvpicker-clrchannel-container .hsvpicker-clrchannel-masks-container .sat-gradient {
- background: rgb(255,0,0); /* Old browsers */
- background: -webkit-gradient(linear, left top, right top,
- color-stop( 0%,rgba(255,255,255,1)),
- color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
- background: -moz-linear-gradient(left,
- rgba(255,255,255,1) 0%,
- rgba(255,255,255,0) 100%);
- background: -webkit-linear-gradient(left,
- rgba(255,255,255,1) 0%,
- rgba(255,255,255,0) 100%);
- background: -o-linear-gradient(left,
- rgba(255,255,255,1) 0%,
- rgba(255,255,255,0) 100%);
- background: -ms-linear-gradient(left,
- rgba(255,255,255,1) 0%,
- rgba(255,255,255,0) 100%);
- background: linear-gradient(left,
- rgba(255,255,255,1) 0%,
- rgba(255,255,255,0) 100%);
- filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#ffffff', endColorstr="#00ffffff", GradientType = 1);
-}
-
-.ui-hsvpicker .hsvpicker-clrchannel-container .hsvpicker-clrchannel-masks-container .val-gradient {
- background: rgb(255,0,0); /* Old browsers */
- background: -webkit-gradient(linear, left top, right top,
- color-stop( 0%,rgba(0,0,0,1)),
- color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
- background: -moz-linear-gradient(left,
- rgba(0,0,0,1) 0%,
- rgba(0,0,0,0) 100%);
- background: -webkit-linear-gradient(left,
- rgba(0,0,0,1) 0%,
- rgba(0,0,0,0) 100%);
- background: -o-linear-gradient(left,
- rgba(0,0,0,1) 0%,
- rgba(0,0,0,0) 100%);
- background: -ms-linear-gradient(left,
- rgba(0,0,0,1) 0%,
- rgba(0,0,0,0) 100%);
- background: linear-gradient(left,
- rgba(0,0,0,1) 0%,
- rgba(0,0,0,0) 100%);
- filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#000000', endColorstr="#00000000", GradientType = 1);
-}
+++ /dev/null
-/*
- * jQuery Mobile Widget @VERSION
- *
- * This software is licensed under the MIT licence (as defined by the OSI at
- * http://www.opensource.org/licenses/mit-license.php)
- *
- * ***************************************************************************
- * Copyright (C) 2011 by Intel Corporation Ltd.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software" ),
- * to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the
- * Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * DEALINGS IN THE SOFTWARE.
- * ***************************************************************************
- *
- * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>
- */
-
-// Displays three sliders that allow the user to select the
-// hue, saturation, and value for a color.
-//
-// To apply, add the attribute data-role="hsvpicker" to a <div>
-// element inside a page. Alternatively, call hsvpicker()
-// on an element (see below).
-//
-// Options:
-//
-// color: String; the initial color can be specified in html using the
-// data-color="#ff00ff" attribute or when constructed
-// in javascript, eg
-// $( "#myhsvpicker" ).hsvpicker({ color: "#ff00ff" });
-// where the html might be :
-// <div id="myhsvpicker"></div>
-// The color can be changed post-construction like this :
-// $( "#myhsvpicker" ).hsvpicker( "option", "color", "#ABCDEF" );
-// Default: "#1a8039"
-//
-// Events:
-//
-// colorchanged: Fired when the color is changed.
-
-(function ( $, undefined ) {
-
- $.widget( "tizen.hsvpicker", $.tizen.colorwidget, {
- options: {
- initSelector: ":jqmData(role='hsvpicker')"
- },
-
- _htmlProto: {
- ui: {
- container: "#hsvpicker",
- hue: {
- eventSource: "[data-event-source='hue']",
- selector: "#hsvpicker-hue-selector",
- hue: "#hsvpicker-hue-hue",
- valMask: "#hsvpicker-hue-mask-val"
- },
- sat: {
- gradient: "#hsvpicker-sat-gradient",
- eventSource: "[data-event-source='sat']",
- selector: "#hsvpicker-sat-selector",
- hue: "#hsvpicker-sat-hue",
- valMask: "#hsvpicker-sat-mask-val"
- },
- val: {
- gradient: "#hsvpicker-val-gradient",
- eventSource: "[data-event-source='val']",
- selector: "#hsvpicker-val-selector",
- hue: "#hsvpicker-val-hue"
- }
- }
- },
-
- _create: function () {
- var self = this,
- chan,
- hsvIdx,
- max,
- step;
-
- this.element
- .css( "display", "none" )
- .after( this._ui.container );
-
- this._ui.hue.hue.huegradient();
-
- $.extend( this, {
- dragging_hsv: [ 0, 0, 0],
- selectorDraggingOffset: {
- x : -1,
- y : -1
- },
- dragging: -1
- } );
-
- this._ui.container.find( ".hsvpicker-arrow-btn" )
- .buttonMarkup()
- .bind( "vclick", function ( e ) {
- chan = $( this).attr( "data-" + ( $.mobile.ns || "" ) + "target" );
- hsvIdx = ( "hue" === chan ) ? 0 :
- ( "sat" === chan) ? 1 : 2;
- max = ( 0 == hsvIdx ? 360 : 1 );
- step = 0.05 * max;
-
- self.dragging_hsv[hsvIdx] = self.dragging_hsv[hsvIdx] + step * ( "left" === $( this ).attr( "data-" + ( $.mobile.ns || "" ) + "location" ) ? -1 : 1);
- self.dragging_hsv[hsvIdx] = Math.min( max, Math.max( 0.0, self.dragging_hsv[hsvIdx] ) );
- self._updateSelectors( self.dragging_hsv );
- } );
-
- $( document )
- .bind( "vmousemove", function ( event ) {
- if ( self.dragging != -1 ) {
- event.stopPropagation();
- event.preventDefault();
- }
- } )
- .bind( "vmouseup", function ( event ) {
- self.dragging = -1;
- } );
-
- this._bindElements( "hue", 0 );
- this._bindElements( "sat", 1 );
- this._bindElements( "val", 2 );
- },
-
- _bindElements: function ( chan, idx ) {
- var self = this;
- this._ui[chan].selector
- .bind( "mousedown vmousedown", function ( e ) { self._handleMouseDown( chan, idx, e, true ); } )
- .bind( "vmousemove touchmove", function ( e ) { self._handleMouseMove( chan, idx, e, true ); } )
- .bind( "vmouseup", function ( e ) { self.dragging = -1; } );
- this._ui[chan].eventSource
- .bind( "mousedown vmousedown", function ( e ) { self._handleMouseDown( chan, idx, e, false ); } )
- .bind( "vmousemove touchmove", function ( e ) { self._handleMouseMove( chan, idx, e, false ); } )
- .bind( "vmouseup", function ( e ) { self.dragging = -1; } );
- },
-
- _handleMouseDown: function ( chan, idx, e, isSelector ) {
- var coords = $.mobile.tizen.targetRelativeCoordsFromEvent( e ),
- widgetStr = ( isSelector ? "selector" : "eventSource" );
-
- if ( coords.x >= 0 && coords.x <= this._ui[chan][widgetStr].outerWidth() &&
- coords.y >= 0 && coords.y <= this._ui[chan][widgetStr].outerHeight() ) {
-
- this.dragging = idx;
-
- if ( isSelector ) {
- this.selectorDraggingOffset.x = coords.x;
- this.selectorDraggingOffset.y = coords.y;
- }
-
- this._handleMouseMove( chan, idx, e, isSelector, coords );
- }
- },
-
- _handleMouseMove: function ( chan, idx, e, isSelector, coords ) {
- if ( this.dragging === idx ) {
- coords = ( coords || $.mobile.tizen.targetRelativeCoordsFromEvent( e ) );
-
- var factor = ( ( 0 === idx ) ? 360 : 1 ),
- potential = ( isSelector
- ? ( ( this.dragging_hsv[idx] / factor) +
- ( ( coords.x - this.selectorDraggingOffset.x ) / this._ui[chan].eventSource.width() ) )
- : ( coords.x / this._ui[chan].eventSource.width() ) );
-
- this.dragging_hsv[idx] = Math.min( 1.0, Math.max( 0.0, potential ) ) * factor;
-
- if ( !isSelector ) {
- this.selectorDraggingOffset.x = Math.ceil( this._ui[chan].selector.outerWidth() / 2.0 );
- this.selectorDraggingOffset.y = Math.ceil( this._ui[chan].selector.outerHeight() / 2.0 );
- }
-
- this._updateSelectors( this.dragging_hsv );
- e.stopPropagation();
- e.preventDefault();
- }
- },
-
- _updateSelectors: function ( hsv ) {
- var clrlib = $.tizen.colorwidget.clrlib,
- clrwidget = $.tizen.colorwidget.prototype,
- clr = clrlib.HSVToHSL( hsv ),
- hclr = clrlib.HSVToHSL( [hsv[0], 1.0, 1.0] ),
- vclr = clrlib.HSVToHSL( [hsv[0], hsv[1], 1.0] );
-
- this._ui.hue.selector.css( { left : this._ui.hue.eventSource.width() * hsv[0] / 360} );
- clrwidget._setElementColor.call( this, this._ui.hue.selector, clr, "background" );
- if ( $.mobile.browser.ie ) {
- this._ui.hue.hue.find( "*" ).css( "opacity", hsv[1] );
- } else {
- this._ui.hue.hue.css( "opacity", hsv[1] );
- }
-
- this._ui.hue.valMask.css( "opacity", 1.0 - hsv[2] );
-
- this._ui.sat.selector.css( { left : this._ui.sat.eventSource.width() * hsv[1]} );
- clrwidget._setElementColor.call( this, this._ui.sat.selector, clr, "background" );
- clrwidget._setElementColor.call( this, this._ui.sat.hue, hclr, "background" );
- this._ui.sat.valMask.css( "opacity", 1.0 - hsv[2] );
-
- this._ui.val.selector.css( { left : this._ui.val.eventSource.width() * hsv[2]} );
- clrwidget._setElementColor.call( this, this._ui.val.selector, clr, "background" );
- clrwidget._setElementColor.call( this, this._ui.val.hue, vclr, "background" );
- clrwidget._setColor.call( this, clrlib.RGBToHTML( clrlib.HSLToRGB(clr) ) );
- },
-
- _setDisabled: function ( value ) {
- $.tizen.widgetex.prototype._setDisabled.call( this, value );
- this._ui.container[value ? "addClass" : "removeClass"]( "ui-disabled" );
- this._ui.hue.hue.huegradient( "option", "disabled", value );
- $.tizen.colorwidget.prototype._displayDisabledState.call( this, this._ui.container );
- },
-
- _setColor: function ( clr ) {
- if ( $.tizen.colorwidget.prototype._setColor.call( this, clr ) ) {
- this.dragging_hsv = $.tizen.colorwidget.clrlib.RGBToHSV( $.tizen.colorwidget.clrlib.HTMLToRGB( this.options.color ) );
- this._updateSelectors( this.dragging_hsv );
- }
- }
- } );
-
- $( document ).bind( "pagecreate create", function ( e ) {
- $( $.tizen.hsvpicker.prototype.options.initSelector, e.target )
- .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
- .hsvpicker();
- } );
-
-}( jQuery ) );
\ No newline at end of file
+++ /dev/null
-@hsvpicker-clrchannel-masks-width: 300px;
-@hsvpicker-clrchannel-masks-height: 38px;
-@hsvpicker-clrchannel-selector-width: 10px;
-@hsvpicker-clrchannel-selector-height: 50px;
-@hsvpicker-clrchannel-selector-border-width: 5px;
-@hsvpicker-clrchannel-masks-container-hpadding: 12px;
-@hsvpicker-clrchannel-masks-container-vpadding: 16px;
-
-@hsvpicker-clrchannel-selector-actual-height: @hsvpicker-clrchannel-selector-height -
- 2 * @hsvpicker-clrchannel-selector-border-width;
-
-@hsvpicker-clrchannel-masks-container-actual-hpadding:
- @hsvpicker-clrchannel-selector-width / 2
- + @hsvpicker-clrchannel-selector-border-width;
-@hsvpicker-clrchannel-masks-container-actual-vpadding:
- (@hsvpicker-clrchannel-selector-actual-height - @hsvpicker-clrchannel-masks-height) / 2
- + @hsvpicker-clrchannel-selector-border-width;
-@hsvpicker-clrchannel-masks-container-hmargin:
- ~`Math.max(0,
- (parseInt("@{hsvpicker-clrchannel-masks-container-hpadding}") -
- parseInt("@{hsvpicker-clrchannel-masks-container-actual-hpadding}"))) + "px"`;
-@hsvpicker-clrchannel-masks-container-vmargin:
- ~`Math.max(0,
- (parseInt("@{hsvpicker-clrchannel-masks-container-vpadding}") -
- parseInt("@{hsvpicker-clrchannel-masks-container-actual-vpadding}"))) + "px"`;
-
-.ui-hsvpicker {
- .hsvpicker-clrchannel-container {
- display: table;
- padding-left: 27px;
- padding-right: 27px;
-
- .hsvpicker-arrow-btn-container {
- display: table-cell;
- vertical-align: middle;
- }
-
- .hsvpicker-arrow-btn {
- float: left;
- }
-
- .hsvpicker-clrchannel-masks-container {
- float: left;
- position: relative;
- width: @hsvpicker-clrchannel-masks-width;
- height: @hsvpicker-clrchannel-masks-height;
-
- margin-left: @hsvpicker-clrchannel-masks-container-hmargin;
- margin-right: @hsvpicker-clrchannel-masks-container-hmargin;
- margin-top: @hsvpicker-clrchannel-masks-container-vmargin;
- margin-bottom: @hsvpicker-clrchannel-masks-container-vmargin;
-
- padding-left: @hsvpicker-clrchannel-masks-container-actual-hpadding;
- padding-right: @hsvpicker-clrchannel-masks-container-actual-hpadding;
- padding-top: @hsvpicker-clrchannel-masks-container-actual-vpadding;
- padding-bottom: @hsvpicker-clrchannel-masks-container-actual-vpadding;
-
- .hsvpicker-clrchannel-mask {
- position: absolute;
- width: @hsvpicker-clrchannel-masks-width;
- height: @hsvpicker-clrchannel-masks-height;
- }
-
- .hsvpicker-clrchannel-mask-black {
- background: #000000;
- }
-
- .hsvpicker-clrchannel-mask-white {
- background: #ffffff;
- }
-
- .hsvpicker-clrchannel-selector {
- position: absolute;
- left: 0px;
- top: 0px;
- width: @hsvpicker-clrchannel-selector-width;
- height: @hsvpicker-clrchannel-selector-actual-height;
- border: @hsvpicker-clrchannel-selector-border-width solid black;
- }
- }
- }
-}
+++ /dev/null
-<div id="hsvpicker" class="ui-hsvpicker">
- <div class="hsvpicker-clrchannel-container jquery-mobile-ui-widget">
- <div class="hsvpicker-arrow-btn-container">
- <a href="#" data-role="button" class="hsvpicker-arrow-btn" data-target="hue" data-location="left" data-inline="true" data-icon="reveal-left"></a>
- </div>
- <div class="hsvpicker-clrchannel-masks-container">
- <div class="hsvpicker-clrchannel-mask hsvpicker-clrchannel-mask-white"></div>
- <div id="hsvpicker-hue-hue" class="hsvpicker-clrchannel-mask jquery-todons-colorwidget-clrlib-hue-gradient"></div>
- <div id="hsvpicker-hue-mask-val" class="hsvpicker-clrchannel-mask hsvpicker-clrchannel-mask-black" data-event-source="hue"></div>
- <div id="hsvpicker-hue-selector" class="hsvpicker-clrchannel-selector ui-corner-all"></div>
- </div>
- <div class="hsvpicker-arrow-btn-container">
- <a href="#" data-role="button" class="hsvpicker-arrow-btn" data-target="hue" data-location="right" data-inline="true" data-icon="reveal"></a>
- </div>
- </div>
- <div class="hsvpicker-clrchannel-container jquery-mobile-ui-widget">
- <div class="hsvpicker-arrow-btn-container">
- <a href="#" data-role="button" class="hsvpicker-arrow-btn" data-target="sat" data-location="left" data-inline="true" data-icon="reveal-left"></a>
- </div>
- <div class="hsvpicker-clrchannel-masks-container">
- <div id="hsvpicker-sat-hue" class="hsvpicker-clrchannel-mask"></div>
- <div id="hsvpicker-sat-gradient" class="hsvpicker-clrchannel-mask sat-gradient"></div>
- <div id="hsvpicker-sat-mask-val" class="hsvpicker-clrchannel-mask hsvpicker-clrchannel-mask-black" data-event-source="sat"></div>
- <div id="hsvpicker-sat-selector" class="hsvpicker-clrchannel-selector ui-corner-all"></div>
- </div>
- <div class="hsvpicker-arrow-btn-container">
- <a href="#" data-role="button" class="hsvpicker-arrow-btn" data-target="sat" data-location="right" data-inline="true" data-icon="reveal"></a>
- </div>
- </div>
- <div class="hsvpicker-clrchannel-container jquery-mobile-ui-widget">
- <div class="hsvpicker-arrow-btn-container">
- <a href="#" data-role="button" class="hsvpicker-arrow-btn" data-target="val" data-location="left" data-inline="true" data-icon="reveal-left"></a>
- </div>
- <div class="hsvpicker-clrchannel-masks-container">
- <div class="hsvpicker-clrchannel-mask hsvpicker-clrchannel-mask-white"></div>
- <div id="hsvpicker-val-hue" class="hsvpicker-clrchannel-mask"></div>
- <div id="hsvpicker-val-gradient" class="hsvpicker-clrchannel-mask val-gradient" data-event-source="val"></div>
- <div id="hsvpicker-val-selector" class="hsvpicker-clrchannel-selector ui-corner-all"></div>
- </div>
- <div class="hsvpicker-arrow-btn-container">
- <a href="#" data-role="button" class="hsvpicker-arrow-btn" data-target="val" data-location="right" data-inline="true" data-icon="reveal"></a>
- </div>
- </div>
-</div>
container = this._get_container();
if ( this.type === 'ticker' ) {
- container.find(".ui-ticker-btn").append( this.btn );
+ container.find(".ui-ticker-btn").append( this.btn ).trigger("create");
this.btn.bind( "vmouseup", function () {
self.close();
elem = $( this.element ),
i;
- this.btn = $("<a href='#' class='ui-input-cancel' title='close' data-theme='s'>Close</a>")
- .tap( function ( event ) {
- event.preventDefault();
- })
- .buttonMarkup({
- inline: true,
- corners: true,
- shadow: true
- });
+ this.btn = $('<div data-role="button" data-inline="true">Close</div>');
this.seconds = elem.jqmData('interval');
this.type = elem.jqmData('type') || 'popup';
}
} );
- this._ui.screen.css( "height", $( window ).height() )
- .removeClass("ui-screen-hidden");
+ this._ui.screen.css( "height", $( window ).height() );
if( backgroundclose ) {
- this._ui.screen.css( "opacity", 0 );
+ this._ui.screen.css( "opacity", 0 )
+ .removeClass("ui-screen-hidden");
} else {
+ this._ui.removeClass("ui-screen-hidden");
+
if ( this.options.fade ) {
this._ui.screen.animate( {opacity: this.options.opacity}, "fast" );
} else {
coords.y += $( e.target ).offset().top - shortcutsListOffset.top;
}
+ self.shortcutsList.find( 'li' ).each( function () {
+ var listItem = $( this );
+ $( listItem )
+ .removeClass( "ui-shortcutscroll-hover" )
+ .removeClass( "ui-shortcutscroll-hover-up" )
+ .removeClass( "ui-shortcutscroll-hover-down" );
+ });
// Hit test each list item
self.shortcutsList.find( 'li' ).each( function () {
var listItem = $( this ),
if ( coords.x >= l && coords.x <= r && coords.y >= t && coords.y <= b ) {
jumpToDivider( $( listItem.data( 'divider' ) ) );
+ $( listItem ).addClass( "ui-shortcutscroll-hover" );
+ if ( listItem.index() > 0 )
+ $( listItem ).siblings().eq( listItem.index() - 1 ).addClass( "ui-shortcutscroll-hover-up" );
+ $( listItem ).siblings().eq( listItem.index() ).addClass( "ui-shortcutscroll-hover-down" );
return false;
}
return true;
} );
+
+
e.preventDefault();
e.stopPropagation();
} )
projects / framework / web / web-ui-fw.git / commitdiff
