From: Agnelo Vaz <agnelo.vaz@samsung.com>
Date: Wed, 7 Oct 2015 10:39:41 +0000 (+0100)
Subject: Different image sets depending on style selected
X-Git-Tag: dali_1.1.6~1
X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git;a=commitdiff_plain;h=ddc61b05fccb7c1a96ca677276914a0e1dde827b;ds=sidebyside

Different image sets depending on style selected

* 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>
---

diff --git a/build/tizen/dali-toolkit/Makefile.am b/build/tizen/dali-toolkit/Makefile.am
index 75d8ca4..d44e4b4 100644
--- a/build/tizen/dali-toolkit/Makefile.am
+++ b/build/tizen/dali-toolkit/Makefile.am
@@ -16,15 +16,16 @@
 
 # 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../../../ \
diff --git a/dali-toolkit/images/00_popup_bg.9.png b/dali-toolkit/images-common/00_popup_bg.9.png
similarity index 100%
rename from dali-toolkit/images/00_popup_bg.9.png
rename to dali-toolkit/images-common/00_popup_bg.9.png
diff --git a/dali-toolkit/images/00_popup_bg.png b/dali-toolkit/images-common/00_popup_bg.png
similarity index 100%
rename from dali-toolkit/images/00_popup_bg.png
rename to dali-toolkit/images-common/00_popup_bg.png
diff --git a/dali-toolkit/images/00_popup_bottom_bg.png b/dali-toolkit/images-common/00_popup_bottom_bg.png
similarity index 100%
rename from dali-toolkit/images/00_popup_bottom_bg.png
rename to dali-toolkit/images-common/00_popup_bottom_bg.png
diff --git a/dali-toolkit/images/00_popup_bubble_bg.png b/dali-toolkit/images-common/00_popup_bubble_bg.png
similarity index 100%
rename from dali-toolkit/images/00_popup_bubble_bg.png
rename to dali-toolkit/images-common/00_popup_bubble_bg.png
diff --git a/dali-toolkit/images/00_popup_bubble_tail_bottom.png b/dali-toolkit/images-common/00_popup_bubble_tail_bottom.png
similarity index 100%
rename from dali-toolkit/images/00_popup_bubble_tail_bottom.png
rename to dali-toolkit/images-common/00_popup_bubble_tail_bottom.png
diff --git a/dali-toolkit/images/00_popup_button_bg.png b/dali-toolkit/images-common/00_popup_button_bg.png
similarity index 100%
rename from dali-toolkit/images/00_popup_button_bg.png
rename to dali-toolkit/images-common/00_popup_button_bg.png
diff --git a/dali-toolkit/images/00_popup_button_pressed.png b/dali-toolkit/images-common/00_popup_button_pressed.png
similarity index 100%
rename from dali-toolkit/images/00_popup_button_pressed.png
rename to dali-toolkit/images-common/00_popup_button_pressed.png
diff --git a/dali-toolkit/images/B16-8_TTS_focus.png b/dali-toolkit/images-common/B16-8_TTS_focus.png
similarity index 100%
rename from dali-toolkit/images/B16-8_TTS_focus.png
rename to dali-toolkit/images-common/B16-8_TTS_focus.png
diff --git a/dali-toolkit/images/button-disabled.9.png b/dali-toolkit/images-common/button-disabled.9.png
similarity index 100%
rename from dali-toolkit/images/button-disabled.9.png
rename to dali-toolkit/images-common/button-disabled.9.png
diff --git a/dali-toolkit/images/button-down-disabled.9.png b/dali-toolkit/images-common/button-down-disabled.9.png
similarity index 100%
rename from dali-toolkit/images/button-down-disabled.9.png
rename to dali-toolkit/images-common/button-down-disabled.9.png
diff --git a/dali-toolkit/images/button-down.9.png b/dali-toolkit/images-common/button-down.9.png
similarity index 100%
rename from dali-toolkit/images/button-down.9.png
rename to dali-toolkit/images-common/button-down.9.png
diff --git a/dali-toolkit/images/button-up.9.png b/dali-toolkit/images-common/button-up.9.png
similarity index 100%
rename from dali-toolkit/images/button-up.9.png
rename to dali-toolkit/images-common/button-up.9.png
diff --git a/dali-toolkit/images/checkbox-selected-diabled.png b/dali-toolkit/images-common/checkbox-selected-diabled.png
similarity index 100%
rename from dali-toolkit/images/checkbox-selected-diabled.png
rename to dali-toolkit/images-common/checkbox-selected-diabled.png
diff --git a/dali-toolkit/images/checkbox-selected.png b/dali-toolkit/images-common/checkbox-selected.png
similarity index 100%
rename from dali-toolkit/images/checkbox-selected.png
rename to dali-toolkit/images-common/checkbox-selected.png
diff --git a/dali-toolkit/images/checkbox-unselected-disabled.png b/dali-toolkit/images-common/checkbox-unselected-disabled.png
similarity index 100%
rename from dali-toolkit/images/checkbox-unselected-disabled.png
rename to dali-toolkit/images-common/checkbox-unselected-disabled.png
diff --git a/dali-toolkit/images/checkbox-unselected.png b/dali-toolkit/images-common/checkbox-unselected.png
similarity index 100%
rename from dali-toolkit/images/checkbox-unselected.png
rename to dali-toolkit/images-common/checkbox-unselected.png
diff --git a/dali-toolkit/images/copy_paste_icon_clipboard.png b/dali-toolkit/images-common/copy_paste_icon_clipboard.png
similarity index 100%
rename from dali-toolkit/images/copy_paste_icon_clipboard.png
rename to dali-toolkit/images-common/copy_paste_icon_clipboard.png
diff --git a/dali-toolkit/images/copy_paste_icon_copy.png b/dali-toolkit/images-common/copy_paste_icon_copy.png
similarity index 100%
rename from dali-toolkit/images/copy_paste_icon_copy.png
rename to dali-toolkit/images-common/copy_paste_icon_copy.png
diff --git a/dali-toolkit/images/copy_paste_icon_cut.png b/dali-toolkit/images-common/copy_paste_icon_cut.png
similarity index 100%
rename from dali-toolkit/images/copy_paste_icon_cut.png
rename to dali-toolkit/images-common/copy_paste_icon_cut.png
diff --git a/dali-toolkit/images/copy_paste_icon_paste.png b/dali-toolkit/images-common/copy_paste_icon_paste.png
similarity index 100%
rename from dali-toolkit/images/copy_paste_icon_paste.png
rename to dali-toolkit/images-common/copy_paste_icon_paste.png
diff --git a/dali-toolkit/images/copy_paste_icon_select.png b/dali-toolkit/images-common/copy_paste_icon_select.png
similarity index 100%
rename from dali-toolkit/images/copy_paste_icon_select.png
rename to dali-toolkit/images-common/copy_paste_icon_select.png
diff --git a/dali-toolkit/images/copy_paste_icon_select_all.png b/dali-toolkit/images-common/copy_paste_icon_select_all.png
similarity index 100%
rename from dali-toolkit/images/copy_paste_icon_select_all.png
rename to dali-toolkit/images-common/copy_paste_icon_select_all.png
diff --git a/dali-toolkit/images/cursor_handler_ball_center.png b/dali-toolkit/images-common/cursor_handler_ball_center.png
similarity index 100%
rename from dali-toolkit/images/cursor_handler_ball_center.png
rename to dali-toolkit/images-common/cursor_handler_ball_center.png
diff --git a/dali-toolkit/images/file.list b/dali-toolkit/images-common/file.list
similarity index 100%
rename from dali-toolkit/images/file.list
rename to dali-toolkit/images-common/file.list
diff --git a/dali-toolkit/images/insertpoint-icon-pressed.png b/dali-toolkit/images-common/insertpoint-icon-pressed.png
similarity index 100%
rename from dali-toolkit/images/insertpoint-icon-pressed.png
rename to dali-toolkit/images-common/insertpoint-icon-pressed.png
diff --git a/dali-toolkit/images/insertpoint-icon.png b/dali-toolkit/images-common/insertpoint-icon.png
similarity index 100%
rename from dali-toolkit/images/insertpoint-icon.png
rename to dali-toolkit/images-common/insertpoint-icon.png
diff --git a/dali-toolkit/images/keyboard_focus.png b/dali-toolkit/images-common/keyboard_focus.png
similarity index 100%
rename from dali-toolkit/images/keyboard_focus.png
rename to dali-toolkit/images-common/keyboard_focus.png
diff --git a/dali-toolkit/images/magnifier.png b/dali-toolkit/images-common/magnifier.png
similarity index 100%
rename from dali-toolkit/images/magnifier.png
rename to dali-toolkit/images-common/magnifier.png
diff --git a/dali-toolkit/images/popup_bg.png b/dali-toolkit/images-common/popup_bg.png
similarity index 100%
rename from dali-toolkit/images/popup_bg.png
rename to dali-toolkit/images-common/popup_bg.png
diff --git a/dali-toolkit/images/popup_bubble_bg.#.png b/dali-toolkit/images-common/popup_bubble_bg.#.png
similarity index 100%
rename from dali-toolkit/images/popup_bubble_bg.#.png
rename to dali-toolkit/images-common/popup_bubble_bg.#.png
diff --git a/dali-toolkit/images/popup_bubble_bg_ef.#.png b/dali-toolkit/images-common/popup_bubble_bg_ef.#.png
similarity index 100%
rename from dali-toolkit/images/popup_bubble_bg_ef.#.png
rename to dali-toolkit/images-common/popup_bubble_bg_ef.#.png
diff --git a/dali-toolkit/images/popup_bubble_bg_line.#.png b/dali-toolkit/images-common/popup_bubble_bg_line.#.png
similarity index 100%
rename from dali-toolkit/images/popup_bubble_bg_line.#.png
rename to dali-toolkit/images-common/popup_bubble_bg_line.#.png
diff --git a/dali-toolkit/images/popup_bubble_tail_bottom.png b/dali-toolkit/images-common/popup_bubble_tail_bottom.png
similarity index 100%
rename from dali-toolkit/images/popup_bubble_tail_bottom.png
rename to dali-toolkit/images-common/popup_bubble_tail_bottom.png
diff --git a/dali-toolkit/images/popup_bubble_tail_bottom_ef.png b/dali-toolkit/images-common/popup_bubble_tail_bottom_ef.png
similarity index 100%
rename from dali-toolkit/images/popup_bubble_tail_bottom_ef.png
rename to dali-toolkit/images-common/popup_bubble_tail_bottom_ef.png
diff --git a/dali-toolkit/images/popup_bubble_tail_bottom_line.png b/dali-toolkit/images-common/popup_bubble_tail_bottom_line.png
similarity index 100%
rename from dali-toolkit/images/popup_bubble_tail_bottom_line.png
rename to dali-toolkit/images-common/popup_bubble_tail_bottom_line.png
diff --git a/dali-toolkit/images/popup_bubble_tail_top.png b/dali-toolkit/images-common/popup_bubble_tail_top.png
similarity index 100%
rename from dali-toolkit/images/popup_bubble_tail_top.png
rename to dali-toolkit/images-common/popup_bubble_tail_top.png
diff --git a/dali-toolkit/images/popup_bubble_tail_top_ef.png b/dali-toolkit/images-common/popup_bubble_tail_top_ef.png
similarity index 100%
rename from dali-toolkit/images/popup_bubble_tail_top_ef.png
rename to dali-toolkit/images-common/popup_bubble_tail_top_ef.png
diff --git a/dali-toolkit/images/popup_bubble_tail_top_line.png b/dali-toolkit/images-common/popup_bubble_tail_top_line.png
similarity index 100%
rename from dali-toolkit/images/popup_bubble_tail_top_line.png
rename to dali-toolkit/images-common/popup_bubble_tail_top_line.png
diff --git a/dali-toolkit/images/popup_scroll.png b/dali-toolkit/images-common/popup_scroll.png
similarity index 100%
rename from dali-toolkit/images/popup_scroll.png
rename to dali-toolkit/images-common/popup_scroll.png
diff --git a/dali-toolkit/images/popup_tail_down.png b/dali-toolkit/images-common/popup_tail_down.png
similarity index 100%
rename from dali-toolkit/images/popup_tail_down.png
rename to dali-toolkit/images-common/popup_tail_down.png
diff --git a/dali-toolkit/images/popup_tail_left.png b/dali-toolkit/images-common/popup_tail_left.png
similarity index 100%
rename from dali-toolkit/images/popup_tail_left.png
rename to dali-toolkit/images-common/popup_tail_left.png
diff --git a/dali-toolkit/images/popup_tail_right.png b/dali-toolkit/images-common/popup_tail_right.png
similarity index 100%
rename from dali-toolkit/images/popup_tail_right.png
rename to dali-toolkit/images-common/popup_tail_right.png
diff --git a/dali-toolkit/images/popup_tail_up.png b/dali-toolkit/images-common/popup_tail_up.png
similarity index 100%
rename from dali-toolkit/images/popup_tail_up.png
rename to dali-toolkit/images-common/popup_tail_up.png
diff --git a/dali-toolkit/images/radio-button-selected-disabled.png b/dali-toolkit/images-common/radio-button-selected-disabled.png
similarity index 100%
rename from dali-toolkit/images/radio-button-selected-disabled.png
rename to dali-toolkit/images-common/radio-button-selected-disabled.png
diff --git a/dali-toolkit/images/radio-button-selected.png b/dali-toolkit/images-common/radio-button-selected.png
similarity index 100%
rename from dali-toolkit/images/radio-button-selected.png
rename to dali-toolkit/images-common/radio-button-selected.png
diff --git a/dali-toolkit/images/radio-button-unselected-disabled.png b/dali-toolkit/images-common/radio-button-unselected-disabled.png
similarity index 100%
rename from dali-toolkit/images/radio-button-unselected-disabled.png
rename to dali-toolkit/images-common/radio-button-unselected-disabled.png
diff --git a/dali-toolkit/images/radio-button-unselected.png b/dali-toolkit/images-common/radio-button-unselected.png
similarity index 100%
rename from dali-toolkit/images/radio-button-unselected.png
rename to dali-toolkit/images-common/radio-button-unselected.png
diff --git a/dali-toolkit/images/selection-popup-bg.9.png b/dali-toolkit/images-common/selection-popup-bg.9.png
similarity index 100%
rename from dali-toolkit/images/selection-popup-bg.9.png
rename to dali-toolkit/images-common/selection-popup-bg.9.png
diff --git a/dali-toolkit/images/selection_handle_ball_left.png b/dali-toolkit/images-common/selection_handle_ball_left.png
similarity index 100%
rename from dali-toolkit/images/selection_handle_ball_left.png
rename to dali-toolkit/images-common/selection_handle_ball_left.png
diff --git a/dali-toolkit/images/selection_handle_ball_right.png b/dali-toolkit/images-common/selection_handle_ball_right.png
similarity index 100%
rename from dali-toolkit/images/selection_handle_ball_right.png
rename to dali-toolkit/images-common/selection_handle_ball_right.png
diff --git a/dali-toolkit/images/selection_marker_left.png b/dali-toolkit/images-common/selection_marker_left.png
similarity index 100%
rename from dali-toolkit/images/selection_marker_left.png
rename to dali-toolkit/images-common/selection_marker_left.png
diff --git a/dali-toolkit/images/selection_marker_right.png b/dali-toolkit/images-common/selection_marker_right.png
similarity index 100%
rename from dali-toolkit/images/selection_marker_right.png
rename to dali-toolkit/images-common/selection_marker_right.png
diff --git a/dali-toolkit/images/slider-popup-arrow.png b/dali-toolkit/images-common/slider-popup-arrow.png
similarity index 100%
rename from dali-toolkit/images/slider-popup-arrow.png
rename to dali-toolkit/images-common/slider-popup-arrow.png
diff --git a/dali-toolkit/images/slider-popup.9.png b/dali-toolkit/images-common/slider-popup.9.png
similarity index 100%
rename from dali-toolkit/images/slider-popup.9.png
rename to dali-toolkit/images-common/slider-popup.9.png
diff --git a/dali-toolkit/images/slider-popup.png b/dali-toolkit/images-common/slider-popup.png
similarity index 100%
rename from dali-toolkit/images/slider-popup.png
rename to dali-toolkit/images-common/slider-popup.png
diff --git a/dali-toolkit/images/slider-skin-handle.png b/dali-toolkit/images-common/slider-skin-handle.png
similarity index 100%
rename from dali-toolkit/images/slider-skin-handle.png
rename to dali-toolkit/images-common/slider-skin-handle.png
diff --git a/dali-toolkit/images/slider-skin-progress.9.png b/dali-toolkit/images-common/slider-skin-progress.9.png
similarity index 100%
rename from dali-toolkit/images/slider-skin-progress.9.png
rename to dali-toolkit/images-common/slider-skin-progress.9.png
diff --git a/dali-toolkit/images/slider-skin-progress.png b/dali-toolkit/images-common/slider-skin-progress.png
similarity index 100%
rename from dali-toolkit/images/slider-skin-progress.png
rename to dali-toolkit/images-common/slider-skin-progress.png
diff --git a/dali-toolkit/images/slider-skin.9.png b/dali-toolkit/images-common/slider-skin.9.png
similarity index 100%
rename from dali-toolkit/images/slider-skin.9.png
rename to dali-toolkit/images-common/slider-skin.9.png
diff --git a/dali-toolkit/images/slider-skin.png b/dali-toolkit/images-common/slider-skin.png
similarity index 100%
rename from dali-toolkit/images/slider-skin.png
rename to dali-toolkit/images-common/slider-skin.png
diff --git a/dali-toolkit/images/text-input-selection-handle-left-press.png b/dali-toolkit/images-common/text-input-selection-handle-left-press.png
similarity index 100%
rename from dali-toolkit/images/text-input-selection-handle-left-press.png
rename to dali-toolkit/images-common/text-input-selection-handle-left-press.png
diff --git a/dali-toolkit/images/text-input-selection-handle-left.png b/dali-toolkit/images-common/text-input-selection-handle-left.png
similarity index 100%
rename from dali-toolkit/images/text-input-selection-handle-left.png
rename to dali-toolkit/images-common/text-input-selection-handle-left.png
diff --git a/dali-toolkit/images/text-input-selection-handle-right-press.png b/dali-toolkit/images-common/text-input-selection-handle-right-press.png
similarity index 100%
rename from dali-toolkit/images/text-input-selection-handle-right-press.png
rename to dali-toolkit/images-common/text-input-selection-handle-right-press.png
diff --git a/dali-toolkit/images/text-input-selection-handle-right.png b/dali-toolkit/images-common/text-input-selection-handle-right.png
similarity index 100%
rename from dali-toolkit/images/text-input-selection-handle-right.png
rename to dali-toolkit/images-common/text-input-selection-handle-right.png
diff --git a/dali-toolkit/internal/builder/builder-impl.cpp b/dali-toolkit/internal/builder/builder-impl.cpp
index 4ea4aee..11b92f6 100644
--- a/dali-toolkit/internal/builder/builder-impl.cpp
+++ b/dali-toolkit/internal/builder/builder-impl.cpp
@@ -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 );
 }
diff --git a/dali-toolkit/styles/480x800/dali-toolkit-default-theme.json b/dali-toolkit/styles/480x800/dali-toolkit-default-theme.json
index eee8bcb..dc32fbd 100644
--- a/dali-toolkit/styles/480x800/dali-toolkit-default-theme.json
+++ b/dali-toolkit/styles/480x800/dali-toolkit-default-theme.json
@@ -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":
diff --git a/dali-toolkit/images/cursor_handler_drop_center.png b/dali-toolkit/styles/480x800/images/cursor_handler_drop_center.png
similarity index 100%
rename from dali-toolkit/images/cursor_handler_drop_center.png
rename to dali-toolkit/styles/480x800/images/cursor_handler_drop_center.png
diff --git a/dali-toolkit/images/selection_handle_drop_left.png b/dali-toolkit/styles/480x800/images/selection_handle_drop_left.png
similarity index 100%
rename from dali-toolkit/images/selection_handle_drop_left.png
rename to dali-toolkit/styles/480x800/images/selection_handle_drop_left.png
diff --git a/dali-toolkit/images/selection_handle_drop_right.png b/dali-toolkit/styles/480x800/images/selection_handle_drop_right.png
similarity index 100%
rename from dali-toolkit/images/selection_handle_drop_right.png
rename to dali-toolkit/styles/480x800/images/selection_handle_drop_right.png
diff --git a/dali-toolkit/styles/720x1280/dali-toolkit-default-theme.json b/dali-toolkit/styles/720x1280/dali-toolkit-default-theme.json
index ec1b1c1..7501b72 100644
--- a/dali-toolkit/styles/720x1280/dali-toolkit-default-theme.json
+++ b/dali-toolkit/styles/720x1280/dali-toolkit-default-theme.json
@@ -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
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
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
index 0000000..75035bc
Binary files /dev/null and b/dali-toolkit/styles/720x1280/images/selection_handle_drop_right.png differ
diff --git a/dali-toolkit/styles/file.list b/dali-toolkit/styles/file.list
index 8e49fbe..6c329e9 100644
--- a/dali-toolkit/styles/file.list
+++ b/dali-toolkit/styles/file.list
@@ -2,3 +2,6 @@
 
 dali_toolkit_style_files =\
     $(toolkit_styles_dir)/*.json
+
+dali_toolkit_style_images =\
+    $(toolkit_style_images_dir)/*.png
diff --git a/docs/content/main.md b/docs/content/main.md
index fefb8a3..920c5db 100644
--- a/docs/content/main.md
+++ b/docs/content/main.md
@@ -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
index 0000000..f1949ca
--- /dev/null
+++ b/docs/content/programming-guide/styling.h
@@ -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.
+*
+*/