themes/widgets/colorselector.edc

   1 /*
   2  * efl-theme-tizen
   3  * Copyright (c) 2012-2013 Samsung Electronics Co., Ltd.
   4  *
   5  * Licensed under the Apache License, Version 2.0 (the License);
   6  * you may not use this file except in compliance with the License.
   7  * You may obtain a copy of the License at
   8  *
   9  *     http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  * Unless required by applicable law or agreed to in writing, software
  12  * distributed under the License is distributed on an AS IS BASIS,
  13  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  * See the License for the specific language governing permissions and
  15  * limitations under the License.
  16  */
  17
  18
  19
  20 group {
  21    name: "elm/colorselector/palette/default";
  22    data.item: "horizontal_pad" COLORSELECTOR_PORTRAIT_HOR_PAD_INC;
  23    data.item: "vertical_pad" COLORSELECTOR_PORTRAIT_VER_PAD_INC;
  24    parts {
  25       part { name: "base";
  26          type: RECT;
  27          scale: 1;
  28          mouse_events: 1;
  29          description { state: "default" 0.0;
  30             visible: 0;
  31             align: 0.0 0.0;
  32          }
  33       }
  34       part { name: "palette";
  35          type: SWALLOW;
  36          scale: 1;
  37          mouse_events: 1;
  38          description { state: "default" 0.0;
  39             align: 0.0 0.0;
  40             fixed: 0 1;
  41             rel1 {
  42                relative: 0.0 0.0;
  43                to: "base";
  44             }
  45             rel2 {
  46                relative: 1.0 0.0;
  47                to: "base";
  48             }
  49          }
  50       }
  51       part{ name: "bottom_padding";
  52          type: RECT;
  53          scale: 1;
  54          description { state: "default" 0.0;
  55             visible: 0;
  56             min: 0 20;
  57             fixed: 0 1;
  58             rel1.relative: 0.0 1.0;
  59             rel1.to: "palette";
  60             rel2.to: "palette";
  61             align: 0.0 0.0;
  62          }
  63       }
  64       part { name: "selector";
  65          type: SWALLOW;
  66          scale: 1;
  67          mouse_events: 1;
  68          description { state: "default" 0.0;
  69             align: 0.0 1.0;
  70             rel1 {
  71                relative: 0.0 1.0;
  72                to: "bottom_padding";
  73             }
  74             rel2 {
  75                relative: 1.0 1.0;
  76                to: "base";
  77             }
  78          }
  79       }
  80    }
  81 }
  82
  83 group {
  84    name: "elm/colorselector/palette/landscape";
  85    data.item: "horizontal_pad" COLORSELECTOR_LANDSCAPE_HOR_PAD_INC;
  86    data.item: "vertical_pad" COLORSELECTOR_LANDSCAPE_VER_PAD_INC;
  87    parts {
  88       part { name: "base";
  89          type: RECT;
  90          scale: 1;
  91          mouse_events: 1;
  92          description { state: "default" 0.0;
  93             visible: 0;
  94             align: 0.0 0.0;
  95          }
  96       }
  97       part { name: "palette";
  98          type: SWALLOW;
  99          scale: 1;
 100          mouse_events: 1;
 101          description { state: "default" 0.0;
 102             align: 0.0 0.0;
 103             fixed: 0 1;
 104             rel1 {
 105                relative: 0.0 0.0;
 106                to: "base";
 107             }
 108             rel2 {
 109                relative: 1.0 0.0;
 110                to: "base";
 111             }
 112          }
 113       }
 114       part{ name: "bottom_padding";
 115          type: RECT;
 116          scale: 1;
 117          description { state: "default" 0.0;
 118             visible: 0;
 119             min: 0 20;
 120             fixed: 0 1;
 121             rel1.relative: 0.0 1.0;
 122             rel1.to: "palette";
 123             rel2.to: "palette";
 124             align: 0.0 0.0;
 125          }
 126       }
 127       part { name: "selector";
 128          type: SWALLOW;
 129          scale: 1;
 130          mouse_events: 1;
 131          description { state: "default" 0.0;
 132             align: 0.0 1.0;
 133             rel1 {
 134                relative: 0.0 1.0;
 135                to: "bottom_padding";
 136             }
 137             rel2 {
 138                relative: 1.0 1.0;
 139                to: "base";
 140             }
 141          }
 142       }
 143    }
 144 }
 145
 146 group{
 147    name: "elm/colorselector/bg/default";
 148    parts{
 149       part{
 150          name: "bg_rect";
 151          type: RECT;
 152          mouse_events: 1;
 153          scale: 1;
 154          description{
 155             state: "default" 0.0;
 156             min: COLORSELECTOR_MIN_W_INC COLORSELECTOR_MIN_H_INC;
 157             color: 0 0 0 0;
 158          }
 159       }
 160       part{ name: "top_padding";
 161          type: RECT;
 162          scale: 1;
 163          ignore_flags: ON_HOLD;
 164          description {
 165             state: "default" 0.0;
 166             min: 1 1;
 167             fixed: 1 1;
 168             color: COLORSELECTOR_PADDING_COLOR_INC;
 169             rel2.relative: 1.0 0.0;
 170             rel1.to: "bg_rect";
 171             rel2.to: "bg_rect";
 172             align: 0.0 0.0;
 173          }
 174       }
 175       part{
 176          name: "elm.colorbar_0";
 177          type: SWALLOW;
 178          mouse_events: 1;
 179          scale: 1;
 180          description{
 181             state: "default" 0.0;
 182             min: 1 COLORSELECTOR_COLORBAR_HEIGHT;
 183             max: COLORSELECTOR_MAX_W_INC COLORSELECTOR_COLORBAR_HEIGHT;
 184             fixed: 0 1;
 185             rel1.relative: 0.0 1.0;
 186             rel1.to_y: "top_padding";
 187             rel2.to_y: "top_padding";
 188             align: 0.5 0.0;
 189          }
 190       }
 191       part{
 192          name: "bottom_padding";
 193          type: RECT;
 194          scale: 1;
 195          ignore_flags: ON_HOLD;
 196          description {
 197             state: "default" 0.0;
 198             visible: 1;
 199             min: 1 1;
 200             fixed: 1 1;
 201             color: COLORSELECTOR_PADDING_COLOR_INC;
 202             rel1.relative: 0.0 1.0;
 203             rel1.to_y: "elm.colorbar_0";
 204             rel2.to_y: "elm.colorbar_0";
 205             align: 0.0 0.0;
 206          }
 207       }
 208       part{
 209          name: "elm.colorbar_1";
 210          type: SWALLOW;
 211          mouse_events: 1;
 212          scale: 1;
 213          description{
 214             state: "default" 0.0;
 215             min: 1 COLORSELECTOR_COLORBAR_HEIGHT;
 216             max: COLORSELECTOR_MAX_W_INC COLORSELECTOR_COLORBAR_HEIGHT;
 217             fixed: 0 1;
 218             rel1.relative: 0.0 1.0;
 219             rel1.to_y: "bottom_padding";
 220             rel2.to_y: "bottom_padding";
 221             align: 0.5 0.0;
 222          }
 223       }
 224       part {
 225          name: "bottom_padding1";
 226          type: RECT;
 227          scale: 1;
 228          ignore_flags: ON_HOLD;
 229          description {
 230             state: "default" 0.0;
 231             visible: 1;
 232             min: 1 1;
 233             fixed: 1 1;
 234             color: COLORSELECTOR_PADDING_COLOR_INC;
 235             rel1.relative: 0.0 1.0;
 236             rel1.to_y: "elm.colorbar_1";
 237             rel2.to_y: "elm.colorbar_1";
 238             align: 0.0 0.0;
 239          }
 240       }
 241       part{
 242          name: "elm.colorbar_2";
 243          type: SWALLOW;
 244          mouse_events: 1;
 245          scale: 1;
 246          description{
 247             state: "default" 0.0;
 248             min: 1 COLORSELECTOR_COLORBAR_HEIGHT;
 249             max: COLORSELECTOR_MAX_W_INC COLORSELECTOR_COLORBAR_HEIGHT;
 250             fixed: 0 1;
 251             rel1.relative: 0.0 1.0;
 252             rel1.to_y: "bottom_padding1";
 253             rel2.to_y: "bottom_padding1";
 254             align: 0.5 0.0;
 255          }
 256       }
 257       part {
 258          name: "bottom_padding2";
 259          type: RECT;
 260          scale: 1;
 261          ignore_flags: ON_HOLD;
 262          description {
 263             state: "default" 0.0;
 264             visible: 1;
 265             min: 1 1;
 266             fixed: 1 1;
 267             color: COLORSELECTOR_PADDING_COLOR_INC;
 268             rel1.relative: 0.0 1.0;
 269             rel1.to_y: "elm.colorbar_2";
 270             rel2.to_y: "bg_rect";
 271             align: 0.0 0.0;
 272          }
 273       }
 274    }
 275 }
 276
 277 group{
 278    name: "elm/colorselector/base/default";
 279    parts{
 280       part{
 281          name: "bg_rect";
 282          type: RECT;
 283          scale: 1;
 284          mouse_events: 1;
 285          description{
 286             state: "default" 0.0;
 287             color: 0 0 0 0;
 288          }
 289       }
 290       part{
 291          name: "bar_bg_padding_rect_l";
 292          type: RECT;
 293          scale: 1;
 294          description{
 295             state: "default" 0.0;
 296             visible: 0;
 297             min: COLORSELECTOR_COLORBAR_LEFT_PADDING 0;
 298             fixed: 1 0;
 299             rel1.relative: 0.0 0.5;
 300             rel2.relative: 0.0 0.5;
 301             align: 0.0 0.5;
 302          }
 303       }
 304       part{
 305          name: "bar_bg_padding_rect_r";
 306          type: RECT;
 307          scale: 1;
 308          description{
 309             state: "default" 0.0;
 310             visible: 0;
 311             min: COLORSELECTOR_COLORBAR_RIGHT_PADDING 0;
 312             fixed: 1 0;
 313             rel1.relative: 1.0 0.5;
 314             rel2.relative: 1.0 0.5;
 315             align: 1.0 0.5;
 316          }
 317       }
 318       part {
 319          name: "button_top_padding";
 320          type: RECT;
 321          scale: 1;
 322          ignore_flags: ON_HOLD;
 323          description {
 324             state: "default" 0.0;
 325             visible: 0;
 326             min: 0 COLORSELECTOR_BUTTON_TOP_PADDING;
 327             fixed: 1 1;
 328             rel1.relative: 0.0 0.0;
 329             rel2.relative: 1.0 0.0;
 330             align: 0.5 0;
 331          }
 332       }
 333       part{
 334          name: "elm.bar_bg";
 335          type: SWALLOW;
 336          mouse_events: 1;
 337          description{
 338             state: "default" 0.0;
 339             rel1 {relative: 1.0 (16/70); to_x: "bar_bg_padding_rect_l";}
 340             rel2 {relative: 0.0 (54/70); to_x: "bar_bg_padding_rect_r";}
 341          }
 342       }
 343       part{
 344          name: "elm.bar";
 345          type: SWALLOW;
 346          mouse_events: 1;
 347          description{
 348             state: "default" 0.0;
 349             rel1.to: "elm.bar_bg";
 350             rel2.to: "elm.bar_bg";
 351          }
 352       }
 353       part{
 354          name: "arrow_bg_padding_rect_l";
 355          type: RECT;
 356          scale: 1;
 357          description{
 358             state: "default" 0.0;
 359             visible: 0;
 360             min: COLORSELECTOR_ARROW_BG_LEFT_PADDING 0;
 361             fixed: 1 0;
 362             rel2.relative: 0.0 1.0;
 363             align: 0.0 0.5;
 364          }
 365       }
 366       part{
 367          name: "arrow_bg_padding_rect_r";
 368          type: RECT;
 369          scale: 1;
 370          description{
 371             state: "default" 0.0;
 372             visible: 0;
 373             min: COLORSELECTOR_ARROW_BG_RIGHT_PADDING 0;
 374             fixed: 1 0;
 375             rel1.relative: 1.0 0.0;
 376             align: 1.0 0.5;
 377          }
 378       }
 379       part{
 380          name: "elm.arrow_bg";
 381          type: SWALLOW;
 382          mouse_events: 1;
 383          description{
 384             state: "default" 0.0;
 385             rel1 {relative: 1.0 (10/70); to_x: "arrow_bg_padding_rect_l";}
 386             rel2 {relative: 0.0 (60/70); to_x: "arrow_bg_padding_rect_r";}
 387          }
 388       }
 389       part{
 390          name: "elm.arrow";
 391          type: RECT;
 392          mouse_events: 0;
 393          scale: 1;
 394          description{
 395             state: "default" 0.0;
 396             min: COLORSELECTOR_ARROW_MIN_WIDTH COLORSELECTOR_ARROW_MIN_HEIGHT;
 397             fixed: 1 1;
 398             align: 0 0.5;
 399             visible: 0;
 400             rel1 {relative: 0.0 0.0; to_y: "elm.arrow_bg";}
 401             rel2 {relative: 0.0 1.0; to_y: "elm.arrow_bg";}
 402          }
 403          dragable{
 404             confine: "elm.arrow_bg";
 405             x: 1 1 0;
 406             y: 0 0 0;
 407          }
 408       }
 409       part{
 410          name: "elm.arrow_icon";
 411          type: SWALLOW;
 412          mouse_events: 0;
 413          scale: 1;
 414          description{
 415             state: "default" 0.0;
 416             fixed: 1 1;
 417             align: 0.5 0;
 418             rel1 {
 419                to: "elm.arrow";
 420                offset: COLORSELECTOR_ARROW_REL1_OFFSET;
 421             }
 422             rel2 {
 423                to: "elm.arrow";
 424                offset: COLORSELECTOR_ARROW_REL2_OFFSET;
 425             }
 426          }
 427       }
 428       part{
 429          name: "event";
 430          type: RECT;
 431          scale: 1;
 432          description{
 433             state: "default" 0.0;
 434             min: COLORSELECTOR_DRAGGABLE_EVENT_AREA;
 435             fixed: 1 1;
 436             rel1.to: "elm.arrow_icon";
 437             rel2.to: "elm.arrow_icon";
 438             color: 0 0 0 0;
 439          }
 440          dragable{
 441             events: "elm.arrow";
 442          }
 443       }
 444       part{
 445          name: "l_button_padding_rect";
 446          type: RECT;
 447          mouse_events: 0;
 448          scale: 1;
 449          description{
 450             state: "default" 0.0;
 451             visible: 0;
 452             min: COLORSELECTOR_BUTTON_LEFT_PADDING 0;
 453             fixed: 1 0;
 454             rel2.relative: 0.0 1.0;
 455             align: 0.0 0.5;
 456          }
 457       }
 458       part{
 459          name: "r_button_padding_rect";
 460          type: RECT;
 461          mouse_events: 0;
 462          scale: 1;
 463          description{
 464             state: "default" 0.0;
 465             visible: 0;
 466             min: COLORSELECTOR_BUTTON_RIGHT_PADDING 0;
 467             fixed: 1 0;
 468             rel1.relative: 1.0 0.0;
 469             align: 1.0 0.5;
 470          }
 471       }
 472       part{
 473          name: "elm.l_button";
 474          type: SWALLOW;
 475          mouse_events: 1;
 476          scale: 1;
 477          description{
 478             state: "default" 0.0;
 479             min: COLORSELECTOR_BUTTON_WIDTH COLORSELECTOR_BUTTON_HEIGHT;
 480             fixed: 1 1;
 481             rel1 {relative: 1.0 1.0; to_x: "l_button_padding_rect"; to_y: "button_top_padding";}
 482             rel2 {relative: 1.0 1.0; to_x: "l_button_padding_rect"; to_y: "button_top_padding";}
 483             align: 0.0 0.0;
 484          }
 485       }
 486       part{
 487          name: "elm.r_button";
 488          type: SWALLOW;
 489          mouse_events: 1;
 490          scale: 1;
 491          description{
 492             state: "default" 0.0;
 493             min: COLORSELECTOR_BUTTON_WIDTH COLORSELECTOR_BUTTON_HEIGHT;
 494             fixed: 1 1;
 495             rel1 {relative: 0.0 1.0; to_x: "r_button_padding_rect"; to_y: "button_top_padding";}
 496             rel2 {relative: 0.0 1.0; to_x: "r_button_padding_rect"; to_y: "button_top_padding";}
 497             align: 1.0 0.0;
 498          }
 499       }
 500    }
 501 }
 502
 503 group{
 504    name: "elm/colorselector/image/colorbar_0/default";
 505    images{
 506       image: "00_color_picker_color.png" COMP;
 507    }
 508    parts{
 509       part{
 510          name: "bg";
 511          type: RECT;
 512          mouse_events: 1;
 513          scale: 1;
 514          description{
 515             state: "default" 0.0;
 516             visible: 1;
 517             rel1 {relative: 0.0 0.0; offset: 0 0;}
 518             rel2 {relative: 1.0 1.0; offset: 0 0;}
 519             color: 0 0 0 0;
 520          }
 521       }
 522       part{
 523          name: "colorbar_0_image";
 524          type: IMAGE;
 525          mouse_events: 1;
 526          description{
 527             state: "default" 0.0;
 528             visible: 1;
 529             rel1 {relative: 0.0 0.0; offset: 0 0; to: "bg"; }
 530             rel2 {relative: 1.0 1.0; offset: -1 -1; to: "bg"; }
 531             image.normal:  "00_color_picker_color.png";
 532          }
 533       }
 534    }
 535 }
 536
 537 group{
 538    name: "elm/colorselector/image/colorbar_1/default";
 539    images{
 540       image: "00_color_picker_opacity.png" COMP;
 541    }
 542    parts{
 543       part{
 544          name: "bg";
 545          type: RECT;
 546          scale: 1;
 547          mouse_events: 1;
 548          description{
 549             state: "default" 0.0;
 550             visible: 1;
 551             rel1 {relative: 0.0 0.0; offset: 0 0;}
 552             rel2 {relative: 1.0 1.0; offset: 0 0;}
 553             color: 0 0 0 0;
 554          }
 555       }
 556       part{
 557          name: "colorbar_1_image";
 558          type: IMAGE;
 559          mouse_events: 1;
 560          description{
 561             state: "default" 0.0;
 562             visible: 1;
 563             rel1 {relative: 0.0 0.0; offset: 0 0; to: "bg"; }
 564             rel2 {relative: 1.0 1.0; offset: -1 -1; to: "bg"; }
 565             image.normal:  "00_color_picker_opacity.png";
 566          }
 567       }
 568    }
 569 }
 570
 571 group{
 572    name: "elm/colorselector/image/colorbar_2/default";
 573    images{
 574       image: "00_color_picker_brightness.png" COMP;
 575    }
 576    parts{
 577       part{
 578          name: "bg";
 579          type: RECT;
 580          mouse_events: 1;
 581          scale: 1;
 582          description{
 583             state: "default" 0.0;
 584             visible: 1;
 585             rel1 {relative: 0.0 0.0; offset: 0 0;}
 586             rel2 {relative: 1.0 1.0; offset: 0 0;}
 587             color: 0 0 0 0;
 588          }
 589       }
 590       part{
 591          name: "colorbar_2_image";
 592          type: IMAGE;
 593          mouse_events: 1;
 594          description{
 595             state: "default" 0.0;
 596             visible: 1;
 597             rel1 {relative: 0.0 0.0; offset: 0 0; to: "bg"; }
 598             rel2 {relative: 1.0 1.0; offset: -1 -1; to: "bg"; }
 599             image.normal:  "00_color_picker_brightness.png";
 600          }
 601       }
 602    }
 603 }
 604
 605 group{
 606    name: "elm/colorselector/arrow/default";
 607    images{
 608       image:"00_color_picker_focus.png" COMP;
 609    }
 610    parts{
 611       part{
 612          name: arrow_image;
 613          scale: 1;
 614          type: IMAGE;
 615          mouse_events: 1;
 616          description{
 617             state: "default" 0.0;
 618             image.normal: "00_color_picker_focus.png";
 619          }
 620       }
 621    }
 622 }
 623
 624 group {
 625    name: "elm/colorselector/item/default";
 626    images {
 627       image: "00_color_picker_palette_focus.png" COMP;
 628    }
 629    parts {
 630       part {
 631          name: "color_bg";
 632          type: RECT;
 633          mouse_events:1;
 634          scale: 1;
 635          description {
 636             state: "default" 0.0;
 637             min: COLORSELECTOR_PALETTE_COLORBG_MIN_WIDTH_INC COLORSELECTOR_PALETTE_COLORBG_MIN_HEIGHT_INC;
 638             visible: 0;
 639          }
 640       }
 641       part { name: "color_obj";
 642          type: SWALLOW;
 643          mouse_events: 1;
 644          scale: 1;
 645          description { state: "default" 0.0;
 646             rel1.to: "color_bg";
 647             rel2.to: "color_bg";
 648          }
 649       }
 650       part {
 651          name: "focus_image";
 652          mouse_events:1;
 653          scale: 1;
 654          description {
 655             state: "default" 0.0;
 656             visible: 0;
 657             min: COLORSELECTOR_PALETTE_COLORBG_FOCUS_MIN_WIDTH_INC COLORSELECTOR_PALETTE_COLORBG_FOCUS_MIN_HEIGHT_INC;
 658             image.normal: "00_color_picker_palette_focus.png";
 659             image.border: COLORSELECTOR_PALETTE_BORDER_INC;
 660             image.border_scale: 1;
 661             rel1.to: "color_bg";
 662             rel2.to: "color_bg";
 663          }
 664          description {
 665             state: "focused" 0.0;
 666             inherit: "default" 0.0;
 667             visible: 1;
 668          }
 669       }
 670    }
 671    programs {
 672       program { name: "item_focus";
 673          source: "elm";
 674          signal: "elm,state,selected";
 675          action: STATE_SET "focused" 0.0;
 676          target: "focus_image";
 677       }
 678       program { name: "item_unfocus";
 679          source: "elm";
 680          signal: "elm,state,unselected";
 681          action: STATE_SET "default" 0.0;
 682          target: "focus_image";
 683       }
 684    }
 685 }
 686
 687 group {
 688    name: "elm/colorselector/item/color/default";
 689    images {
 690       image: "00_color_picker_palette_bg.png" COMP;
 691    }
 692    parts {
 693       part {
 694          name: "color_rect";
 695          type: IMAGE;
 696          mouse_events: 1;
 697          scale: 1;
 698          description{
 699             state: "default" 0.0;
 700             image.normal: "00_color_picker_palette_bg.png";
 701             image.border: COLORSELECTOR_PALETTE_BORDER_INC;
 702             image.border_scale: 1;
 703          }
 704       }
 705    }
 706 }
 707