data/themes/widgets/tooltip.edc

   1 group { name: "elm/label/base/tooltip";
   2    styles {
   3       style { name: "tooltip_style";
   4          base: "font=Sans font_size=8 color=#666 wrap=word";
   5          tag:  "br" "\n";
   6          tag:  "hilight" "+ font_weight=Bold";
   7          tag:  "b" "+ font_weight=Bold";
   8          tag:  "tab" "\t";
   9       }
  10    }
  11    parts {
  12       part { name: "elm.text";
  13          type: TEXTBLOCK;
  14          mouse_events: 0;
  15          scale: 1;
  16          description { state: "default" 0.0;
  17             text {
  18                style: "tooltip_style";
  19                min: 1 1;
  20             }
  21          }
  22       }
  23    }
  24 }
  25
  26 group { name: "elm/tooltip/base/default";
  27    min: 30 30;
  28    data {
  29       item: "pad_x" "20";
  30       item: "pad_y" "20";
  31       item: "pad_border_x" "10";
  32       item: "pad_border_y" "10";
  33       item: "hide_timeout" "0.35"; /**< tooltip is hidden after this amount, keep in sync with hide animations */
  34    }
  35    images {
  36       image: "tooltip-base.png" COMP;
  37       image: "tooltip-corner-top-left-tip.png" COMP;
  38       image: "tooltip-corner-top-right-tip.png" COMP;
  39       image: "tooltip-corner-bottom-left-tip.png" COMP;
  40       image: "tooltip-corner-bottom-right-tip.png" COMP;
  41       image: "tooltip-edge-left-tip.png" COMP;
  42       image: "tooltip-edge-right-tip.png" COMP;
  43       image: "tooltip-edge-bottom-tip.png" COMP;
  44       image: "tooltip-edge-top-tip.png" COMP;
  45    }
  46    script {
  47       hide_corners() {
  48          set_state(PART:"corner-top-left", "default", 0.0);
  49          set_state(PART:"corner-top-right", "default", 0.0);
  50          set_state(PART:"corner-bottom-left", "default", 0.0);
  51          set_state(PART:"corner-bottom-right", "default", 0.0);
  52       }
  53       hide_edges() {
  54          set_state(PART:"clipper-edge-left", "default", 0.0);
  55          set_state(PART:"clipper-edge-right", "default", 0.0);
  56          set_state(PART:"clipper-edge-top", "default", 0.0);
  57          set_state(PART:"clipper-edge-bottom", "default", 0.0);
  58       }
  59
  60       show_corner_top_left() {
  61          set_state(PART:"corner-top-left", "visible", 0.0);
  62
  63          set_state(PART:"corner-top-right", "default", 0.0);
  64          set_state(PART:"corner-bottom-left", "default", 0.0);
  65          set_state(PART:"corner-bottom-right", "default", 0.0);
  66          hide_edges();
  67       }
  68       show_corner_top_right() {
  69          set_state(PART:"corner-top-right", "visible", 0.0);
  70
  71          set_state(PART:"corner-top-left", "default", 0.0);
  72          set_state(PART:"corner-bottom-left", "default", 0.0);
  73          set_state(PART:"corner-bottom-right", "default", 0.0);
  74          hide_edges();
  75       }
  76
  77       show_corner_bottom_left() {
  78          set_state(PART:"corner-bottom-left", "visible", 0.0);
  79
  80          set_state(PART:"corner-bottom-right", "default", 0.0);
  81          set_state(PART:"corner-top-left", "default", 0.0);
  82          set_state(PART:"corner-top-right", "default", 0.0);
  83          hide_edges();
  84       }
  85       show_corner_bottom_right() {
  86          set_state(PART:"corner-bottom-right", "visible", 0.0);
  87
  88          set_state(PART:"corner-bottom-left", "default", 0.0);
  89          set_state(PART:"corner-top-left", "default", 0.0);
  90          set_state(PART:"corner-top-right", "default", 0.0);
  91          hide_edges();
  92       }
  93
  94       show_edge_left(Float:val) {
  95          set_state(PART:"clipper-edge-left", "visible", 0.0);
  96          set_drag(PART:"edge-drag-left", 0.0, val);
  97
  98          set_state(PART:"clipper-edge-right", "default", 0.0);
  99          set_state(PART:"clipper-edge-top", "default", 0.0);
 100          set_state(PART:"clipper-edge-bottom", "default", 0.0);
 101          hide_corners();
 102       }
 103       show_edge_right(Float:val) {
 104          set_state(PART:"clipper-edge-right", "visible", 0.0);
 105          set_drag(PART:"edge-drag-right", 0.0, val);
 106
 107          set_state(PART:"clipper-edge-left", "default", 0.0);
 108          set_state(PART:"clipper-edge-top", "default", 0.0);
 109          set_state(PART:"clipper-edge-bottom", "default", 0.0);
 110          hide_corners();
 111       }
 112
 113       show_edge_top(Float:val) {
 114          set_state(PART:"clipper-edge-top", "visible", 0.0);
 115          set_drag(PART:"edge-drag-top", val, 0.0);
 116
 117          set_state(PART:"clipper-edge-bottom", "default", 0.0);
 118          set_state(PART:"clipper-edge-left", "default", 0.0);
 119          set_state(PART:"clipper-edge-right", "default", 0.0);
 120          hide_corners();
 121       }
 122       show_edge_bottom(Float:val) {
 123          set_state(PART:"clipper-edge-bottom", "visible", 0.0);
 124          set_drag(PART:"edge-drag-bottom", val, 0.0);
 125
 126          set_state(PART:"clipper-edge-top", "default", 0.0);
 127          set_state(PART:"clipper-edge-left", "default", 0.0);
 128          set_state(PART:"clipper-edge-right", "default", 0.0);
 129          hide_corners();
 130       }
 131
 132       public message(Msg_Type:type, id, ...) {
 133          if ((type == MSG_FLOAT_SET) && (id == 1)) {
 134             new Float:x, Float:y;
 135
 136             x = getfarg(2);
 137             y = getfarg(3);
 138
 139             if (x < 0.0)
 140             {
 141                if (y < 0.0)      show_corner_top_left();
 142                else if (y > 1.0) show_corner_bottom_left();
 143                else              show_edge_left(y);
 144             }
 145             else if (x > 1.0)
 146             {
 147                if (y < 0.0)      show_corner_top_right();
 148                else if (y > 1.0) show_corner_bottom_right();
 149                else              show_edge_right(y);
 150             }
 151             else
 152             {
 153                if (y < 0.0)      show_edge_top(x);
 154                else if (y > 1.0) show_edge_bottom(x);
 155                else
 156                {
 157                   hide_corners();
 158                   hide_edges();
 159                }
 160             }
 161          }
 162       }
 163    }
 164    parts {
 165       part { name: "clipper";
 166          type: RECT;
 167          description { state: "default" 0.0;
 168             color: 255 255 255 0;
 169             rel1.to: "elm.swallow.content";
 170             rel1.offset: -64 -64;
 171             rel2.to: "elm.swallow.content";
 172             rel2.offset: 63 63;
 173          }
 174          description { state: "visible" 0.0;
 175             inherit: "default" 0.0;
 176             color: 255 255 255 255;
 177          }
 178       }
 179       part { name: "pop";
 180          mouse_events: 0;
 181          clip_to: "clipper";
 182          description { state: "default" 0.0;
 183             min: 30 30;
 184             rel1 {
 185                to: "elm.swallow.content";
 186                offset: -15 -15;
 187             }
 188             rel2 {
 189                to: "elm.swallow.content";
 190                offset: 14 14;
 191             }
 192             image {
 193                normal: "tooltip-base.png";
 194                border: 14 14 14 14;
 195             }
 196             image.middle: SOLID;
 197          }
 198       }
 199
 200       #define TT_CORNER(name_, rx, ry, ax, ay, ox, oy)                        \
 201       part { name: "corner-"name_;                                 \
 202          type: IMAGE;                                              \
 203          mouse_events: 0;                                          \
 204          clip_to: "clipper";                                       \
 205          description { state: "default" 0.0;                       \
 206             color: 255 255 255 0;                                  \
 207             visible: 0;                                            \
 208             min: 14 14;                                            \
 209             max: 14 14;                                            \
 210             align: ax ay;                                          \
 211             fixed: 1 1;                                            \
 212             rel1 {                                                 \
 213                relative: rx ry;                                    \
 214                offset: ox oy;                                      \
 215                to: "elm.swallow.content";                          \
 216             }                                                      \
 217             rel2 {                                                 \
 218                relative: rx ry;                                    \
 219                offset: ox oy;                                      \
 220                to: "elm.swallow.content";                          \
 221             }                                                      \
 222             image.normal: "tooltip-corner-"name_"-tip.png";        \
 223          }                                                         \
 224          description { state: "visible" 0.0;                       \
 225             inherit: "default" 0.0;                                \
 226             color: 255 255 255 255;                                \
 227             visible: 1;                                            \
 228          }                                                         \
 229       }
 230       TT_CORNER("top-left", 0, 0, 1, 1, 4, 4);
 231       TT_CORNER("top-right", 1, 0, 0, 1, -5, 4);
 232       TT_CORNER("bottom-left", 0, 1, 1, 0, 4, -5);
 233       TT_CORNER("bottom-right", 1, 1, 0, 0, -5, -5);
 234       #undef TT_CORNER
 235
 236       #define TT_EDGE_VERT(name_, rx, ax, ox)                                 \
 237       part { name: "clipper-edge-"name_;                           \
 238          type: RECT;                                               \
 239          clip_to: "clipper";                                       \
 240          description { state: "default" 0.0;                       \
 241             color: 255 255 255 0;                                  \
 242             visible: 0;                                            \
 243             min: 14 14;                                            \
 244             align: ax 0.5;                                         \
 245             fixed: 1 1;                                            \
 246             rel1 {                                                 \
 247                relative: rx 0.0;                                   \
 248                offset: ox 0;                                       \
 249                to: "elm.swallow.content";                          \
 250             }                                                      \
 251             rel2 {                                                 \
 252                relative: rx 1.0;                                   \
 253                offset: ox 0;                                       \
 254                to: "elm.swallow.content";                          \
 255             }                                                      \
 256          }                                                         \
 257          description { state: "visible" 0.0;                       \
 258             inherit: "default" 0.0;                                \
 259             color: 255 255 255 255;                                \
 260             visible: 1;                                            \
 261          }                                                         \
 262       }                                                            \
 263       part { name: "edge-area-"name_;                              \
 264          type: RECT;                                               \
 265          mouse_events: 0;                                          \
 266          clip_to: "clipper-edge-"name_;                            \
 267          description { state: "default" 0.0;                       \
 268             color: 0 0 0 0;                                        \
 269             min: 14 14;                                            \
 270             align: ax 0.5;                                         \
 271             fixed: 1 1;                                            \
 272             rel1 {                                                 \
 273                relative: rx 0.0;                                   \
 274                offset: ox 0;                                       \
 275                to: "elm.swallow.content";                          \
 276             }                                                      \
 277             rel2 {                                                 \
 278                relative: rx 1.0;                                   \
 279                offset: ox 0;                                       \
 280                to: "elm.swallow.content";                          \
 281             }                                                      \
 282          }                                                         \
 283       }                                                            \
 284       part { name: "edge-drag-"name_;                              \
 285          type: RECT;                                               \
 286          mouse_events: 0;                                          \
 287          clip_to: "clipper-edge-"name_;                            \
 288          dragable {                                                \
 289             x: 0 0 0;                                             \
 290             y: 1 1 0;                                             \
 291             confine: "edge-area-"name_;                           \
 292          }                                                         \
 293          description { state: "default" 0.0;                       \
 294             color: 0 0 0 0;                                        \
 295             min: 14 14;                                            \
 296             rel1.to: "edge-area-"name_;                            \
 297             rel2.to: "edge-area-"name_;                            \
 298          }                                                         \
 299       }                                                            \
 300       part { name: "edge-img-"name_;                               \
 301          type: IMAGE;                                              \
 302          mouse_events: 0;                                          \
 303          clip_to: "clipper-edge-"name_;                            \
 304          description { state: "default" 0.0;                       \
 305             min: 14 14;                                            \
 306             max: 14 14;                                            \
 307             align: ax 0.5;                                         \
 308             fixed: 1 1;                                            \
 309             rel1.to: "edge-drag-"name_;                            \
 310             rel2.to: "edge-drag-"name_;                            \
 311             image.normal: "tooltip-edge-"name_"-tip.png";          \
 312          }                                                         \
 313       }
 314       TT_EDGE_VERT("left", 0, 1, -2);
 315       TT_EDGE_VERT("right", 1, 0, 1);
 316       #undef TT_EDGE_VERT
 317
 318       #define TT_EDGE_HORIZ(name_, ry, ay, oy)                                \
 319       part { name: "clipper-edge-"name_;                           \
 320          type: RECT;                                               \
 321          clip_to: "clipper";                                       \
 322          description { state: "default" 0.0;                       \
 323             color: 255 255 255 0;                                  \
 324             visible: 0;                                            \
 325             min: 14 14;                                            \
 326             align: 0.5 ay;                                         \
 327             fixed: 1 1;                                            \
 328             rel1 {                                                 \
 329                relative: 0.0 ry;                                   \
 330                offset: 0 oy;                                       \
 331                to: "elm.swallow.content";                          \
 332             }                                                      \
 333             rel2 {                                                 \
 334                relative: 1.0 ry;                                   \
 335                offset: 0 oy;                                       \
 336                to: "elm.swallow.content";                          \
 337             }                                                      \
 338          }                                                         \
 339          description { state: "visible" 0.0;                       \
 340             inherit: "default" 0.0;                                \
 341             color: 255 255 255 255;                                \
 342             visible: 1;                                            \
 343          }                                                         \
 344       }                                                            \
 345       part { name: "edge-area-"name_;                              \
 346          type: RECT;                                               \
 347          mouse_events: 0;                                          \
 348          clip_to: "clipper-edge-"name_;                            \
 349          description { state: "default" 0.0;                       \
 350             color: 0 0 0 0;                                        \
 351             min: 14 14;                                            \
 352             align: 0.5 ay;                                         \
 353             fixed: 1 1;                                            \
 354             rel1 {                                                 \
 355                relative: 0.0 ry;                                   \
 356                offset: 0 oy;                                       \
 357                to: "elm.swallow.content";                          \
 358             }                                                      \
 359             rel2 {                                                 \
 360                relative: 1.0 ry;                                   \
 361                offset: 0 oy;                                       \
 362                to: "elm.swallow.content";                          \
 363             }                                                      \
 364          }                                                         \
 365       }                                                            \
 366       part { name: "edge-drag-"name_;                              \
 367          type: RECT;                                               \
 368          mouse_events: 0;                                          \
 369          clip_to: "clipper-edge-"name_;                            \
 370          dragable {                                                \
 371             x: 1 1 0;                                             \
 372             y: 0 0 0;                                             \
 373             confine: "edge-area-"name_;                           \
 374          }                                                         \
 375          description { state: "default" 0.0;                       \
 376             color: 0 0 0 0;                                        \
 377             min: 14 14;                                            \
 378             rel1.to: "edge-area-"name_;                            \
 379             rel2.to: "edge-area-"name_;                            \
 380          }                                                         \
 381       }                                                            \
 382       part { name: "edge-img-"name_;                               \
 383          type: IMAGE;                                              \
 384          mouse_events: 0;                                          \
 385          clip_to: "clipper-edge-"name_;                            \
 386          description { state: "default" 0.0;                       \
 387             min: 14 14;                                            \
 388             max: 14 14;                                            \
 389             align: 0.5 ay;                                         \
 390             fixed: 1 1;                                            \
 391             rel1.to: "edge-drag-"name_;                            \
 392             rel2.to: "edge-drag-"name_;                            \
 393             image.normal: "tooltip-edge-"name_"-tip.png";          \
 394          }                                                         \
 395       }
 396       TT_EDGE_HORIZ("top", 0, 1, -2);
 397       TT_EDGE_HORIZ("bottom", 1, 0, 1);
 398       #undef TT_EDGE_HORIZ
 399
 400       part { name: "clipper_content";
 401          type: RECT;
 402          description { state: "default" 0.0;
 403             color: 255 255 255 0;
 404             rel1.to: "elm.swallow.content";
 405             rel1.offset: -64 -64;
 406             rel2.to: "elm.swallow.content";
 407             rel2.offset: 63 63;
 408          }
 409          description { state: "visible" 0.0;
 410             inherit: "default" 0.0;
 411             color: 255 255 255 255;
 412          }
 413       }
 414       part { name: "elm.swallow.content";
 415          type: SWALLOW;
 416          clip_to: "clipper_content";
 417          description { state: "default" 0.0; }
 418       }
 419       programs {
 420          program {
 421             name: "show0";
 422             signal: "elm,action,show";
 423             source: "elm";
 424             action: ACTION_STOP;
 425             target: "hide0";
 426             target: "hide1";
 427             target: "hide2";
 428             target: "hide3";
 429             after: "show1";
 430             after: "show2";
 431          }
 432          program {
 433             name: "show1";
 434             action: STATE_SET "visible" 0.0;
 435             transition: LINEAR 0.15;
 436             target: "clipper";
 437          }
 438          program {
 439             name: "show2";
 440             in: 0.1 0.0;
 441             action: STATE_SET "visible" 0.0;
 442             transition: LINEAR 0.15;
 443             target: "clipper_content";
 444          }
 445
 446          program {
 447             name: "hide0";
 448             signal: "elm,action,hide";
 449             source: "elm";
 450             action: ACTION_STOP;
 451             target: "show0";
 452             target: "show1";
 453             target: "show2";
 454             after: "hide1";
 455             after: "hide2";
 456             after: "hide3";
 457          }
 458          program {
 459             name: "hide1";
 460             script {
 461                hide_corners();
 462                hide_edges();
 463             }
 464          }
 465          program {
 466             name: "hide2";
 467             action: STATE_SET "default" 0.0;
 468             transition: LINEAR 0.1;
 469             target: "clipper_content";
 470          }
 471          program {
 472             name: "hide3";
 473             in: 0.1 0.0;
 474             action: STATE_SET "default" 0.0;
 475             transition: LINEAR 0.1;
 476             target: "clipper";
 477          }
 478       }
 479    }
 480 }
 481 group { name: "elm/tooltip/base/transparent";
 482    data {
 483       item: "pad_x" "10";
 484       item: "pad_y" "10";
 485       item: "transparent" "enabled";
 486    }
 487    parts {
 488       part { name: "elm.swallow.content";
 489          type: SWALLOW;
 490          mouse_events:   0;
 491          scale: 1;
 492          description { state: "default" 0.0; }
 493       }
 494    }
 495 }
 496
 497 ///////////////////////////////////////////////////////////////////////////////