<li data-role="list-divider">List</li>
<li><a href="widgets/list/list.html">List</a></li>
<li><a href="widgets/list/lists-autodividers.html">Autodividers</a></li>
- <li><a href="widgets/fast-scroll.html">Short cut scroll (aka fast-scroll)</a></li>
+ <li><a href="widgets/fastscroll.html">Fastscroll</a></li>
<li data-role="list-divider">Additional Popup</li>
<li><a href="widgets/popupwindow/popup.html">Popup</a></li>
-<div data-role="page" id="shortcutscroll-demo" data-add-back-btn="true" data-fit-page-to-window="true">
+<div data-role="page" id="fastscroll-demo" data-add-back-btn="true" data-fit-page-to-window="true">
<div data-role="header" data-position="fixed">
- <h1>Short cut scroll (aka fast scroll)</h1>
+ <h1>Fastscroll</h1>
</div><!-- header -->
<div class="content" data-role="content" data-scroll="y">
- <ul id="contacts" data-role="listview" data-shortcutscroll="true">
+ <ul id="contacts" data-role="listview" data-fastscroll="true">
<li data-role="list-divider">A</li>
<li>Anton</li>
<li>Arabella</li>
Name: web-ui-fw
-Version: 0.2.1
-Release: 1
+Version: 0.2.2
+Release: 0
Summary: Tizen Web UI Framework Library
Group: Development/Other
License: MIT
###############################
%changelog
+* Thu Dec 10 2012 Youmin Ha <youmin.ha@samsung.com> 0.2.2
+- FIX:
+ - chang searchbar/slider images
+ - delete redundant button images
+- Spec changes:
+ - Change widget name: shortcutscroll -> fastscroll
+
* Thu Dec 07 2012 Youmin Ha <youmin.ha@samsung.com> 0.2.1
- FIX:
- jqm1.2: Change collapsible style to meet expandable list
- Spec changes:
- UX guide v0.4 : button, layout
+* Fri Oct 26 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.58
+- FIX:
+ - scrollview: Fix outer scroll amount
+ - tabbar: fix tapping twice
+ - popupwindow: fix left position
+
* Wed Oct 24 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.57
- FIX:
- expandablelist: icon color fix
}\r
\r
.ui-image-search {\r
- background-image: url(images/00_search_icon.png);\r
+ background-image: url(images/controls/00_search_icon.png);\r
background-repeat: no-repeat;\r
background-size : 100% 100%;\r
}\r
\r
.ui-icon-deleteSearch {\r
- background-image: url(images/00_Edit_Field_clear.png);\r
+ background-image: url(images/controls/00_field_btn_clear.png);\r
background-repeat: no-repeat;\r
background-size : 100% 100%;\r
}\r
@import "config.less";
-.ui-shortcutscroll {
+.ui-fastscroll {
position: absolute;
right: 0*@unit_base;
- background-color: @color_shortcutscroll_rollover_bg;
+ background-color: @color_fastscroll_rollover_bg;
width: 25*@unit_base;
-ms-user-select: none;
-o-user-select: none;
}
li {
cursor: pointer;
- color: @color_shortcutscroll_rollover_text;
+ color: @color_fastscroll_rollover_text;
padding: 2*@unit_base 2*@unit_base 2*@unit_base 2*@unit_base;
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-color : @color_fastscroll_popup_bg;
border-left-style : solid;
}
}
-.ui-shortcutscroll2 {
+.ui-fastscroll2 {
position: absolute;
right: 0*@unit_base;
-ms-user-select: none;
}
li {
cursor: pointer;
- color: @color_shortcutscroll_rollover_text;
+ color: @color_fastscroll_rollover_text;
padding: 2*@unit_base 2*@unit_base 2*@unit_base 2*@unit_base;
text-align: right;
}
}
-.ui-shortcutscroll-bg {
+.ui-fastscroll-bg {
position: absolute;
right: 0*@unit_base;
- background-color: @color_shortcutscroll_rollover_bg;
+ background-color: @color_fastscroll_rollover_bg;
width: 25 * @unit_base;
z-index: 10;
top: 0;
}
-.ui-shortcutscroll-popup {
+.ui-fastscroll-popup {
position: absolute;
- background: @color_shortcutscroll_popup_bg;
- color: @color_shortcutscroll_popup_text;
+ background: @color_fastscroll_popup_bg;
+ color: @color_fastscroll_popup_text;
padding:10*@unit_base 30*@unit_base;
- -ms-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
- -o-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
- -moz-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
- -webkit-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
- box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
+ -ms-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_fastscroll_popup_shadow;
+ -o-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_fastscroll_popup_shadow;
+ -moz-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_fastscroll_popup_shadow;
+ -webkit-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_fastscroll_popup_shadow;
+ box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_fastscroll_popup_shadow;
text-align: center;
font-size: 75*@unit_base;
font-weight: bold;
box-sizing:border-box;
}
-li.ui-shortcutscroll-hover {
- color : @color_shortcutscroll_popup_bg;
+li.ui-fastscroll-hover {
+ color : @color_fastscroll_popup_bg;
}
-li.ui-shortcutscroll-hover,
-li.ui-shortcutscroll-hover-up,
-li.ui-shortcutscroll-hover-down {
+li.ui-fastscroll-hover,
+li.ui-fastscroll-hover-up,
+li.ui-fastscroll-hover-down {
background : @color_list_bg;
border-style : solid;
- border-color : @color_shortcutscroll_popup_bg;
+ border-color : @color_fastscroll_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 {
+li.ui-fastscroll-hover-up {
border-top-width : 3 * @unit_base;
}
-li.ui-shortcutscroll-hover-down {
+li.ui-fastscroll-hover-down {
border-bottom-width : 3 * @unit_base;
}
}\r
\r
.ui-multimediaview-control span.ui-volume-icon {\r
- background-image : url(./images/00_slider_button_volume_02.png);\r
+ background-image : url(./images/controls/00_slider_button_volume_02.png);\r
}\r
\r
.ui-multimediaview-control span.ui-mute-icon {\r
- background-image : url(./images/00_slider_button_volume_01.png);\r
+ background-image : url(./images/controls/00_slider_button_volume_01.png);\r
}\r
\r
.ui-multimediaview-control span.ui-fullscreen-on {\r
height: @img-height;
width: @img-width;
- background: url(images/00_slider_button_brightness_01.png) no-repeat;
+ background: url(images/controls/00_slider_button_brightness_01.png) no-repeat;
.LESSbackground-size(@img-width, @img-height);
}
.ui-slider-left-volume {
- background: url(images/00_slider_button_volume_01.png) no-repeat;
+ background: url(images/controls/00_slider_button_volume_01.png) no-repeat;
.LESSbackground-size(@img-width, @img-height);
}
vertical-align: middle;
- background: url(images/00_slider_button_brightness_02.png) no-repeat;
+ background: url(images/controls/00_slider_button_brightness_02.png) no-repeat;
.LESSbackground-size(@img-width, @img-height);
}
.ui-slider-right-volume {
- background: url(images/00_slider_button_volume_02.png) no-repeat;
+ background: url(images/controls/00_slider_button_volume_02.png) no-repeat;
.LESSbackground-size(@img-width, @img-height);
}
color: @color_slider_handle_text;
font-size: 0.95rem;
- background: url(images/00_slider_handle.png) no-repeat;
+ background: url(images/controls/00_slider_handle.png) no-repeat;
.LESSbackground-size(@handle-width, @handle-height);
}
height: 37 * @unit_base;
//FIXME
- background: url(images/00_slider_handle_press.png) no-repeat;
+ background: url(images/controls/00_slider_handle_press.png) no-repeat;
.LESSbackground-size(@handle-width, @handle-height);
}
../common/jquery.mobile.tizen.pagecontrol.less.css \
../common/jquery.mobile.tizen.swipe.less.css \
../common/jquery.mobile.tizen.nocontents.less.css \
- ../common/jquery.mobile.tizen.shortcutscroll.less.css \
+ ../common/jquery.mobile.tizen.fastscroll.less.css \
../common/jquery.mobile.tizen.dayselector.less.css \
../common/jquery.mobile.tizen.toggleswitch.less.css \
../common/jquery.mobile.tizen.triangle.less.css \
/***************************************************************************
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 */
+@color_fastscroll_rollover_bg: rgba(230, 227, 216, 1); /* B0723 : 00_fast_scroll_rollover_bg.9.png */
+@color_fastscroll_rollover_text: rgba(160, 159, 154, 1); /* B0721 : Rollover text */
+@color_fastscroll_popup_bg: rgba(59, 115, 182, 1); /* B0731 : 00_fast_scroll_popup_bg.png */
+@color_fastscroll_popup_shadow: rgba(199, 199, 199, 0.5);
+@color_fastscroll_popup_text: rgba(255, 255, 255, 1); /* B0732 : Scroll popup text */
/***************************************************************************
* Authors: Elliot Smith <elliot.smith@intel.com>
*/
-// shortcutscroll is a scrollview controller, which binds
+// fastscroll is a scrollview controller, which binds
// a scrollview to a a list of short cuts; the shortcuts are built
// from the text on dividers in the list. Clicking on a shortcut
// instantaneously jumps the scrollview to the selected list divider;
// list divider matching the text currently under the touch; a popup
// with the text currently under the touch is also displayed.
//
-// To apply, add the attribute data-shortcutscroll="true" to a listview
+// To apply, add the attribute data-fastscroll="true" to a listview
// (a <ul> or <ol> element inside a page). Alternatively, call
-// shortcutscroll() on an element.
+// fastscroll() on an element.
//
// The closest element with class ui-scrollview-clip is used as the
// scrollview to be controlled.
// display.
/**
- @class ShortcutScroll
+ @class fastscroll
The shortcut scroll widget shows a shortcut list that is bound to its parent scroll bar and respective list view. This widget is displayed as a text pop-up representing shortcuts to different list dividers in the list view. If you select a shortcut text from the shortcut scroll, the parent list view is moved to the location representing the selected shortcut.
To add a shortcut scroll widget to the application, use the following code:
<div class="content" data-role="content" data-scroll="y">
- <ul id="contacts" data-role="listview" data-shortcutscroll="true">
+ <ul id="contacts" data-role="listview" data-fastscroll="true">
<li>Anton</li>
</ul>
</div>
*/
/**
- @property {Boolean} data-shortcutscroll
+ @property {Boolean} data-fastscroll
When set to true, creates a shortcut scroll using the HTML unordered list (<ul>) element.
*/
/**
- @method shortcutscroll
+ @method fastscroll
The shortcut scroll is created for the closest list view with the ui-scrollview-clip class.
*/
(function ( $, undefined ) {
- $.widget( "tizen.shortcutscroll", $.mobile.widget, {
+ $.widget( "tizen.fastscroll", $.mobile.widget, {
options: {
- initSelector: ":jqmData(shortcutscroll)"
+ initSelector: ":jqmData(fastscroll)"
},
_create: function () {
jumpToDivider;
this.scrollview = $el.closest( '.ui-scrollview-clip' );
- this.shortcutsContainer = $( '<div class="ui-shortcutscroll"/>' );
+ this.shortcutsContainer = $( '<div class="ui-fastscroll"/>' );
this.shortcutsList = $( '<ul></ul>' );
// popup for the hovering character
- this.shortcutsContainer.append($( '<div class="ui-shortcutscroll-popup"></div>' ) );
- $popup = this.shortcutsContainer.find( '.ui-shortcutscroll-popup' );
+ this.shortcutsContainer.append($( '<div class="ui-fastscroll-popup"></div>' ) );
+ $popup = this.shortcutsContainer.find( '.ui-fastscroll-popup' );
this.shortcutsContainer.append( this.shortcutsList );
this.scrollview.append( this.shortcutsContainer );
self.shortcutsList.find( 'li' ).each( function () {
var listItem = $( this );
$( listItem )
- .removeClass( "ui-shortcutscroll-hover" )
- .removeClass( "ui-shortcutscroll-hover-up" )
- .removeClass( "ui-shortcutscroll-hover-down" );
+ .removeClass( "ui-fastscroll-hover" )
+ .removeClass( "ui-fastscroll-hover-up" )
+ .removeClass( "ui-fastscroll-hover-down" );
});
// Hit test each list item
self.shortcutsList.find( 'li' ).each( function () {
if ( coords.x >= l && coords.x <= r && coords.y >= t && coords.y <= b ) {
jumpToDivider( $( listItem.data( 'divider' ) ) );
- $( listItem ).addClass( "ui-shortcutscroll-hover" );
+ $( listItem ).addClass( "ui-fastscroll-hover" );
if ( listItem.index() > 0 ) {
- $( listItem ).siblings().eq( listItem.index() - 1 ).addClass( "ui-shortcutscroll-hover-up" );
+ $( listItem ).siblings().eq( listItem.index() - 1 ).addClass( "ui-fastscroll-hover-up" );
}
- $( listItem ).siblings().eq( listItem.index() ).addClass( "ui-shortcutscroll-hover-down" );
+ $( listItem ).siblings().eq( listItem.index() ).addClass( "ui-fastscroll-hover-down" );
return false;
}
return true;
e.preventDefault();
e.stopPropagation();
} )
- // bind mouseout of the shortcutscroll container to remove popup
+ // bind mouseout of the fastscroll container to remove popup
.bind( 'touchend mouseup vmouseup vmouseout', function () {
$popup.hide();
} );
} );
$( document ).bind( "pagecreate create", function ( e ) {
- $( $.tizen.shortcutscroll.prototype.options.initSelector, e.target )
+ $( $.tizen.fastscroll.prototype.options.initSelector, e.target )
.not( ":jqmData(role='none'), :jqmData(role='nojs')" )
- .shortcutscroll();
+ .fastscroll();
} );
} ( jQuery ) );