tooltip: add tooltip themesubmit/tizen/20200910.082306accepted/tizen/unified/20200911.043205

Since default theme is not installed, tooltip theme is added to
efl-theme-tizen-mobile.

Change-Id: Ifd42ea24af9552b9aedb91708533f10ccc81f544

11 files changed, 532 insertions, 0 deletions

diff --git a/mobile/HD/images/default/tooltip-base.png b/mobile/HD/images/default/tooltip-base.png
new file mode 100644
index 00000000..1dc44f38
--- /dev/null
+++ b/mobile/HD/images/default/tooltip-base.png
diff --git a/mobile/HD/images/default/tooltip-corner-bottom-left-tip.png b/mobile/HD/images/default/tooltip-corner-bottom-left-tip.png
new file mode 100644
index 00000000..aa134380
--- /dev/null
+++ b/mobile/HD/images/default/tooltip-corner-bottom-left-tip.png
diff --git a/mobile/HD/images/default/tooltip-corner-bottom-right-tip.png b/mobile/HD/images/default/tooltip-corner-bottom-right-tip.png
new file mode 100644
index 00000000..c4b1185c
--- /dev/null
+++ b/mobile/HD/images/default/tooltip-corner-bottom-right-tip.png
diff --git a/mobile/HD/images/default/tooltip-corner-top-left-tip.png b/mobile/HD/images/default/tooltip-corner-top-left-tip.png
new file mode 100644
index 00000000..34f2922d
--- /dev/null
+++ b/mobile/HD/images/default/tooltip-corner-top-left-tip.png
diff --git a/mobile/HD/images/default/tooltip-corner-top-right-tip.png b/mobile/HD/images/default/tooltip-corner-top-right-tip.png
new file mode 100644
index 00000000..5110f180
--- /dev/null
+++ b/mobile/HD/images/default/tooltip-corner-top-right-tip.png
diff --git a/mobile/HD/images/default/tooltip-edge-bottom-tip.png b/mobile/HD/images/default/tooltip-edge-bottom-tip.png
new file mode 100644
index 00000000..19d5c8b9
--- /dev/null
+++ b/mobile/HD/images/default/tooltip-edge-bottom-tip.png
diff --git a/mobile/HD/images/default/tooltip-edge-left-tip.png b/mobile/HD/images/default/tooltip-edge-left-tip.png
new file mode 100644
index 00000000..ebca377f
--- /dev/null
+++ b/mobile/HD/images/default/tooltip-edge-left-tip.png
diff --git a/mobile/HD/images/default/tooltip-edge-right-tip.png b/mobile/HD/images/default/tooltip-edge-right-tip.png
new file mode 100644
index 00000000..c4631e40
--- /dev/null
+++ b/mobile/HD/images/default/tooltip-edge-right-tip.png
diff --git a/mobile/HD/images/default/tooltip-edge-top-tip.png b/mobile/HD/images/default/tooltip-edge-top-tip.png
new file mode 100644
index 00000000..e04a0842
--- /dev/null
+++ b/mobile/HD/images/default/tooltip-edge-top-tip.png
diff --git a/mobile/efl-theme-tizen-mobile.edc b/mobile/efl-theme-tizen-mobile.edc
index 2f663e6c..8905f381 100644
--- a/mobile/efl-theme-tizen-mobile.edc
+++ b/mobile/efl-theme-tizen-mobile.edc
@@ -123,6 +123,7 @@ collections {
 #include "widgets/photocam.edc"
 #include "widgets/panes.edc"
 #include "widgets/map.edc"
+#include "widgets/tooltip.edc"
 
    color_classes {
       color_class {
diff --git a/mobile/widgets/tooltip.edc b/mobile/widgets/tooltip.edc
new file mode 100644
index 00000000..0ee06cca
--- /dev/null
+++ b/mobile/widgets/tooltip.edc
@@ -0,0 +1,531 @@
+#define TOOLTIP_BG_BORDER_INC 40 40 40 40
+#define TOOLTIP_ARROW_MIN_WIDTH_INC 62
+#define TOOLTIP_ARROW_MIN_HEIGHT_INC 62
+#define TOOLTIP_BG_PADDING_TOP_LEFT_WIDTH 40
+#define TOOLTIP_BG_PADDING_TOP_LEFT_HEIGHT 50
+#define TOOLTIP_BG_PADDING_BOTTOM_RIGHT_WIDTH 40
+#define TOOLTIP_BG_PADDING_BOTTOM_RIGHT_HEIGHT 50
+
+group { name: "elm/label/base/tooltip";
+   styles {
+      style { name: "tooltip_style";
+         base: "font=SLP:sytle=Bold font_size=30 color=#fff wrap=word";
+         tag:  "br" "\n";
+         tag:  "hilight" "+ font_weight=Bold";
+         tag:  "b" "+ font_weight=Bold";
+         tag:  "tab" "\t";
+      }
+   }
+   parts {
+      part { name: "elm.text";
+         type: TEXTBLOCK;
+         mouse_events: 0;
+         scale: 1;
+         description { state: "default" 0.0;
+            text {
+               style: "tooltip_style";
+               min: 1 1;
+            }
+         }
+      }
+   }
+}
+
+group { name: "elm/tooltip/base/default";
+   data {
+      item: "pad_x" "23";
+      item: "pad_y" "35";
+      item: "hide_timeout" "0.35";
+   }
+   images {
+      image: "tooltip-base.png" COMP;
+      image: "tooltip-corner-top-left-tip.png" COMP;
+      image: "tooltip-corner-top-right-tip.png" COMP;
+      image: "tooltip-corner-bottom-left-tip.png" COMP;
+      image: "tooltip-corner-bottom-right-tip.png" COMP;
+      image: "tooltip-edge-left-tip.png" COMP;
+      image: "tooltip-edge-right-tip.png" COMP;
+      image: "tooltip-edge-bottom-tip.png" COMP;
+      image: "tooltip-edge-top-tip.png" COMP;
+   }
+   script {
+      hide_corners() {
+         set_state(PART:"corner-top-left", "default", 0.0);
+         set_state(PART:"corner-top-right", "default", 0.0);
+         set_state(PART:"corner-bottom-left", "default", 0.0);
+         set_state(PART:"corner-bottom-right", "default", 0.0);
+      }
+      hide_edges() {
+         set_state(PART:"clipper-edge-left", "default", 0.0);
+         set_state(PART:"clipper-edge-right", "default", 0.0);
+         set_state(PART:"clipper-edge-top", "default", 0.0);
+         set_state(PART:"clipper-edge-bottom", "default", 0.0);
+      }
+
+      show_corner_top_left() {
+         set_state(PART:"corner-top-left", "visible", 0.0);
+
+         set_state(PART:"corner-top-right", "default", 0.0);
+         set_state(PART:"corner-bottom-left", "default", 0.0);
+         set_state(PART:"corner-bottom-right", "default", 0.0);
+         hide_edges();
+      }
+      show_corner_top_right() {
+         set_state(PART:"corner-top-right", "visible", 0.0);
+
+         set_state(PART:"corner-top-left", "default", 0.0);
+         set_state(PART:"corner-bottom-left", "default", 0.0);
+         set_state(PART:"corner-bottom-right", "default", 0.0);
+         hide_edges();
+      }
+
+      show_corner_bottom_left() {
+         set_state(PART:"corner-bottom-left", "visible", 0.0);
+
+         set_state(PART:"corner-bottom-right", "default", 0.0);
+         set_state(PART:"corner-top-left", "default", 0.0);
+         set_state(PART:"corner-top-right", "default", 0.0);
+         hide_edges();
+      }
+      show_corner_bottom_right() {
+         set_state(PART:"corner-bottom-right", "visible", 0.0);
+
+         set_state(PART:"corner-bottom-left", "default", 0.0);
+         set_state(PART:"corner-top-left", "default", 0.0);
+         set_state(PART:"corner-top-right", "default", 0.0);
+         hide_edges();
+      }
+
+      show_edge_left(Float:val) {
+         set_state(PART:"clipper-edge-left", "visible", 0.0);
+         set_drag(PART:"edge-drag-left", 0.0, val);
+
+         set_state(PART:"clipper-edge-right", "default", 0.0);
+         set_state(PART:"clipper-edge-top", "default", 0.0);
+         set_state(PART:"clipper-edge-bottom", "default", 0.0);
+         hide_corners();
+      }
+      show_edge_right(Float:val) {
+         set_state(PART:"clipper-edge-right", "visible", 0.0);
+         set_drag(PART:"edge-drag-right", 0.0, val);
+
+         set_state(PART:"clipper-edge-left", "default", 0.0);
+         set_state(PART:"clipper-edge-top", "default", 0.0);
+         set_state(PART:"clipper-edge-bottom", "default", 0.0);
+         hide_corners();
+      }
+
+      show_edge_top(Float:val) {
+         set_state(PART:"clipper-edge-top", "visible", 0.0);
+         set_drag(PART:"edge-drag-top", val, 0.0);
+
+         set_state(PART:"clipper-edge-bottom", "default", 0.0);
+         set_state(PART:"clipper-edge-left", "default", 0.0);
+         set_state(PART:"clipper-edge-right", "default", 0.0);
+         hide_corners();
+      }
+      show_edge_bottom(Float:val) {
+         set_state(PART:"clipper-edge-bottom", "visible", 0.0);
+         set_drag(PART:"edge-drag-bottom", val, 0.0);
+
+         set_state(PART:"clipper-edge-top", "default", 0.0);
+         set_state(PART:"clipper-edge-left", "default", 0.0);
+         set_state(PART:"clipper-edge-right", "default", 0.0);
+         hide_corners();
+      }
+
+      public message(Msg_Type:type, id, ...) {
+         if ((type == MSG_FLOAT_SET) && (id == 1)) {
+            new Float:x, Float:y;
+
+            x = getfarg(2);
+            y = getfarg(3);
+
+            if (x < 0.0)
+            {
+               if (y < 0.0)      show_corner_top_left();
+               else if (y > 1.0) show_corner_bottom_left();
+               else              show_edge_left(y);
+            }
+            else if (x > 1.0)
+            {
+               if (y < 0.0)      show_corner_top_right();
+               else if (y > 1.0) show_corner_bottom_right();
+               else              show_edge_right(y);
+            }
+            else
+            {
+               if (y < 0.0)      show_edge_top(x);
+               else if (y > 1.0) show_edge_bottom(x);
+               else
+               {
+                  hide_corners();
+                  hide_edges();
+               }
+            }
+         }
+      }
+   }
+   parts {
+      part { name: "clipper";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            color: 255 255 255 0;
+            rel1.to: "elm.padding.clipper.lt";
+            rel2.to: "elm.padding.clipper.rb";
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            color: 255 255 255 255;
+         }
+      }
+      part { name: "elm.padding.clipper.lt";
+         type: SPACER;
+         scale: 1;
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            align: 1 1;
+            min: TOOLTIP_BG_PADDING_TOP_LEFT_WIDTH TOOLTIP_BG_PADDING_TOP_LEFT_HEIGHT;
+            max: TOOLTIP_BG_PADDING_TOP_LEFT_WIDTH TOOLTIP_BG_PADDING_TOP_LEFT_HEIGHT;
+            rel1 {
+               to: "elm.swallow.content";
+               relative: 0 0;
+            }
+            rel2 {
+               to: "elm.swallow.content";
+               relative: 0 0;
+            }
+         }
+      }
+      part { name: "elm.padding.clipper.rb";
+         type: SPACER;
+         scale: 1;
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            align: 0 0;
+            min: TOOLTIP_BG_PADDING_TOP_LEFT_WIDTH TOOLTIP_BG_PADDING_TOP_LEFT_HEIGHT;
+            max: TOOLTIP_BG_PADDING_TOP_LEFT_WIDTH TOOLTIP_BG_PADDING_TOP_LEFT_HEIGHT;
+            rel1 {
+               to: "elm.swallow.content";
+               relative: 1 1;
+            }
+            rel2 {
+               to: "elm.swallow.content";
+               relative: 1 1;
+            }
+         }
+      }
+      part { name: "pop";
+         mouse_events: 0;
+         clip_to: "clipper";
+         scale: 1;
+         description { state: "default" 0.0;
+            rel1 {
+               to: "elm.padding.clipper.lt";
+            }
+            rel2 {
+               to: "elm.padding.clipper.rb";
+            }
+            image {
+               normal: "tooltip-base.png";
+               border: TOOLTIP_BG_BORDER_INC;
+               border_scale: 1;
+            }
+            image.middle: SOLID;
+         }
+      }
+      #define TT_CORNER(name_, rx, ry, ax, ay)                        \
+      part { name: "corner-"name_;                                 \
+         scale: 1;                                                 \
+         mouse_events: 0;                                          \
+         clip_to: "clipper";                                       \
+         description { state: "default" 0.0;                       \
+            color: 255 255 255 0;                                  \
+            visible: 0;                                            \
+            min: TOOLTIP_ARROW_MIN_WIDTH_INC TOOLTIP_ARROW_MIN_HEIGHT_INC;                                            \
+            max: TOOLTIP_ARROW_MIN_WIDTH_INC TOOLTIP_ARROW_MIN_HEIGHT_INC;                                            \
+            align: ax ay;                                          \
+            fixed: 1 1;                                            \
+            rel1 {                                                 \
+               relative: rx ry;                                    \
+               to: "pop";                          \
+            }                                                      \
+            rel2 {                                                 \
+               relative: rx ry;                                    \
+               to: "pop";                          \
+            }                                                      \
+            image.normal: "tooltip-corner-"name_"-tip.png";        \
+         }                                                         \
+         description { state: "visible" 0.0;                       \
+            inherit: "default" 0.0;                                \
+            color: 255 255 255 255;                                \
+            visible: 1;                                            \
+         }                                                         \
+      }
+      TT_CORNER("top-left", 0, 0, 0, 0);
+      TT_CORNER("top-right", 1, 0, 1, 0);
+      TT_CORNER("bottom-left", 0, 1, 0, 1);
+      TT_CORNER("bottom-right", 1, 1, 1, 1);
+      #undef TT_CORNER
+
+      #define TT_EDGE_VERT(name_, rx, ax)                                 \
+      part { name: "clipper-edge-"name_;                           \
+         type: RECT;                                               \
+         scale: 1;                                                 \
+         clip_to: "clipper";                                       \
+         description { state: "default" 0.0;                       \
+            color: 255 255 255 0;                                  \
+            visible: 0;                                            \
+            min: TOOLTIP_ARROW_MIN_WIDTH_INC TOOLTIP_ARROW_MIN_HEIGHT_INC;                                            \
+            align: ax 0.5;                                         \
+            fixed: 1 1;                                            \
+            rel1 {                                                 \
+               relative: rx 0.0;                                   \
+               to: "pop";                          \
+            }                                                      \
+            rel2 {                                                 \
+               relative: rx 1.0;                                   \
+               to: "pop";                          \
+            }                                                      \
+         }                                                         \
+         description { state: "visible" 0.0;                       \
+            inherit: "default" 0.0;                                \
+            color: 255 255 255 255;                                \
+            visible: 1;                                            \
+         }                                                         \
+      }                                                            \
+      part { name: "edge-area-"name_;                              \
+         type: RECT;                                               \
+         scale: 1;                                                 \
+         mouse_events: 0;                                          \
+         clip_to: "clipper-edge-"name_;                            \
+         description { state: "default" 0.0;                       \
+            color: 0 0 0 0;                                        \
+            min: TOOLTIP_ARROW_MIN_WIDTH_INC TOOLTIP_ARROW_MIN_HEIGHT_INC;                                            \
+            align: ax 0.5;                                         \
+            fixed: 1 1;                                            \
+            rel1 {                                                 \
+               relative: rx 0.0;                                   \
+               to: "pop";                          \
+            }                                                      \
+            rel2 {                                                 \
+               relative: rx 1.0;                                   \
+               to: "pop";                          \
+            }                                                      \
+         }                                                         \
+      }                                                            \
+      part { name: "edge-drag-"name_;                              \
+         type: RECT;                                               \
+         scale: 1;                                                 \
+         mouse_events: 0;                                          \
+         clip_to: "clipper-edge-"name_;                            \
+         dragable {                                                \
+            x: 0 0 0;                                             \
+            y: 1 1 0;                                             \
+            confine: "edge-area-"name_;                           \
+         }                                                         \
+         description { state: "default" 0.0;                       \
+            color: 0 0 0 0;                                        \
+            min: TOOLTIP_ARROW_MIN_WIDTH_INC TOOLTIP_ARROW_MIN_HEIGHT_INC;                                            \
+            rel1.to: "edge-area-"name_;                            \
+            rel2.to: "edge-area-"name_;                            \
+         }                                                         \
+      }                                                            \
+      part { name: "edge-img-"name_;                               \
+         scale: 1;                                                 \
+         mouse_events: 0;                                          \
+         clip_to: "clipper-edge-"name_;                            \
+         description { state: "default" 0.0;                       \
+            min: TOOLTIP_ARROW_MIN_WIDTH_INC TOOLTIP_ARROW_MIN_HEIGHT_INC;                                            \
+            max: TOOLTIP_ARROW_MIN_WIDTH_INC TOOLTIP_ARROW_MIN_HEIGHT_INC;                                            \
+            align: ax 0.5;                                         \
+            fixed: 1 1;                                            \
+            rel1.to: "edge-drag-"name_;                            \
+            rel2.to: "edge-drag-"name_;                            \
+            image.normal: "tooltip-edge-"name_"-tip.png";          \
+         }                                                         \
+      }
+      TT_EDGE_VERT("left", 0, 0);
+      TT_EDGE_VERT("right", 1, 1);
+      #undef TT_EDGE_VERT
+
+      #define TT_EDGE_HORIZ(name_, ry, ay)                                \
+      part { name: "clipper-edge-"name_;                           \
+         type: RECT;                                               \
+         scale: 1;                                                 \
+         clip_to: "clipper";                                       \
+         description { state: "default" 0.0;                       \
+            color: 255 255 255 0;                                  \
+            visible: 0;                                            \
+            min: TOOLTIP_ARROW_MIN_WIDTH_INC TOOLTIP_ARROW_MIN_HEIGHT_INC;                                            \
+            align: 0.5 ay;                                         \
+            fixed: 1 1;                                            \
+            rel1 {                                                 \
+               relative: 0.0 ry;                                   \
+               to: "pop";                          \
+            }                                                      \
+            rel2 {                                                 \
+               relative: 1.0 ry;                                   \
+               to: "pop";                          \
+            }                                                      \
+         }                                                         \
+         description { state: "visible" 0.0;                       \
+            inherit: "default" 0.0;                                \
+            color: 255 255 255 255;                                \
+            visible: 1;                                            \
+         }                                                         \
+      }                                                            \
+      part { name: "edge-area-"name_;                              \
+         type: RECT;                                               \
+         scale: 1;                                                 \
+         mouse_events: 0;                                          \
+         clip_to: "clipper-edge-"name_;                            \
+         description { state: "default" 0.0;                       \
+            color: 0 0 0 0;                                        \
+            min: TOOLTIP_ARROW_MIN_WIDTH_INC TOOLTIP_ARROW_MIN_HEIGHT_INC;                                            \
+            align: 0.5 ay;                                         \
+            fixed: 1 1;                                            \
+            rel1 {                                                 \
+               relative: 0.0 ry;                                   \
+               to: "pop";                          \
+            }                                                      \
+            rel2 {                                                 \
+               relative: 1.0 ry;                                   \
+               to: "pop";                          \
+            }                                                      \
+         }                                                         \
+      }                                                            \
+      part { name: "edge-drag-"name_;                              \
+         type: RECT;                                               \
+         scale: 1;                                                 \
+         mouse_events: 0;                                          \
+         clip_to: "clipper-edge-"name_;                            \
+         dragable {                                                \
+            x: 1 1 0;                                             \
+            y: 0 0 0;                                             \
+            confine: "edge-area-"name_;                           \
+         }                                                         \
+         description { state: "default" 0.0;                       \
+            color: 0 0 0 0;                                        \
+            min: TOOLTIP_ARROW_MIN_WIDTH_INC TOOLTIP_ARROW_MIN_HEIGHT_INC;                                            \
+            rel1.to: "edge-area-"name_;                            \
+            rel2.to: "edge-area-"name_;                            \
+         }                                                         \
+      }                                                            \
+      part { name: "edge-img-"name_;                               \
+         scale: 1;                                                 \
+         mouse_events: 0;                                          \
+         clip_to: "clipper-edge-"name_;                            \
+         description { state: "default" 0.0;                       \
+            min: TOOLTIP_ARROW_MIN_WIDTH_INC TOOLTIP_ARROW_MIN_HEIGHT_INC;                                            \
+            max: TOOLTIP_ARROW_MIN_WIDTH_INC TOOLTIP_ARROW_MIN_HEIGHT_INC;                                            \
+            align: 0.5 ay;                                         \
+            fixed: 1 1;                                            \
+            rel1.to: "edge-drag-"name_;                            \
+            rel2.to: "edge-drag-"name_;                            \
+            image.normal: "tooltip-edge-"name_"-tip.png";          \
+         }                                                         \
+      }
+      TT_EDGE_HORIZ("top", 0, 0);
+      TT_EDGE_HORIZ("bottom", 1, 1);
+      #undef TT_EDGE_HORIZ
+
+      part { name: "clipper_content";
+         type: RECT;
+         scale: 1;
+         description { state: "default" 0.0;
+            color: 255 255 255 0;
+            rel1.to: "elm.swallow.content";
+            rel2.to: "elm.swallow.content";
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            color: 255 255 255 255;
+         }
+      }
+      part { name: "elm.swallow.content";
+         type: SWALLOW;
+         scale: 1;
+         clip_to: "clipper_content";
+         description { state: "default" 0.0; }
+      }
+      programs {
+         program {
+            name: "show0";
+            signal: "elm,action,show";
+            source: "elm";
+            action: ACTION_STOP;
+            target: "hide0";
+            target: "hide1";
+            target: "hide2";
+            target: "hide3";
+            after: "show1";
+            after: "show2";
+         }
+         program {
+            name: "show1";
+            action: STATE_SET "visible" 0.0;
+            transition: LINEAR 0.15;
+            target: "clipper";
+         }
+         program {
+            name: "show2";
+            in: 0.1 0.0;
+            action: STATE_SET "visible" 0.0;
+            transition: LINEAR 0.15;
+            target: "clipper_content";
+         }
+
+         program {
+            name: "hide0";
+            signal: "elm,action,hide";
+            source: "elm";
+            action: ACTION_STOP;
+            target: "show0";
+            target: "show1";
+            target: "show2";
+            after: "hide1";
+            after: "hide2";
+            after: "hide3";
+         }
+         program {
+            name: "hide1";
+            script {
+               hide_corners();
+               hide_edges();
+            }
+         }
+         program {
+            name: "hide2";
+            action: STATE_SET "default" 0.0;
+            transition: LINEAR 0.1;
+            target: "clipper_content";
+         }
+         program {
+            name: "hide3";
+            in: 0.1 0.0;
+            action: STATE_SET "default" 0.0;
+            transition: LINEAR 0.1;
+            target: "clipper";
+         }
+      }
+   }
+}
+group { name: "elm/tooltip/base/transparent";
+   data {
+      item: "pad_x" "10";
+      item: "pad_y" "10";
+      item: "transparent" "enabled";
+   }
+   parts {
+      part { name: "elm.swallow.content";
+         type: SWALLOW;
+         mouse_events:   0;
+         scale: 1;
+         description { state: "default" 0.0; }
+      }
+   }
+}
+
+///////////////////////////////////////////////////////////////////////////////