Different image sets depending on style selected 66/49166/4
authorAgnelo Vaz <agnelo.vaz@samsung.com>
Wed, 7 Oct 2015 10:39:41 +0000 (11:39 +0100)
committerAgnelo Vaz <agnelo.vaz@samsung.com>
Thu, 8 Oct 2015 15:01:06 +0000 (16:01 +0100)
* Style folders now contain an image directory
* Images specific to that style (resolution) should be placed in that folder
* Toolkit has an image-common folder for images that span all styles
* Only TextField Images moved to style image folders in this patch

Change-Id: I43d792c4f42dafb4b39e409425e51d404d261838
Signed-off-by: Agnelo Vaz <agnelo.vaz@samsung.com>
77 files changed:
build/tizen/dali-toolkit/Makefile.am
dali-toolkit/images-common/00_popup_bg.9.png [moved from dali-toolkit/images/00_popup_bg.9.png with 100% similarity]
dali-toolkit/images-common/00_popup_bg.png [moved from dali-toolkit/images/00_popup_bg.png with 100% similarity]
dali-toolkit/images-common/00_popup_bottom_bg.png [moved from dali-toolkit/images/00_popup_bottom_bg.png with 100% similarity]
dali-toolkit/images-common/00_popup_bubble_bg.png [moved from dali-toolkit/images/00_popup_bubble_bg.png with 100% similarity]
dali-toolkit/images-common/00_popup_bubble_tail_bottom.png [moved from dali-toolkit/images/00_popup_bubble_tail_bottom.png with 100% similarity]
dali-toolkit/images-common/00_popup_button_bg.png [moved from dali-toolkit/images/00_popup_button_bg.png with 100% similarity]
dali-toolkit/images-common/00_popup_button_pressed.png [moved from dali-toolkit/images/00_popup_button_pressed.png with 100% similarity]
dali-toolkit/images-common/B16-8_TTS_focus.png [moved from dali-toolkit/images/B16-8_TTS_focus.png with 100% similarity]
dali-toolkit/images-common/button-disabled.9.png [moved from dali-toolkit/images/button-disabled.9.png with 100% similarity]
dali-toolkit/images-common/button-down-disabled.9.png [moved from dali-toolkit/images/button-down-disabled.9.png with 100% similarity]
dali-toolkit/images-common/button-down.9.png [moved from dali-toolkit/images/button-down.9.png with 100% similarity]
dali-toolkit/images-common/button-up.9.png [moved from dali-toolkit/images/button-up.9.png with 100% similarity]
dali-toolkit/images-common/checkbox-selected-diabled.png [moved from dali-toolkit/images/checkbox-selected-diabled.png with 100% similarity]
dali-toolkit/images-common/checkbox-selected.png [moved from dali-toolkit/images/checkbox-selected.png with 100% similarity]
dali-toolkit/images-common/checkbox-unselected-disabled.png [moved from dali-toolkit/images/checkbox-unselected-disabled.png with 100% similarity]
dali-toolkit/images-common/checkbox-unselected.png [moved from dali-toolkit/images/checkbox-unselected.png with 100% similarity]
dali-toolkit/images-common/copy_paste_icon_clipboard.png [moved from dali-toolkit/images/copy_paste_icon_clipboard.png with 100% similarity]
dali-toolkit/images-common/copy_paste_icon_copy.png [moved from dali-toolkit/images/copy_paste_icon_copy.png with 100% similarity]
dali-toolkit/images-common/copy_paste_icon_cut.png [moved from dali-toolkit/images/copy_paste_icon_cut.png with 100% similarity]
dali-toolkit/images-common/copy_paste_icon_paste.png [moved from dali-toolkit/images/copy_paste_icon_paste.png with 100% similarity]
dali-toolkit/images-common/copy_paste_icon_select.png [moved from dali-toolkit/images/copy_paste_icon_select.png with 100% similarity]
dali-toolkit/images-common/copy_paste_icon_select_all.png [moved from dali-toolkit/images/copy_paste_icon_select_all.png with 100% similarity]
dali-toolkit/images-common/cursor_handler_ball_center.png [moved from dali-toolkit/images/cursor_handler_ball_center.png with 100% similarity]
dali-toolkit/images-common/file.list [moved from dali-toolkit/images/file.list with 100% similarity]
dali-toolkit/images-common/insertpoint-icon-pressed.png [moved from dali-toolkit/images/insertpoint-icon-pressed.png with 100% similarity]
dali-toolkit/images-common/insertpoint-icon.png [moved from dali-toolkit/images/insertpoint-icon.png with 100% similarity]
dali-toolkit/images-common/keyboard_focus.png [moved from dali-toolkit/images/keyboard_focus.png with 100% similarity]
dali-toolkit/images-common/magnifier.png [moved from dali-toolkit/images/magnifier.png with 100% similarity]
dali-toolkit/images-common/popup_bg.png [moved from dali-toolkit/images/popup_bg.png with 100% similarity]
dali-toolkit/images-common/popup_bubble_bg.#.png [moved from dali-toolkit/images/popup_bubble_bg.#.png with 100% similarity]
dali-toolkit/images-common/popup_bubble_bg_ef.#.png [moved from dali-toolkit/images/popup_bubble_bg_ef.#.png with 100% similarity]
dali-toolkit/images-common/popup_bubble_bg_line.#.png [moved from dali-toolkit/images/popup_bubble_bg_line.#.png with 100% similarity]
dali-toolkit/images-common/popup_bubble_tail_bottom.png [moved from dali-toolkit/images/popup_bubble_tail_bottom.png with 100% similarity]
dali-toolkit/images-common/popup_bubble_tail_bottom_ef.png [moved from dali-toolkit/images/popup_bubble_tail_bottom_ef.png with 100% similarity]
dali-toolkit/images-common/popup_bubble_tail_bottom_line.png [moved from dali-toolkit/images/popup_bubble_tail_bottom_line.png with 100% similarity]
dali-toolkit/images-common/popup_bubble_tail_top.png [moved from dali-toolkit/images/popup_bubble_tail_top.png with 100% similarity]
dali-toolkit/images-common/popup_bubble_tail_top_ef.png [moved from dali-toolkit/images/popup_bubble_tail_top_ef.png with 100% similarity]
dali-toolkit/images-common/popup_bubble_tail_top_line.png [moved from dali-toolkit/images/popup_bubble_tail_top_line.png with 100% similarity]
dali-toolkit/images-common/popup_scroll.png [moved from dali-toolkit/images/popup_scroll.png with 100% similarity]
dali-toolkit/images-common/popup_tail_down.png [moved from dali-toolkit/images/popup_tail_down.png with 100% similarity]
dali-toolkit/images-common/popup_tail_left.png [moved from dali-toolkit/images/popup_tail_left.png with 100% similarity]
dali-toolkit/images-common/popup_tail_right.png [moved from dali-toolkit/images/popup_tail_right.png with 100% similarity]
dali-toolkit/images-common/popup_tail_up.png [moved from dali-toolkit/images/popup_tail_up.png with 100% similarity]
dali-toolkit/images-common/radio-button-selected-disabled.png [moved from dali-toolkit/images/radio-button-selected-disabled.png with 100% similarity]
dali-toolkit/images-common/radio-button-selected.png [moved from dali-toolkit/images/radio-button-selected.png with 100% similarity]
dali-toolkit/images-common/radio-button-unselected-disabled.png [moved from dali-toolkit/images/radio-button-unselected-disabled.png with 100% similarity]
dali-toolkit/images-common/radio-button-unselected.png [moved from dali-toolkit/images/radio-button-unselected.png with 100% similarity]
dali-toolkit/images-common/selection-popup-bg.9.png [moved from dali-toolkit/images/selection-popup-bg.9.png with 100% similarity]
dali-toolkit/images-common/selection_handle_ball_left.png [moved from dali-toolkit/images/selection_handle_ball_left.png with 100% similarity]
dali-toolkit/images-common/selection_handle_ball_right.png [moved from dali-toolkit/images/selection_handle_ball_right.png with 100% similarity]
dali-toolkit/images-common/selection_marker_left.png [moved from dali-toolkit/images/selection_marker_left.png with 100% similarity]
dali-toolkit/images-common/selection_marker_right.png [moved from dali-toolkit/images/selection_marker_right.png with 100% similarity]
dali-toolkit/images-common/slider-popup-arrow.png [moved from dali-toolkit/images/slider-popup-arrow.png with 100% similarity]
dali-toolkit/images-common/slider-popup.9.png [moved from dali-toolkit/images/slider-popup.9.png with 100% similarity]
dali-toolkit/images-common/slider-popup.png [moved from dali-toolkit/images/slider-popup.png with 100% similarity]
dali-toolkit/images-common/slider-skin-handle.png [moved from dali-toolkit/images/slider-skin-handle.png with 100% similarity]
dali-toolkit/images-common/slider-skin-progress.9.png [moved from dali-toolkit/images/slider-skin-progress.9.png with 100% similarity]
dali-toolkit/images-common/slider-skin-progress.png [moved from dali-toolkit/images/slider-skin-progress.png with 100% similarity]
dali-toolkit/images-common/slider-skin.9.png [moved from dali-toolkit/images/slider-skin.9.png with 100% similarity]
dali-toolkit/images-common/slider-skin.png [moved from dali-toolkit/images/slider-skin.png with 100% similarity]
dali-toolkit/images-common/text-input-selection-handle-left-press.png [moved from dali-toolkit/images/text-input-selection-handle-left-press.png with 100% similarity]
dali-toolkit/images-common/text-input-selection-handle-left.png [moved from dali-toolkit/images/text-input-selection-handle-left.png with 100% similarity]
dali-toolkit/images-common/text-input-selection-handle-right-press.png [moved from dali-toolkit/images/text-input-selection-handle-right-press.png with 100% similarity]
dali-toolkit/images-common/text-input-selection-handle-right.png [moved from dali-toolkit/images/text-input-selection-handle-right.png with 100% similarity]
dali-toolkit/internal/builder/builder-impl.cpp
dali-toolkit/styles/480x800/dali-toolkit-default-theme.json
dali-toolkit/styles/480x800/images/cursor_handler_drop_center.png [moved from dali-toolkit/images/cursor_handler_drop_center.png with 100% similarity]
dali-toolkit/styles/480x800/images/selection_handle_drop_left.png [moved from dali-toolkit/images/selection_handle_drop_left.png with 100% similarity]
dali-toolkit/styles/480x800/images/selection_handle_drop_right.png [moved from dali-toolkit/images/selection_handle_drop_right.png with 100% similarity]
dali-toolkit/styles/720x1280/dali-toolkit-default-theme.json
dali-toolkit/styles/720x1280/images/cursor_handler_drop_center.png [new file with mode: 0644]
dali-toolkit/styles/720x1280/images/selection_handle_drop_left.png [new file with mode: 0644]
dali-toolkit/styles/720x1280/images/selection_handle_drop_right.png [new file with mode: 0644]
dali-toolkit/styles/file.list
docs/content/main.md
docs/content/programming-guide/styling.h [new file with mode: 0644]

index 75d8ca4..d44e4b4 100644 (file)
 
 # Build the Dali Toolkit library
 
-toolkit_images_dir = ../../../dali-toolkit/images
+toolkit_images_dir = ../../../dali-toolkit/images-common
 toolkit_sounds_dir = ../../../dali-toolkit/sounds
 toolkit_src_dir    = ../../../dali-toolkit/internal
 public_api_src_dir = ../../../dali-toolkit/public-api
 devel_api_src_dir  = ../../../dali-toolkit/devel-api
 
 toolkit_styles_dir = $(STYLE_DIR)
+toolkit_style_images_dir = $(STYLE_DIR)/images
 
-include ../../../dali-toolkit/images/file.list
+include ../../../dali-toolkit/images-common/file.list
 include ../../../dali-toolkit/sounds/file.list
 include ../../../dali-toolkit/styles/file.list
 include ../../../dali-toolkit/internal/file.list
@@ -52,12 +53,16 @@ libdali_toolkit_la_SOURCES = \
 dalistyledir = ${dataReadOnlyDir}/toolkit/styles/
 dalistyle_DATA = ${dali_toolkit_style_files}
 
+dalistyleimagesdir = ${dataReadOnlyDir}/toolkit/styles/images/
+dalistyleimages_DATA = ${dali_toolkit_style_images}
+
 libdali_toolkit_la_DEPENDENCIES =
 
 libdali_toolkit_la_CXXFLAGS = -DDALI_COMPILATION \
                       -DDALI_IMAGE_DIR="\"${daliimagedir}\"" \
                       -DDALI_SOUND_DIR="\"${dalisounddir}\"" \
                       -DDALI_STYLE_DIR="\"${dalistyledir}\"" \
+                      -DDALI_STYLE_IMAGE_DIR="\"${dalistyleimagesdir}\"" \
                       -DDALI_DATA_READ_ONLY_DIR="\"${dataReadOnlyDir}\"" \
                       -Werror -Wall \
                       -I../../../ \
index 4ea4aee..11b92f6 100644 (file)
@@ -1363,6 +1363,7 @@ Builder::Builder()
   defaultDirs[ TOKEN_STRING(DALI_IMAGE_DIR) ]  = DALI_IMAGE_DIR;
   defaultDirs[ TOKEN_STRING(DALI_SOUND_DIR) ]  = DALI_SOUND_DIR;
   defaultDirs[ TOKEN_STRING(DALI_STYLE_DIR) ] = DALI_STYLE_DIR;
+  defaultDirs[ TOKEN_STRING(DALI_STYLE_IMAGE_DIR) ] = DALI_STYLE_IMAGE_DIR;
 
   AddConstants( defaultDirs );
 }
index eee8bcb..dc32fbd 100644 (file)
@@ -65,9 +65,9 @@ distributing this software or its derivatives.
       "secondary-cursor-color":[0.0,0.72,0.9,1.0],
       "cursor-width":1,
       "selection-highlight-color":[0.75,0.96,1.0,1.0],
-      "grab-handle-image" : "{DALI_IMAGE_DIR}cursor_handler_drop_center.png",
-      "selection-handle-image-left" : {"filename":"{DALI_IMAGE_DIR}selection_handle_drop_left.png" },
-      "selection-handle-image-right": {"filename":"{DALI_IMAGE_DIR}selection_handle_drop_right.png" }
+      "grab-handle-image" : "{DALI_STYLE_IMAGE_DIR}cursor_handler_drop_center.png",
+      "selection-handle-image-left" : {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_left.png" },
+      "selection-handle-image-right": {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_right.png" }
     },
 
     "textfield-font-size-0":
index ec1b1c1..7501b72 100644 (file)
@@ -65,9 +65,9 @@ distributing this software or its derivatives.
       "secondary-cursor-color":[0.0,0.72,0.9,1.0],
       "cursor-width":3,
       "selection-highlight-color":[0.75,0.96,1.0,1.0],
-      "grab-handle-image" : "{DALI_IMAGE_DIR}cursor_handler_drop_center.png",
-      "selection-handle-image-left" : {"filename":"{DALI_IMAGE_DIR}selection_handle_drop_left.png" },
-      "selection-handle-image-right": {"filename":"{DALI_IMAGE_DIR}selection_handle_drop_right.png" }
+      "grab-handle-image" : "{DALI_STYLE_IMAGE_DIR}cursor_handler_drop_center.png",
+      "selection-handle-image-left" : {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_left.png" },
+      "selection-handle-image-right": {"filename":"{DALI_STYLE_IMAGE_DIR}selection_handle_drop_right.png" }
     },
 
     "textfield-font-size-0":
diff --git a/dali-toolkit/styles/720x1280/images/cursor_handler_drop_center.png b/dali-toolkit/styles/720x1280/images/cursor_handler_drop_center.png
new file mode 100644 (file)
index 0000000..15c937a
Binary files /dev/null and b/dali-toolkit/styles/720x1280/images/cursor_handler_drop_center.png differ
diff --git a/dali-toolkit/styles/720x1280/images/selection_handle_drop_left.png b/dali-toolkit/styles/720x1280/images/selection_handle_drop_left.png
new file mode 100644 (file)
index 0000000..149becb
Binary files /dev/null and b/dali-toolkit/styles/720x1280/images/selection_handle_drop_left.png differ
diff --git a/dali-toolkit/styles/720x1280/images/selection_handle_drop_right.png b/dali-toolkit/styles/720x1280/images/selection_handle_drop_right.png
new file mode 100644 (file)
index 0000000..75035bc
Binary files /dev/null and b/dali-toolkit/styles/720x1280/images/selection_handle_drop_right.png differ
index 8e49fbe..6c329e9 100644 (file)
@@ -2,3 +2,6 @@
 
 dali_toolkit_style_files =\
     $(toolkit_styles_dir)/*.json
+
+dali_toolkit_style_images =\
+    $(toolkit_style_images_dir)/*.png
index fefb8a3..920c5db 100644 (file)
@@ -39,6 +39,7 @@
    + [Relative To Constraint](@ref constraints-relative-to)
   + [Multi-threading Notes](@ref animation-multi-threading-notes)
   + [Shader Animation](@ref animation-shader)
+  + [Styling](@ref styling)
 
 ### Resources
  + [Resource Image](@ref resource-image)
diff --git a/docs/content/programming-guide/styling.h b/docs/content/programming-guide/styling.h
new file mode 100644 (file)
index 0000000..f1949ca
--- /dev/null
@@ -0,0 +1,62 @@
+/*! \page styling Styling
+ *
+@section styling-controls Styling Controls
+
+DALi Controls can be styled to look and behaviour differently.
+
+There are 2 ways to style a control, 1 is recommended.
+
+1) json markup in one of the style files.
+
+~~~
+      ...
+      "control":
+      {
+        "filename":"{IMAGES}file_name.png"
+      },
+      ...
+~~~
+
+or 2) via code using SetProperty
+
+@code
+Dali::Toolkit::Control control = Dali::Toolkit::Control::New();
+control.SetProperty( Control::BACKGROUND, "file_name.png" );
+@endcode
+
+By setting the properties in the json file and not in code it prevents the need to edit code and recompile if changes required.
+
+In the example above, if the png file needs to be changed, method 1 only requires the json file to be changed and no actual code change.
+
+@section choosing-style-at-build Choosing Style files at build time
+
+When building for a target, a style selector should be specified.
+
+The selectors are resolution biased e.g; 720 and 480.
+
+Below can be added to configure to select a style
+
+@code
+./configure --with-style=480
+@endcode
+
+@code
+./configure --with-style=720
+@endcode
+
+
+or for gbs the below define added to the build command
+
+@code
+--define "dali_style 480x800"
+@endcode
+
+@section resources-for-styling Style specific resources
+
+Each style selector can have resource folders associated with it.
+
+Images for that style should be in their own folder named images.
+
+Common images not specific for a particular style will be in the dali-toolkit common images folder.
+*
+*/