index: apply Tizen 6.0 IoT GUI to fastscroll item

Change-Id: I21262ad05ea7f378da6ccc18940cca24c58a45da

10 files changed, 119 insertions, 250 deletions

diff --git a/common/HD-inc.edc b/common/HD-inc.edc
index 54c459f..08440f8 100644
--- a/common/HD-inc.edc
+++ b/common/HD-inc.edc
@@ -648,24 +648,20 @@
 //****************************************************************************//
 // Index
 //****************************************************************************//
-// FastScrol
-#define INDEX_ITEM_WIDTH_INC                        45 // 43 + 2
-#define INDEX_ITEM_HEIGHT_INC                       51 // 49 + 2
-#define INDEX_ITEM_TEXT_WIDTH_INC                   43
-#define INDEX_ITEM_TEXT_HEIGHT_INC                  49
-#define INDEX_DIVIDER_HEIGHT_INC                    2
-#define INDEX_SCROLL_BG_LINE_WIDTH_INC              2
+// FastScroll
+#define INDEX_ITEM_SIZE_INC                         16 26 // 4 + 18 + 4
+#define INDEX_ITEM_WIDTH_INC                        16
+#define INDEX_ITEM_BG_FIRST_SIZE_INC                16 16 // 20 - 4
+
+// FastScroll Horizontal
+#define INDEX_ITEM_SIZE_HORIZONTAL_INC              24 18 // 24 = 4 + 16 + 4
+#define INDEX_ITEM_HEIGHT_HORIZONTAL_INC            18
+
+// FastScroll Popup
 #define INDEX_TEXT_LEFT_PADDING_SIZE_INC            16
 #define INDEX_TEXT_RIGHT_PADDING_SIZE_INC           16
 #define INDEX_SCROLL_TEXT1_DEFAULT_SIZE_INC         48 80
 
-// FastScroll Horizontal
-#define INDEX_DIVIDER_WIDTH_INC                     2
-#define INDEX_SCROLL_BG_LINE_HEIGHT_INC             2
-#define INDEX_ITEM_TOP_PADDING_SIZE_INC             12 // 10 + 2
-#define INDEX_ITEM_BOTTOM_PADDING_SIZE_INC          21
-#define INDEX_ITEM_BG_BOTTOM_PADDING_SIZE_INC       14
-
 // Page Control
 #define INDEX_PAGECONTROL_IND_INC 42 40
 #define INDEX_PAGECONTROL_IND_MIN_INC 40 40
diff --git a/common/HD/images/Navigation_elements/core_index_fastscroll_bottom.#.png b/common/HD/images/Navigation_elements/core_index_fastscroll_bottom.#.png
new file mode 100644
index 0000000..e07b5c8
--- /dev/null
+++ b/common/HD/images/Navigation_elements/core_index_fastscroll_bottom.#.png
diff --git a/common/HD/images/Navigation_elements/core_index_fastscroll_left.#.png b/common/HD/images/Navigation_elements/core_index_fastscroll_left.#.png
new file mode 100644
index 0000000..aeef4d0
--- /dev/null
+++ b/common/HD/images/Navigation_elements/core_index_fastscroll_left.#.png
diff --git a/common/HD/images/Navigation_elements/core_index_fastscroll_right.#.png b/common/HD/images/Navigation_elements/core_index_fastscroll_right.#.png
new file mode 100644
index 0000000..d7d8ffe
--- /dev/null
+++ b/common/HD/images/Navigation_elements/core_index_fastscroll_right.#.png
diff --git a/common/HD/images/Navigation_elements/core_index_fastscroll_rollover_line_focus.#.png b/common/HD/images/Navigation_elements/core_index_fastscroll_rollover_line_focus.#.png
deleted file mode 100644
index d48d1aa..0000000
--- a/common/HD/images/Navigation_elements/core_index_fastscroll_rollover_line_focus.#.png
+++ /dev/null
diff --git a/common/HD/images/Navigation_elements/core_index_fastscroll_rollover_line_focus_horizontal.#.png b/common/HD/images/Navigation_elements/core_index_fastscroll_rollover_line_focus_horizontal.#.png
deleted file mode 100644
index c53ff5d..0000000
--- a/common/HD/images/Navigation_elements/core_index_fastscroll_rollover_line_focus_horizontal.#.png
+++ /dev/null
diff --git a/common/HD/images/Navigation_elements/core_index_fastscroll_top.#.png b/common/HD/images/Navigation_elements/core_index_fastscroll_top.#.png
new file mode 100644
index 0000000..3fe8492
--- /dev/null
+++ b/common/HD/images/Navigation_elements/core_index_fastscroll_top.#.png
diff --git a/common/color_classes.edc b/common/color_classes.edc
index 8112852..50afe29 100644
--- a/common/color_classes.edc
+++ b/common/color_classes.edc
@@ -1297,22 +1297,13 @@ color_classes {
       color: 255 255 255 255;
    }
    color_class { "index_item/default/bg";
-      color: 250 250 250 255;
-   }
-   color_class { "index_item/default/border";
-      color: 61 185 204 77;
-   }
-   color_class { "index_item/default/line";
-      color: 61 185 204 77;
-   }
-   color_class { "index_item/default/divider";
-      color: 61 185 204 26;
+      color: 10 14 74 255; // #0A0E4A Opacity 1
    }
    color_class { "index_item/default/text";
-      color: 61 185 204 222;
+      color: 255 255 255 255;
    }
    color_class { "index_item/default/text_pressed";
-      color: 61 185 204 222;
+      color: 255 255 255 255;
    }
    color_class { "index_item/pagecontrol/icon";
       color: 250 250 250 128;
diff --git a/common/widgets/index.edc b/common/widgets/index.edc
index e51ae14..3642ffa 100644
--- a/common/widgets/index.edc
+++ b/common/widgets/index.edc
@@ -213,6 +213,8 @@
       nomouse;
       images {
          image: "core_index_fastscroll_popup_bg.#.png" COMP;
+         image: "core_index_fastscroll_top.#.png" COMP;
+         image: "core_index_fastscroll_bottom.#.png" COMP;
       }
       parts {
          spacer { "base";
@@ -247,18 +249,52 @@
          rect { "bg";
             clip: "clipper";
             desc { "default";
-               rel.to_x: "elm.swallow.index.0";
-               rel.to_y: "base";
+               rel1.to_x: "elm.swallow.index.0";
+               rel1.to_y: "bg_first";
+               rel2.to_x: "elm.swallow.index.0";
+               rel2.to_y: "bg_last";
                color_class: "index/default/bg";
             }
          }
+         image { "bg_first";
+            scale;
+            desc { "default";
+               image.normal: "core_index_fastscroll_top.#.png";
+               min: INDEX_ITEM_BG_FIRST_SIZE_INC;
+               max: INDEX_ITEM_BG_FIRST_SIZE_INC;
+               rel1.relative: 1.0 0.0;
+               rel2.relative: 1.0 0.0;
+               align: 1.0 0.0;
+               fixed: 1 1;
+               color_class: "index_item/default/bg";
+            }
+         }
+         image { "bg_last";
+            scale;
+            desc { "default";
+               image.normal: "core_index_fastscroll_bottom.#.png";
+               min: INDEX_ITEM_BG_FIRST_SIZE_INC;
+               max: INDEX_ITEM_BG_FIRST_SIZE_INC;
+               rel1.relative: 1.0 1.0;
+               rel2.relative: 1.0 1.0;
+               align: 1.0 1.0;
+               fixed: 1 1;
+               color_class: "index_item/default/bg";
+            }
+         }
          swallow { "elm.swallow.index.0";
             clip: "clipper";
             desc { "default";
                align: 1.0 0.5;
                fixed: 1 1;
-               rel.to:"base";
-               rel1.relative: 1.0 0.0;
+               rel1 {
+                  to_y: "bg_first";
+                  relative: 1.0 1.0;
+               }
+               rel2 {
+                  to_y: "bg_last";
+                  relative: 1.0 0.0;
+               }
             }
          }
          // Popup Indicator group: "clipper_indicator "popup_bg" "sizer_text"
@@ -407,114 +443,42 @@
       data.item: "stacking" "above";
       data.item: "selectraise" "on";
       nomouse;
-      images {
-         image: "core_index_fastscroll_rollover_line_focus.#.png" COMP;
-      }
       parts {
-         rect { "base";
-            scale;
-            desc { "default";
-               min: INDEX_ITEM_WIDTH_INC INDEX_ITEM_HEIGHT_INC;
-               color: 255 255 255 255;
-               hid;
-            }
-            desc { "active";
-               inherit: "default";
-               vis;
-            }
-         }
-         spacer { "padding_right";
+         spacer { "base";
             scale;
             desc { "default";
-               align: 1.0 0.5;
-               min: INDEX_SCROLL_BG_LINE_WIDTH_INC 0;
-               fixed: 1 0;
-               rel.to: "base";
-               rel1.relative: 1.0 0.0;
+               min: INDEX_ITEM_SIZE_INC;
             }
          }
-         spacer { "padding_top_bg_item";
+         rect { "bg";
             scale;
             desc { "default";
-               align: 0.5 1.0;
                rel.to: "base";
-               rel2.relative: 1.0 0.0;
-               min: 0 INDEX_SCROLL_BG_LINE_WIDTH_INC;
-               fixed: 0 1;
+               color_class: "index_item/default/bg";
             }
          }
          text { "elm.text";
             scale;
             desc { "default";
-               min: INDEX_ITEM_TEXT_WIDTH_INC INDEX_ITEM_TEXT_HEIGHT_INC;
                fixed: 1 1;
-               rel1 {
-                  to_x: "bg_line_left";
-                  to_y: "base";
-               }
-               rel2 {
-                  to_x: "base";
-                  to_y: "bg_divider";
-                  relative: 1.0 0.0;
-               }
+               rel.to: "base";
                text {
-                  font: "Tizen:weight=Light";
-                  size: 24;
-                  size_range: 18 24;
-                  fit: 1 0;
+                  font: "Tizen:style=Light";
+                  size: 14;
                   text_class: "tizen";
                }
                color_class: "index_item/default/text";
             }
             desc { "active";
                inherit: "default";
+               text {
+                  font: "Tizen:style=Bold";
+                  size: 14;
+                  text_class: "tizen";
+               }
                color_class: "index_item/default/text_pressed";
             }
          }
-         rect { "bg_line_left";
-            scale;
-            desc { "default";
-               align: 0.0 0.5;
-               min: INDEX_SCROLL_BG_LINE_WIDTH_INC 0;
-               fixed: 1 0;
-               rel.to: "base";
-               rel2.relative: 0.0 1.0;
-               color_class: "index_item/default/line";
-            }
-            desc { "active";
-               inherit: "default";
-            }
-         }
-         rect { "bg_divider";
-            scale;
-            desc { "default";
-               align: 0.5 1.0;
-               min: 0 INDEX_DIVIDER_HEIGHT_INC;
-               fixed: 0 1;
-               rel.to: "base";
-               rel1.relative: 0.0 1.0;
-               color_class: "index_item/default/divider";
-            }
-            desc { "inactive";
-               inherit: "default";
-               hid;
-            }
-         }
-         image { "bg_item";
-            scale;
-            desc { "default";
-               image.normal: "core_index_fastscroll_rollover_line_focus.#.png";
-               rel1.to: "padding_top_bg_item";
-               rel2.to: "bg_divider";
-               fixed: 1 1;
-               color_class: "index_item/default/border";
-               hid;
-            }
-            desc { "active";
-               inherit: "default";
-               vis;
-            }
-         }
       }
       inherit: "elm/index/item/event/default";
       programs {
@@ -522,29 +486,11 @@
             action: STATE_SET "active";
             transition: DECELERATE 0.0;
             target: "elm.text";
-            target: "bg_line_left";
-            target: "bg_item";
-            target: "base";
          }
          program { "on_inactive";
             action: STATE_SET "default";
             transition: DECELERATE 0.0;
             target: "elm.text";
-            target: "bg_line_left";
-            target: "bg_item";
-            target: "base";
-         }
-         program { "item_default";
-            signal: "elm,order,default,item";
-            source: "elm";
-            action: STATE_SET "default";
-            target: "bg_divider";
-         }
-         program { "item_last";
-            signal: "elm,order,last,item";
-            source: "elm";
-            action: STATE_SET "inactive";
-            target: "bg_divider";
          }
       }
    }
@@ -552,6 +498,8 @@
       nomouse;
       images {
          image: "core_index_fastscroll_popup_bg.#.png" COMP;
+         image: "core_index_fastscroll_left.#.png" COMP;
+         image: "core_index_fastscroll_right.#.png" COMP;
       }
       parts {
          spacer { "base";
@@ -586,18 +534,52 @@
          rect { "bg";
             clip: "clipper";
             desc { "default";
-               rel.to_x: "base";
-               rel.to_y: "elm.swallow.index.0";
+               rel1.to_x: "bg_first";
+               rel1.to_y: "elm.swallow.index.0";
+               rel2.to_x: "bg_last";
+               rel2.to_y: "elm.swallow.index.0";
                color_class: "index/default/bg";
             }
          }
+         image { "bg_first";
+            scale;
+            desc { "default";
+               image.normal: "core_index_fastscroll_left.#.png";
+               min: INDEX_ITEM_BG_FIRST_SIZE_INC;
+               max: INDEX_ITEM_BG_FIRST_SIZE_INC;
+               rel1.relative: 0.0 1.0;
+               rel2.relative: 0.0 1.0;
+               align: 0.0 1.0;
+               fixed: 1 1;
+               color_class: "index_item/default/bg";
+            }
+         }
+         image { "bg_last";
+            scale;
+            desc { "default";
+               image.normal: "core_index_fastscroll_right.#.png";
+               min: INDEX_ITEM_BG_FIRST_SIZE_INC;
+               max: INDEX_ITEM_BG_FIRST_SIZE_INC;
+               rel1.relative: 1.0 1.0;
+               rel2.relative: 1.0 1.0;
+               align: 1.0 1.0;
+               fixed: 1 1;
+               color_class: "index_item/default/bg";
+            }
+         }
          swallow { "elm.swallow.index.0";
             clip: "clipper";
             desc { "default";
                align: 0.5 1.0;
                fixed: 1 1;
-               rel.to:"base";
-               rel1.relative: 0.0 1.0;
+               rel1 {
+                  to_x: "bg_first";
+                  relative: 1.0 1.0;
+               }
+               rel2 {
+                  to_x: "bg_last";
+                  relative: 0.0 1.0;
+               }
             }
          }
          // Popup Indicator group: "clipper_indicator "popup_bg" "sizer_text"
@@ -746,124 +728,42 @@
       data.item: "stacking" "above";
       data.item: "selectraise" "on";
       nomouse;
-      images {
-         image: "core_index_fastscroll_rollover_line_focus_horizontal.#.png" COMP;
-      }
       parts {
-         rect { "base";
+         spacer { "base";
             scale;
             desc { "default";
-               min: INDEX_ITEM_WIDTH_INC INDEX_ITEM_HEIGHT_INC;
-               max: INDEX_ITEM_WIDTH_INC INDEX_ITEM_HEIGHT_INC;
-               color_class: "index_item/default/bg";
-            }
-            desc { "active";
-               inherit: "default";
+               min: INDEX_ITEM_SIZE_HORIZONTAL_INC;
             }
          }
-         spacer { "padding_top_left";
+         rect { "bg";
             scale;
             desc { "default";
-               align: 0.0 0.0;
-               min: 0 INDEX_ITEM_TOP_PADDING_SIZE_INC;
-               fixed: 1 1;
                rel.to: "base";
-               rel2.relative: 0.0 0.0;
+               color_class: "index_item/default/bg";
             }
          }
-         spacer { "padding_bottom_right";
+         text { "elm.text";
             scale;
             desc { "default";
-               align: 1.0 1.0;
-               min: INDEX_DIVIDER_WIDTH_INC INDEX_ITEM_BOTTOM_PADDING_SIZE_INC;
                fixed: 1 1;
                rel.to: "base";
-               rel1.relative: 1.0 1.0;
-            }
-         }
-         rect { "bg_divider";
-            scale;
-            desc { "default";
-               align: 1.0 0.5;
-               min: INDEX_DIVIDER_WIDTH_INC 0;
-               max: INDEX_DIVIDER_WIDTH_INC -1;
-               fixed: 1 0;
-               rel1.to_x: "base";
-               rel1.to_y: "bg_line_top";
-               rel2.to: "base";
-               rel1.relative: 1.0 1.0;
-               color_class: "index_item/default/divider";
-            }
-            desc { "inactive";
-               inherit: "default";
-               hid;
-            }
-         }
-         text { "elm.text";
-            scale;
-            desc { "default";
-               rel1 {
-                  to: "padding_top_left";
-                  relative: 1.0 1.0;
-               }
-               rel2 {
-                  to: "padding_bottom_right";
-                  relative: 0.0 0.0;
-               }
                text {
-                  font: "Tizen:weight=Light";
-                  size: 21;
+                  font: "Tizen:style=Light";
+                  size: 14;
                   text_class: "tizen";
                }
                color_class: "index_item/default/text";
             }
             desc { "active";
                inherit: "default";
+               text {
+                  font: "Tizen:style=Bold";
+                  size: 14;
+                  text_class: "tizen";
+               }
                color_class: "index_item/default/text_pressed";
             }
          }
-         rect { "bg_line_top";
-            scale;
-            desc { "default";
-               align: 0.5 0.0;
-               min: 0 INDEX_SCROLL_BG_LINE_HEIGHT_INC;
-               fixed: 0 1;
-               rel.to: "base";
-               rel2.relative: 1.0 0.0;
-               color_class: "index_item/default/line";
-            }
-            desc { "active";
-               inherit: "default";
-               color_class: "index_item/default/divider";
-            }
-         }
-         spacer { "padding_bg_bottom_right";
-            scale;
-            desc { "default";
-               align: 1.0 1.0;
-               min: 0 INDEX_ITEM_BG_BOTTOM_PADDING_SIZE_INC;
-               fixed: 1 1;
-               rel.to: "base";
-               rel1.relative: 1.0 1.0;
-            }
-         }
-         image { "bg_item";
-            scale;
-            desc { "default";
-               image.normal: "core_index_fastscroll_rollover_line_focus_horizontal.#.png";
-               rel1.to: "base";
-               rel2.to: "padding_bg_bottom_right";
-               rel1.offset: -1 0; //To cover this item's left item's divider
-               rel2.relative: 1.0 0.0;
-               fixed: 1 1;
-               color_class: "index_item/default/border";
-               hid;
-            }
-            desc { "active";
-               inherit: "default";
-               vis;
-            }
-         }
       }
       inherit: "elm/index/item/event/default";
       programs {
@@ -871,29 +771,11 @@
             action: STATE_SET "active";
             transition: DECELERATE 0.0;
             target: "elm.text";
-            target: "bg_line_top";
-            target: "bg_item";
-            target: "base";
          }
          program { "on_inactive";
             action: STATE_SET "default";
             transition: DECELERATE 0.0;
             target: "elm.text";
-            target: "bg_line_top";
-            target: "bg_item";
-            target: "base";
-         }
-         program { "item_default";
-            signal: "elm,order,default,item";
-            source: "elm";
-            action: STATE_SET "default";
-            target: "bg_divider";
-         }
-         program { "item_last";
-            signal: "elm,order,last,item";
-            source: "elm";
-            action: STATE_SET "inactive";
-            target: "bg_divider";
          }
       }
    }
diff --git a/common/widgets/layout.edc b/common/widgets/layout.edc
index b90229f..a117272 100644
--- a/common/widgets/layout.edc
+++ b/common/widgets/layout.edc
@@ -260,8 +260,8 @@ group { "elm/layout/application/fastscroll";
          desc { "default";
             rel1.relative: 1.0 1.0;
             align: 1.0 1.0;
-            min: 0 INDEX_ITEM_HEIGHT_INC;
-            max: 0 INDEX_ITEM_HEIGHT_INC;
+            min: 0 INDEX_ITEM_HEIGHT_HORIZONTAL_INC;
+            max: 0 INDEX_ITEM_HEIGHT_HORIZONTAL_INC;
             fixed: 1 1;
          }
       }