projects / platform / framework / web / web-ui-fw.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (from parent 1: e7cafbd)
add divider for tabbar
authorJinhyuk Jun <jinhyuk.jun@samsung.com>
Mon, 17 Dec 2012 06:02:29 +0000 (15:02 +0900)
committerGerrit Code Review <gerrit2@kim11>
Thu, 20 Dec 2012 11:04:37 +0000 (20:04 +0900)
Change-Id: I50093a9625542b1ae828814a30ba3ef431cc4a9a

demos/tizen-winsets/widgets/tabbar/tabbar_footer_more.html patch | blob | history
src/themes/tizen/common/jquery.mobile.tizen.tabbar.less patch | blob | history
src/themes/tizen/tizen-white/style.less patch | blob | history

diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_footer_more.html b/demos/tizen-winsets/widgets/tabbar/tabbar_footer_more.html
index cceab6c..86c7076 100755 (executable)
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_footer_more.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_footer_more.html
@@ -11,7 +11,7 @@
        </head> 
 <body> 
 
-<div data-role="page">
+<div data-role="page" data-add-back-btn=true>
        <div data-role="header" data-position="fixed">
                <h1>Tabbar text with title</h1>
        </div>
diff --git a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less
index 8e8e36c..4af67ae 100755 (executable)
--- a/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.tabbar.less
@@ -7,16 +7,29 @@
        background : @color_bg;
        z-index : 1000;
        &.ui-portrait-tabbar {
-               height : 55 * @unit_base;
+               /* portrait style */
        }
        &.ui-landscape-tabbar {
-               height : 55 * @unit_base;
+               /* landscape style */
        }
 
        a.ui-btn {
                background : @color_bg;
                color : @color_tabbar_btn_normal;
 
+               padding-top : 19 * @unit_base;
+               padding-bottom : 19 * @unit_base;
+               .ui-btn-inner {
+                       padding-top : 0px;
+                       padding-bottom : 0px;
+                       border-left : 1px solid;
+                       border-color : @color_bar_divider_line;
+                       border-radius : 0px;
+                       -0-border-radius : 0px;
+                       -ms-border-radius : 0px;
+                       -webkit-border-radius : 0px;
+               }
+
                .ui-icon {
                        width: 32 * @unit_base;
                        height: 32 * @unit_base;
@@ -55,9 +68,6 @@
        }
 
        .ui-btn-inner {
-               padding-top : 44 * @unit_base;
-               padding-bottom : 3 * @unit_base;
-
                font-size : 15 * @unit_base;
                font-weight : bold;
 
@@ -68,20 +78,16 @@
                }
        }
 
-       &.ui-tabbar-noicons {
-               .ui-btn-inner {
-                       padding-top : 19 * @unit_base;
-                       padding-bottom : 18 * @unit_base;
-               }
-       }
-
        &.ui-tabbar-notext {
-               .ui-btn-inner {
-                       padding-top : 50 * @unit_base;
-                       padding-bottom : 5 * @unit_base;
+               a.ui-btn {
+                       padding-top : 11 * @unit_base;
+                       padding-bottom : 10 * @unit_base;
 
+               }
+               .ui-btn-inner {
+                       height : 34 * @unit_base;
                        .ui-icon {
-                               top : 11 * @unit_base;
+                               top : 0px;
                        }
                }
        }
@@ -97,40 +103,53 @@
 
        .ui-tabbar {
                &.ui-tabbar-noicons {
-                       .ui-btn-inner {
+                       a.ui-btn {
                                padding-top : 15 * @unit_base;
                                padding-bottom : 13 * @unit_base;
                        }
                }
 
                &.ui-tabbar-notext {
-                       .ui-btn-inner {
-                               padding-top : 47 * @unit_base;
-                               padding-bottom : 0 * @unit_base;
+                       a.ui-btn {
+                               padding-top : 7 * @unit_base;
+                               padding-bottom : 5 * @unit_base;
                        }
                }
 
                &.ui-portrait-tabbar {
-                       height : 47 * @unit_base;
+                       /* portrait style */
                }
-
                &.ui-landscape-tabbar {
-                       height : 40 * @unit_base;
+                       /* landscape style */
                }
        }
 }
 
 .ui-header.ui-bar-s {
        &.ui-title-tabbar-multiline {
-               height : 75 * @unit_base;
                .ui-tabbar {
-                       height : 75 * @unit_base;
-                       .ui-btn-inner {
-                               padding-top : 45 * @unit_base;
+                       a.ui-btn {
+                               padding-top : 11 * @unit_base;
                                padding-bottom : 10 * @unit_base;
+                               .ui-btn-inner {
+                                       height : 54 * @unit_base;
+                                       .ui-btn-text {
+                                               padding-top : 0px;
+                                               line-height : 85 * @unit_base;
+                                       }
+                                       .ui-icon {
+                                               top : 0px;
+                                       }
+                               }
                        }
                }
        }
+
+       li:first-child {
+               .ui-btn-inner {
+                       border-left-width : 0px;
+               }
+       }
 }
 
 
@@ -141,9 +160,24 @@
                margin-left : auto;
                margin-right : auto;
 
+               a.ui-btn {
+                       padding-top : 16 * @unit_base;
+                       padding-bottom : 16 * @unit_base;
+               }
                .ui-btn-inner {
                        .ui-icon {
-                               top : 7 * @unit_base;
+                               top : 0px;
+                       }
+               }
+               &.ui-tabbar-notext {
+                       a.ui-btn {
+                               padding-top : 8 * @unit_base;
+                               padding-bottom : 7 * @unit_base;
+                       }
+               }
+               li:first-child {
+                       .ui-btn-inner {
+                               border-left-width : 0px;
                        }
                }
        }
@@ -156,6 +190,22 @@
                margin-left : 56 * @unit_base;
        }
 
+       .ui-btn-back ~ .ui-tabbar {
+               li:last-child {
+                       .ui-btn-inner {
+                               border-right : 1px solid;
+                               border-right-color : @color_bar_divider_line;
+                       }
+               }
+       }
+       [data-icon="naviframe-more"] ~ .ui-tabbar {
+               li:first-child {
+                       .ui-btn-inner {
+                               border-left : 1px solid;
+                               border-left-color : @color_bar_divider_line;
+                       }
+               }
+       }
 }
 
 .ui-tabbar-s.ui-navbar-noicons {
diff --git a/src/themes/tizen/tizen-white/style.less b/src/themes/tizen/tizen-white/style.less
index 9bd6968..3d26c77 100755 (executable)
--- a/src/themes/tizen/tizen-white/style.less
+++ b/src/themes/tizen/tizen-white/style.less
@@ -20,7 +20,7 @@
 /***************************************************************************
                    Tabbar
 ***************************************************************************/
-@color_tabbar_btn_tab_press : -webkit-linear-gradient(top,  rgba(169,165,151,1) 0%,rgba(246,248,239,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */
+@color_tabbar_btn_tab_press : -webkit-linear-gradient(top,  rgba(210,210,200,1) 0%,rgba(246,248,239,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */
 @color_tabbar_btn_pressed : rgba(59, 115, 182, 1);             /* B052L6P      : Tab pressed */
 @color_tabbar_btn_normal : rgba(153, 153, 153, 1);     /* B052L6               : Tab Normal */
 
Domain: Web Framework / Uncategorized;