UI : Apply new design guide for Timeline Chart Edit dialog 81/23281/1
authorjungwook.ryu <jungwook.ryu@samsung.com>
Sun, 22 Jun 2014 23:22:27 +0000 (08:22 +0900)
committerjungwook.ryu <jungwook.ryu@samsung.com>
Sun, 22 Jun 2014 23:23:49 +0000 (08:23 +0900)
Change-Id: If25c72aca2f3a0cfd86ce7d537cc28921927d1ea
Signed-off-by: jungwook.ryu <jungwook.ryu@samsung.com>
org.tizen.dynamicanalyzer.appearance/src/org/tizen/dynamicanalyzer/resources/ColorResources.java
org.tizen.dynamicanalyzer.appearance/src/org/tizen/dynamicanalyzer/resources/ImageResources.java
org.tizen.dynamicanalyzer.appearance/src/org/tizen/dynamicanalyzer/theme/DAThemeWhite.java
org.tizen.dynamicanalyzer.appearance/theme/white/img/dialog_edit_chart_minus.png [new file with mode: 0644]
org.tizen.dynamicanalyzer.appearance/theme/white/img/dialog_edit_chart_plus.png [new file with mode: 0644]
org.tizen.dynamicanalyzer/src/org/tizen/dynamicanalyzer/ui/timeline/common/AddChartMenuComposite.java
org.tizen.dynamicanalyzer/src/org/tizen/dynamicanalyzer/ui/timeline/common/TimelineEditItemsDialog.java

index 08342e8..82b0361 100755 (executable)
@@ -69,9 +69,22 @@ public class ColorResources {
        public static Color DIALOG_SUNKEN_1 = getColor("dialg_sunken_1");//$NON-NLS-1$\r
        public static Color DIALOG_SUNKEN_2 = getColor("dialg_sunken_2");//$NON-NLS-1$\r
 \r
+       /** Timeline Edit chart dialog **/\r
        public static Color EDIT_CHART_DIALOG_UPPER = getColor("edit_chart_dialog_upper");//$NON-NLS-1$\r
        public static Color EDIT_CHART_DIALOG_LOWER = getColor("edit_chart_dialog_lower");//$NON-NLS-1$\r
-\r
+       public static Color EDIT_CHART_BUTTON_NORMAL_COLOR_START = getColor("edit_chart_button_normal_color_start"); //$NON-NLS-1$\r
+       public static Color EDIT_CHART_BUTTON_NORMAL_COLOR_END = getColor("edit_chart_button_normal_color_end"); //$NON-NLS-1$\r
+       public static Color EDIT_CHART_BUTTON_HOVER_COLOR_START = getColor("edit_chart_button_hover_color_start"); //$NON-NLS-1$\r
+       public static Color EDIT_CHART_BUTTON_HOVER_COLOR_END = getColor("edit_chart_button_hover_color_end"); //$NON-NLS-1$\r
+       public static Color EDIT_CHART_BUTTON_PUSH_COLOR_START = getColor("edit_chart_button_push_color_start"); //$NON-NLS-1$\r
+       public static Color EDIT_CHART_BUTTON_PUSH_COLOR_END = getColor("edit_chart_button_push_color_end"); //$NON-NLS-1$\r
+       public static Color EDIT_CHART_BUTTON_OUTLINE_NORMAL_COLOR = getColor("edit_chart_button_outline_normal_color"); //$NON-NLS-1$\r
+       public static Color EDIT_CHART_BUTTON_OUTLINE_HOVER_COLOR = getColor("edit_chart_button_outline_hover_color"); //$NON-NLS-1$\r
+       public static Color EDIT_CHART_BUTTON_OUTLINE_PUSH_COLOR = getColor("edit_chart_button_outline_push_color"); //$NON-NLS-1$\r
+       public static Color EDIT_CHART_BUTTON_INLINE_NORMAL_COLOR = getColor("edit_chart_button_inline_normal_color"); //$NON-NLS-1$\r
+       public static Color EDIT_CHART_BUTTON_INLINE_HOVER_COLOR = getColor("edit_chart_button_inline_hover_color"); //$NON-NLS-1$\r
+       public static Color EDIT_CHART_BUTTON_INLINE_PUSH_COLOR = getColor("edit_chart_button_inline_push_color"); //$NON-NLS-1$\r
+       \r
        public static Color VIEW_BORDER = getColor("view_border"); //$NON-NLS-1$\r
        public static Color VIEW_BORDER_1 = getColor("view_border_1"); //$NON-NLS-1$\r
        public static Color VIEW_BORDER_2 = getColor("view_border_2"); //$NON-NLS-1$\r
@@ -388,11 +401,14 @@ public class ColorResources {
        public static Color PROFILING_GRAPH_SELECTION_COLOR_END = getColor("profiling_graph_selection_color_end"); //$NON-NLS-1$\r
 \r
        // Add Chart\r
-       public static Color ADD_CHART_ENABLE_COLOR_START = getColor("add_chart_enable_color_start"); //$NON-NLS-1$\r
-       public static Color ADD_CHART_ENABLE_COLOR_END = getColor("add_chart_enable_color_end"); //$NON-NLS-1$\r
-       public static Color ADD_CHART_DISABLE_COLOR_START = getColor("add_chart_disable_color_start"); //$NON-NLS-1$\r
-       public static Color ADD_CHART_DISABLE_COLOR_END = getColor("add_chart_disable_color_end"); //$NON-NLS-1$\r
-\r
+       public static Color ADD_CHART_ENABLE_COLOR = getColor("add_chart_enable_color"); //$NON-NLS-1$\r
+       public static Color ADD_CHART_DISABLE_COLOR = getColor("add_chart_disable_color"); //$NON-NLS-1$\r
+       public static Color ADD_CHART_ENABLE_TEXT_COLOR = getColor("add_chart_enable_text_color"); //$NON-NLS-1$\r
+       public static Color ADD_CHART_DISABLE_TEXT_COLOR = getColor("add_chart_disable_text_color"); //$NON-NLS-1$\r
+       public static Color ADD_CHART_ENABLE_HOVER_COLOR = getColor("add_chart_enable_hover_color"); //$NON-NLS-1$ \r
+       public static Color ADD_CHART_DISABLE_HOVER_COLOR = getColor("add_chart_disable_hover_color"); //$NON-NLS-1$\r
+       public static Color ADD_CHART_DRAG_COLOR = getColor("add_chart_drag_color"); //$NON-NLS-1$\r
+       \r
        /** timeline chart **/\r
        public static Color SERIES_COLOR_CPU_SYSTEM = getColor("seriesColorCPUSystem"); //$NON-NLS-1$\r
        public static Color SERIES_COLOR_CPU_APP = getColor("seriesColorCPUApp"); //$NON-NLS-1$\r
index e8544b3..0033c07 100644 (file)
@@ -346,8 +346,8 @@ public class ImageResources {
        public static final Image SCORE_9 = getPngImage("score_9"); //$NON-NLS-1$\r
 \r
        // Edit Chart\r
-       public static final Image ADD_CHART_OFF = getPngImage("dialog_edit_chart_off"); //$NON-NLS-1$\r
-       public static final Image ADD_CHART_ON = getPngImage("dialog_edit_chart_on"); //$NON-NLS-1$\r
+       public static final Image ADD_CHART_OFF = getPngImage("dialog_edit_chart_minus"); //$NON-NLS-1$\r
+       public static final Image ADD_CHART_ON = getPngImage("dialog_edit_chart_plus"); //$NON-NLS-1$\r
        public static final Image ADD_CHART_CPU = getPngImage("edit_chart_icon_cpu"); //$NON-NLS-1$\r
        public static final Image ADD_CHART_CPU_CORE = getPngImage("edit_chart_icon_cpu_core"); //$NON-NLS-1$\r
        public static final Image ADD_CHART_CPU_FREQUENCY = getPngImage("edit_chart_icon_cpu_frequency"); //$NON-NLS-1$\r
index ba18241..9cde936 100644 (file)
@@ -74,8 +74,20 @@ public class DAThemeWhite extends DATheme {
                setColor("dialg_bg_lower", new RGB(240, 240, 240));
                setColor("dialg_sunken_1", new RGB(160, 160, 160));
                setColor("dialg_sunken_2", new RGB(255, 255, 255));
-               setColor("edit_chart_dialog_upper", new RGB(255, 255, 255));
+               setColor("edit_chart_dialog_upper", new RGB(232, 234, 235));
                setColor("edit_chart_dialog_lower", new RGB(240, 240, 240));
+               setColor("edit_chart_button_normal_color_start", new RGB(231, 231, 231)); //$NON-NLS-1$
+               setColor("edit_chart_button_normal_color_end", new RGB(177, 177, 177)); //$NON-NLS-1$
+               setColor("edit_chart_button_hover_color_start", new RGB(231, 231, 231)); //$NON-NLS-1$
+               setColor("edit_chart_button_hover_color_end", new RGB(177, 177, 177)); //$NON-NLS-1$
+               setColor("edit_chart_button_push_color_start", new RGB(177, 177, 177)); //$NON-NLS-1$
+               setColor("edit_chart_button_push_color_end", new RGB(231, 231, 231)); //$NON-NLS-1$
+               setColor("edit_chart_button_outline_normal_color", new RGB(154, 154, 154)); //$NON-NLS-1$
+               setColor("edit_chart_button_outline_hover_color", new RGB(45, 180, 200)); //$NON-NLS-1$
+               setColor("edit_chart_button_outline_push_color", new RGB(154, 154, 154)); //$NON-NLS-1$
+               setColor("edit_chart_button_inline_normal_color", new RGB(255, 255, 255)); //$NON-NLS-1$
+               setColor("edit_chart_button_inline_hover_color", new RGB(255, 255, 255)); //$NON-NLS-1$
+               setColor("edit_chart_button_inline_push_color", new RGB(255, 255, 255)); //$NON-NLS-1$
 
                setColor("view_border", new RGB(206, 206, 206)); //$NON-NLS-1$
                setColor("view_border_1", new RGB(160, 160, 160)); //$NON-NLS-1$
@@ -394,10 +406,13 @@ public class DAThemeWhite extends DATheme {
                setColor("profiling_graph_selection_color_end", new RGB(232, 73, 73)); //$NON-NLS-1$
 
                // Add Chart
-               setColor("add_chart_enable_color_start", new RGB(166, 232, 255)); //$NON-NLS-1$
-               setColor("add_chart_enable_color_end", new RGB(50, 185, 231)); //$NON-NLS-1$
-               setColor("add_chart_disable_color_start", new RGB(225, 225, 225)); //$NON-NLS-1$
-               setColor("add_chart_disable_color_end", new RGB(225, 225, 225)); //$NON-NLS-1$
+               setColor("add_chart_enable_color", new RGB(210, 246, 255)); //$NON-NLS-1$
+               setColor("add_chart_disable_color", new RGB(240, 240, 240)); //$NON-NLS-1$
+               setColor("add_chart_enable_text_color", new RGB(0, 0, 0)); //$NON-NLS-1$
+               setColor("add_chart_disable_text_color", new RGB(153, 153, 153)); //$NON-NLS-1$
+               setColor("add_chart_enable_hover_color", new RGB(5, 73, 83)); //$NON-NLS-1$
+               setColor("add_chart_disable_hover_color", new RGB(50, 185, 231)); //$NON-NLS-1$
+               setColor("add_chart_drag_color", new RGB(222, 222, 222)); //$NON-NLS-1$
 
                /** Timeline chart **/
                setColor("seriesColorCPUSystem", new RGB(131, 207, 232)); //$NON-NLS-1$
diff --git a/org.tizen.dynamicanalyzer.appearance/theme/white/img/dialog_edit_chart_minus.png b/org.tizen.dynamicanalyzer.appearance/theme/white/img/dialog_edit_chart_minus.png
new file mode 100644 (file)
index 0000000..f303d2a
Binary files /dev/null and b/org.tizen.dynamicanalyzer.appearance/theme/white/img/dialog_edit_chart_minus.png differ
diff --git a/org.tizen.dynamicanalyzer.appearance/theme/white/img/dialog_edit_chart_plus.png b/org.tizen.dynamicanalyzer.appearance/theme/white/img/dialog_edit_chart_plus.png
new file mode 100644 (file)
index 0000000..cbaa872
Binary files /dev/null and b/org.tizen.dynamicanalyzer.appearance/theme/white/img/dialog_edit_chart_plus.png differ
index 347a3a5..7dbf35f 100644 (file)
@@ -89,7 +89,7 @@ public class AddChartMenuComposite extends Composite {
                                ColorResources.ADD_CHART_NORMAL_START, ColorResources.ADD_CHART_NORMAL_END, 
                                ColorResources.ADD_CHART_PUSH_START, ColorResources.ADD_CHART_PUSH_END,
                                ColorResources.ADD_CHART_HOVER_START, ColorResources.ADD_CHART_HOVER_END, 
-                               ColorResources.ADD_CHART_DISABLE_COLOR_START, ColorResources.ADD_CHART_DISABLE_COLOR_END);
+                               ColorResources.ADD_CHART_DISABLE_COLOR, ColorResources.ADD_CHART_DISABLE_COLOR);
                
                addItems.setOutlineColors(ColorResources.ADD_CHART_NORMAL_STROKE, 
                                ColorResources.ADD_CHART_PUSH_STROKE, 
index 5a40933..4b5a968 100644 (file)
@@ -27,7 +27,9 @@
 package org.tizen.dynamicanalyzer.ui.timeline.common;
 
 import java.util.ArrayList;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 import org.eclipse.jface.viewers.TableViewer;
 import org.eclipse.swt.SWT;
@@ -43,8 +45,11 @@ import org.eclipse.swt.dnd.Transfer;
 import org.eclipse.swt.events.MouseAdapter;
 import org.eclipse.swt.events.MouseEvent;
 import org.eclipse.swt.events.MouseListener;
+import org.eclipse.swt.events.MouseTrackAdapter;
+import org.eclipse.swt.events.MouseTrackListener;
 import org.eclipse.swt.events.PaintEvent;
 import org.eclipse.swt.events.PaintListener;
+import org.eclipse.swt.events.ShellAdapter;
 import org.eclipse.swt.events.ShellEvent;
 import org.eclipse.swt.events.ShellListener;
 import org.eclipse.swt.graphics.Color;
@@ -58,6 +63,7 @@ import org.eclipse.swt.layout.FormLayout;
 import org.eclipse.swt.layout.GridData;
 import org.eclipse.swt.layout.GridLayout;
 import org.eclipse.swt.widgets.Composite;
+import org.eclipse.swt.widgets.Display;
 import org.eclipse.swt.widgets.Event;
 import org.eclipse.swt.widgets.Listener;
 import org.eclipse.swt.widgets.Shell;
@@ -81,23 +87,22 @@ import org.tizen.dynamicanalyzer.widgets.da.base.DAButton;
 import org.tizen.dynamicanalyzer.widgets.da.base.DAMessageBox;
 
 public class TimelineEditItemsDialog extends DAMessageBox {
-
+       private final static int COLUMN_TITLE = 0;
+       private final static int COLUMN_TEXT = 1;
+       private final static int TABLE_HEIGHT = 66;
+       private final static int ENABLE_IMAGE_POINT_X = 412;
+       private final static int ENABLE_IMAGE_OFFSET_Y = 6;
+       private final static int TITLE_TEXT_POINT_X = 92;
+       private final static int TITLE_TEXT_OFFSET_Y = 18;
+       
        private TableViewer chartTableViewer;
-       // private boolean chartChangeSatus = true;
-
-       private TimelineChartManager chartManager = TimelineChartManager
-                       .getInstance();
-
+       private TimelineChartManager chartManager = TimelineChartManager.getInstance();
        private boolean DragItemStartPlg = true;
-       private int SwapItemIndexA = 0;
-       private int SwapItemIndexB = 0;
-       private int ChangeDragItemIndex = 0;
-
-       private static final String strEnableChart = "selected enable"; //$NON-NLS-1$
-       private static final String strDisableChart = "selected disable"; //$NON-NLS-1$
-
+       private int swapItemIndexA = 0;         // drag source
+       private int swapItemIndexB = 0;         // drag target
        private static boolean RunningDialog = false;
-
+       private Map<Integer, Image> imageMap = new HashMap<Integer, Image>();   // for drag image
+       
        public TimelineEditItemsDialog(Shell parent) {
                super(parent);
        }
@@ -122,23 +127,23 @@ public class TimelineEditItemsDialog extends DAMessageBox {
                                        CommonConstants.EMPTY);
 
                        for (TableItem item : tableitems) {
-                               int chartType = Integer.parseInt(item.getText(0));
-                               chartList.add(chartManager.getChartInstance(chartType));
+                               TableItemData itemData = (TableItemData)item.getData();
+                               chartList.add(chartManager.getChartInstance(itemData.chartType));
 
-                               strSaveChartNameList.append(item.getText(2));
+                               strSaveChartNameList.append(itemData.titleText);
                                strSaveChartNameList.append(CommonConstants.COMMA);
 
-                               if (item.getText(3).equals(strEnableChart)) {
+                               if (itemData.isEnabled) {
                                        selectedChartList.add(chartManager
-                                                       .getChartInstance(chartType));
-                                       strSaveSelectedChartNameList.append(item.getText(2));
+                                                       .getChartInstance(itemData.chartType));
+                                       strSaveSelectedChartNameList.append(itemData.titleText);
                                        strSaveSelectedChartNameList.append(CommonConstants.COMMA);
                                        showInfo.add(true);
                                } else {
                                        showInfo.add(false);
                                }
 
-                               order.add(Integer.parseInt(item.getText(4)));
+                               order.add(itemData.index);
                        }
 
                        for (int i = tableitems.length; i < chartManager.getChartList()
@@ -168,32 +173,15 @@ public class TimelineEditItemsDialog extends DAMessageBox {
                public void handleClickEvent(DACustomButton button) {
                        shell.dispose();
                        RunningDialog = false;
+                       imageMap.clear();
                }
        };
 
-       private ShellListener shellListener = new ShellListener() {
-
-               @Override
-               public void shellActivated(ShellEvent e) {
-               }
-
+       private ShellListener shellListener = new ShellAdapter() {
                @Override
                public void shellClosed(ShellEvent e) {
                        RunningDialog = false;
                }
-
-               @Override
-               public void shellDeactivated(ShellEvent e) {
-               }
-
-               @Override
-               public void shellDeiconified(ShellEvent e) {
-               }
-
-               @Override
-               public void shellIconified(ShellEvent e) {
-               }
-
        };
 
        protected boolean run() {
@@ -220,11 +208,8 @@ public class TimelineEditItemsDialog extends DAMessageBox {
                chartTableViewer.getTable().setLayoutData(tableGridData);
                chartTableViewer.getTable().setLinesVisible(true);
 
-               new TableColumn(chartTableViewer.getTable(), SWT.NONE).setWidth(82);
-               new TableColumn(chartTableViewer.getTable(), SWT.NONE).setWidth(330);
-               new TableColumn(chartTableViewer.getTable(), SWT.NONE).setWidth(0);
-               new TableColumn(chartTableViewer.getTable(), SWT.NONE).setWidth(0);
-               new TableColumn(chartTableViewer.getTable(), SWT.NONE).setWidth(0);
+               new TableColumn(chartTableViewer.getTable(), SWT.NONE).setWidth(76);            // Column for Title image
+               new TableColumn(chartTableViewer.getTable(), SWT.NONE).setWidth(345);           // Column for Title text
 
                final List<TimelineChart> chartList = chartManager.getChartList();
                int chartListSize = chartList.size();
@@ -233,22 +218,27 @@ public class TimelineEditItemsDialog extends DAMessageBox {
 
                final TableItem[] items = new TableItem[chartListSize];
                for (int i = 0; i < chartListSize; i++) {
+                       // setting data per table item
                        items[i] = new TableItem(chartTableViewer.getTable(), SWT.NONE, i);
-                       items[i].setText(0, String.valueOf(chartList.get(i).getChartType()));
+                       items[i].setText(chartList.get(i).getChartName());
+                       items[i].setImage(chartList.get(i).getAddIcon());
                        items[i].setFont(FontResources.EDIT_CHART_DLG_ITEM_NAME);
-                       items[i].setImage(0, ImageResources.ADD_CHART_CPU);
-                       items[i].setText(1, CommonConstants.SPACE);
-                       items[i].setText(2, chartList.get(i).getChartName());
-                       items[i].setText(3, strDisableChart);
-                       items[i].setText(4, String.valueOf(i));
-
+                       TableItemData itemData = new TableItemData();
+                       itemData.index = i;
+                       itemData.chartType = chartList.get(i).getChartType();
+                       itemData.titleImage = chartList.get(i).getAddIcon();
+                       itemData.titleText = chartList.get(i).getChartName();
+                       itemData.isEnabled = false;
+                       itemData.isHovered = false;
+                       
                        for (int j = 0; j < selectedChartList.size(); j++) {
                                if (chartList.get(i).getChartType() == selectedChartList.get(j)
                                                .getChartType()) {
-                                       items[i].setText(3, strEnableChart);
+                                       itemData.isEnabled = true;
                                        break;
                                }
                        }
+                       items[i].setData(itemData);
                }
 
                Listener paintListener = new Listener() {
@@ -260,70 +250,65 @@ public class TimelineEditItemsDialog extends DAMessageBox {
                                        Point size = event.gc.textExtent(text);
                                        event.width = size.x;
                                        event.height = Math.max(event.height, size.y);
-
                                        break;
                                }
                                case SWT.PaintItem: {
                                        int width = chartTableViewer.getTable().getClientArea().width;
-
+                                       
                                        TableItem item = (TableItem) event.item;
-
-                                       String itemName = item.getText(event.index + 1);
-                                       Point size = event.gc.textExtent(itemName);
-                                       int offset2 = event.index == 0 ? Math.max(0,
-                                                       (event.height - size.y) / 2) : 0;
-
-                                       String itemExplan = CommonConstants.EMPTY;
-                                       size = event.gc.textExtent(itemExplan);
-                                       offset2 = event.index == 0 ? Math.max(0,
-                                                       (event.height - size.y) / 2) : 0;
-
-                                       String strItemStatus = item.getText(3);
+                                       TableItemData itemData = (TableItemData)item.getData();
 
                                        GC gc = event.gc;
-                                       event.gc.setAdvanced(true);
+                                       gc.setAdvanced(true);
                                        Rectangle rect = event.getBounds();
                                        Color foreground = gc.getForeground();
                                        Color background = gc.getBackground();
-                                       if (strItemStatus.equals(strEnableChart)) {
-                                               event.gc.setForeground(ColorResources.ADD_CHART_ENABLE_COLOR_START);
-                                               event.gc.setBackground(ColorResources.ADD_CHART_ENABLE_COLOR_END);
+                                       // draw background color
+                                       if (itemData.isEnabled) {
+                                               gc.setBackground(ColorResources.ADD_CHART_ENABLE_COLOR);
+                                               gc.fillRectangle(0, rect.y, width, TABLE_HEIGHT);
+                                               if (itemData.isHovered) {
+                                                       gc.setForeground(ColorResources.ADD_CHART_ENABLE_HOVER_COLOR);
+                                                       gc.drawRectangle(0, rect.y, width-1, TABLE_HEIGHT - 1);
+                                               }
                                        } else {
-                                               event.gc.setForeground(ColorResources.ADD_CHART_DISABLE_COLOR_START);
-                                               event.gc.setBackground(ColorResources.ADD_CHART_DISABLE_COLOR_END);
-
+                                               gc.setBackground(ColorResources.ADD_CHART_DISABLE_COLOR);
+                                               gc.fillRectangle(0, rect.y, width, TABLE_HEIGHT);
+                                               if (itemData.isHovered) {
+                                                       gc.setForeground(ColorResources.ADD_CHART_DISABLE_HOVER_COLOR);
+                                                       gc.drawRectangle(0, rect.y, width-1, TABLE_HEIGHT - 1);
+                                               }
+                                       }
+                                       // draw stroke line during drag
+                                       if (itemData.isDrag) {
+                                               gc.setBackground(ColorResources.ADD_CHART_DRAG_COLOR);
+                                               gc.setAlpha(204);
+                                               gc.fillRectangle(0, rect.y, width, TABLE_HEIGHT);
                                        }
-
-                                       event.gc.fillGradientRectangle(0, rect.y, width, 66, true);
                                        gc.setForeground(foreground);
                                        gc.setBackground(background);
                                        event.detail &= ~SWT.SELECTED;
 
-                                       if (strItemStatus.equals(strEnableChart)
-                                                       && event.index == 1) {
-                                               event.gc.drawImage(ImageResources.ADD_CHART_ON, 374,
-                                                               event.y + 6);
-                                       } else {
-                                               event.gc.drawImage(ImageResources.ADD_CHART_OFF, 374,
-                                                               event.y + 6);
-                                       }
-
-                                       if (event.index == 0) {
-
-                                               if (strItemStatus.equals(strDisableChart)) {
-                                                       event.gc.setAlpha(150);
+                                       if (event.index == COLUMN_TITLE) {              // draw column for title image
+                                               gc.drawImage(itemData.titleImage, 0, event.y);
+                                       } else if (event.index == COLUMN_TEXT) {        // draw column for title text
+                                               Image statusImage = ImageResources.ADD_CHART_OFF;
+                                               Color textColor = ColorResources.ADD_CHART_DISABLE_TEXT_COLOR;
+                                               if (itemData.isEnabled) {
+                                                       statusImage = ImageResources.ADD_CHART_ON;
+                                                       textColor = ColorResources.ADD_CHART_ENABLE_TEXT_COLOR;
                                                }
-
-                                               Image addIcon = chartManager.getChartInstance(
-                                                               Integer.parseInt(item.getText(0))).getAddIcon();
-                                               event.gc.drawImage(addIcon, 3, event.y);
-
-                                       } else if (event.index == 1) {
-                                               event.gc.drawText(itemName, event.x + 20, event.y
-                                                               + offset2 + 24, true);
-                                               event.gc.setForeground(ColorResources.BLACK);
+                                               gc.setForeground(textColor);
+                                               gc.drawText(itemData.titleText, TITLE_TEXT_POINT_X, event.y + TITLE_TEXT_OFFSET_Y, true);
+                                               gc.drawImage(statusImage, ENABLE_IMAGE_POINT_X, event.y + ENABLE_IMAGE_OFFSET_Y);
+                                               // capture image for drag
+                                               Image itemImage = imageMap.get(itemData.chartType);
+                                               if (itemImage == null) {
+                                                       itemImage = new Image(Display.getDefault(), width-1, TABLE_HEIGHT);
+                                                       imageMap.put(itemData.chartType, itemImage);
+                                               }
+                                               gc.copyArea(itemImage, 0, event.y);
                                        }
-
                                        break;
                                }
                                case SWT.EraseItem: {
@@ -339,6 +324,7 @@ public class TimelineEditItemsDialog extends DAMessageBox {
                chartTableViewer.getTable().addListener(SWT.PaintItem, paintListener);
                chartTableViewer.getTable().addListener(SWT.EraseItem, paintListener);
                chartTableViewer.getTable().addMouseListener(itemZoomMouseListener);
+               chartTableViewer.getTable().addMouseTrackListener(mouseTrackListener);
 
                Transfer[] types = new Transfer[] { TextTransfer.getInstance() };
                DragSource source = new DragSource(chartTableViewer.getTable(),
@@ -357,6 +343,19 @@ public class TimelineEditItemsDialog extends DAMessageBox {
 
                                // chartChangeSatus = false;
                        }
+                       
+                       @Override
+                       public void dragStart(DragSourceEvent event) {
+                               // set drag image. this image will be shown below of mouse pointer.
+                               DragSource ds = (DragSource) event.widget;
+                               Table table = (Table) ds.getControl();
+                               TableItem selection = table.getItem(new Point(event.x, event.y));
+                               Image dropImage = imageMap.get(((TableItemData)selection.getData()).chartType);
+                               ((TableItemData)selection.getData()).isDrag = true; 
+                               event.image = dropImage;
+                               DragItemStartPlg = true;
+                               chartTableViewer.getTable().redraw();
+                       }
                });
 
                DropTarget target = new DropTarget(chartTableViewer.getTable(),
@@ -364,9 +363,8 @@ public class TimelineEditItemsDialog extends DAMessageBox {
                target.setTransfer(types);
                target.addDropListener(new DropTargetAdapter() {
                        public void dragEnter(DropTargetEvent event) {
-
                                if (DragItemStartPlg == true) {
-                                       SwapItemIndexA = chartTableViewer.getTable()
+                                       swapItemIndexA = chartTableViewer.getTable()
                                                        .getSelectionIndex();
                                        DragItemStartPlg = false;
                                }
@@ -385,64 +383,33 @@ public class TimelineEditItemsDialog extends DAMessageBox {
 
                        public void dragOver(DropTargetEvent event) {
                                event.feedback = DND.FEEDBACK_SELECT | DND.FEEDBACK_SCROLL;
+                       }
 
+                       public void drop(DropTargetEvent event) {
                                DropTarget target = (DropTarget) event.widget;
                                Table table = (Table) target.getControl();
-
-                               Point point = shell.getDisplay().map(null, table, event.x,
-                                               event.y);
+                               Point point = shell.getDisplay().map(null, table, event.x, event.y);
                                TableItem tblItemTarget = table.getItem(point);
                                if (tblItemTarget == null) {
                                        return;
                                }
-
-                               SwapItemIndexB = table.indexOf(tblItemTarget);
-
-                               if (ChangeDragItemIndex != SwapItemIndexB) {
-                                       TableItem[] chartTableItems = chartTableViewer.getTable()
-                                                       .getItems();
-
-                                       String strIndexA = null;
-                                       String strIndexB = null;
-
-                                       strIndexA = chartTableItems[SwapItemIndexA].getText(0);
-                                       strIndexB = chartTableItems[SwapItemIndexB].getText(0);
-
-                                       chartTableItems[SwapItemIndexB].setText(0, strIndexA);
-                                       chartTableItems[SwapItemIndexA].setText(0, strIndexB);
-
-                                       strIndexA = chartTableItems[SwapItemIndexA].getText(2);
-                                       strIndexB = chartTableItems[SwapItemIndexB].getText(2);
-
-                                       chartTableItems[SwapItemIndexB].setText(2, strIndexA);
-                                       chartTableItems[SwapItemIndexA].setText(2, strIndexB);
-
-                                       strIndexA = chartTableItems[SwapItemIndexA].getText(3);
-                                       strIndexB = chartTableItems[SwapItemIndexB].getText(3);
-
-                                       chartTableItems[SwapItemIndexB].setText(3, strIndexA);
-                                       chartTableItems[SwapItemIndexA].setText(3, strIndexB);
-
-                                       strIndexA = chartTableItems[SwapItemIndexA].getText(4);
-                                       strIndexB = chartTableItems[SwapItemIndexB].getText(4);
-
-                                       chartTableItems[SwapItemIndexB].setText(4, strIndexA);
-                                       chartTableItems[SwapItemIndexA].setText(4, strIndexB);
-
-                                       chartTableViewer.getTable().setDragDetect(true);
-                                       chartTableViewer.getTable().redraw();
-
-                                       int tempIndex = 0;
-                                       tempIndex = SwapItemIndexA;
-                                       SwapItemIndexA = SwapItemIndexB;
-                                       SwapItemIndexB = tempIndex;
-
+                               swapItemIndexB = table.indexOf(tblItemTarget);
+                               if (swapItemIndexA != swapItemIndexB) {
+                                       TableItem[] chartTableItems = chartTableViewer.getTable().getItems();
+                                       /*
+                                        * Swap table item
+                                        */
+                                       TableItemData itemData_A = (TableItemData)chartTableItems[swapItemIndexA].getData();
+                                       TableItemData itemData_B = (TableItemData)chartTableItems[swapItemIndexB].getData();
+                                       TableItemData itemData_tmp = itemData_A;
+                                       chartTableItems[swapItemIndexA].setData(itemData_B);
+                                       chartTableItems[swapItemIndexB].setData(itemData_tmp);
                                }
-                               ChangeDragItemIndex = SwapItemIndexB;
-                       }
-
-                       public void drop(DropTargetEvent event) {
-                               DragItemStartPlg = true;
+                               TableItem[] items = chartTableViewer.getTable().getItems();
+                               for (int i = 0; i < items.length; i++) {
+                                       ((TableItemData)items[i].getData()).isDrag = false;
+                               }
+                               chartTableViewer.getTable().redraw();
                        }
                });
 
@@ -457,22 +424,24 @@ public class TimelineEditItemsDialog extends DAMessageBox {
                buttonComp.setLayoutData(data);
 
                DAButton okButton = new DAButton(buttonComp, SWT.PUSH);
+               setEditDialogButtonStyle(okButton);
                okButton.addClickListener(okButtonListener);
                okButton.setText(WidgetLabels.OK);
                okButton.setFont(FontResources.EDIT_CHART_DLG_BUTTON);
                data = new FormData();
-               data.top = new FormAttachment(0, 8);
+               data.top = new FormAttachment(0, 11);
                data.left = new FormAttachment(0, 119);
                data.width = DesignConstants.DA_BUTTON_WIDTH;
                data.height = DesignConstants.DA_BUTTON_HEIGHT;
                okButton.setLayoutData(data);
 
                DAButton cancelButton = new DAButton(buttonComp, SWT.PUSH);
+               setEditDialogButtonStyle(cancelButton);
                cancelButton.addClickListener(cancelButtonListener);
                cancelButton.setText(WidgetLabels.CANCEL);
                cancelButton.setFont(FontResources.EDIT_CHART_DLG_BUTTON);
                data = new FormData();
-               data.top = new FormAttachment(0, 8);
+               data.top = new FormAttachment(0, 11);
                data.left = new FormAttachment(okButton, 8);
                data.width = DesignConstants.DA_BUTTON_WIDTH;
                data.height = DesignConstants.DA_BUTTON_HEIGHT;
@@ -498,23 +467,66 @@ public class TimelineEditItemsDialog extends DAMessageBox {
                return true;
        }
 
+       private void setEditDialogButtonStyle(DAButton button) {
+               button.setGradation(ColorResources.EDIT_CHART_BUTTON_NORMAL_COLOR_START,
+                               ColorResources.EDIT_CHART_BUTTON_NORMAL_COLOR_END,
+                               ColorResources.EDIT_CHART_BUTTON_PUSH_COLOR_START, 
+                               ColorResources.EDIT_CHART_BUTTON_PUSH_COLOR_END,
+                               ColorResources.EDIT_CHART_BUTTON_HOVER_COLOR_START,
+                               ColorResources.EDIT_CHART_BUTTON_HOVER_COLOR_END, null, null);
+               button.setOutlineColors(ColorResources.EDIT_CHART_BUTTON_OUTLINE_NORMAL_COLOR,
+                               ColorResources.EDIT_CHART_BUTTON_OUTLINE_PUSH_COLOR,
+                               ColorResources.EDIT_CHART_BUTTON_OUTLINE_HOVER_COLOR, null);
+               button.setOutlineInColors(ColorResources.EDIT_CHART_BUTTON_INLINE_NORMAL_COLOR,
+                               ColorResources.EDIT_CHART_BUTTON_INLINE_PUSH_COLOR,
+                               ColorResources.EDIT_CHART_BUTTON_INLINE_HOVER_COLOR, null);
+       }
+       
        private MouseListener itemZoomMouseListener = new MouseAdapter() {
+               @Override
                public void mouseUp(MouseEvent event) {
-                       // if (chartChangeSatus == true) {
                        Table table = chartTableViewer.getTable();
                        int selectItemIndex = table.getSelectionIndex();
-                       TableItem[] chartTableItems = chartTableViewer.getTable()
-                                       .getItems();
-                       if (chartTableItems[selectItemIndex].getText(3).equals(
-                                       strEnableChart)) {
-                               chartTableItems[selectItemIndex].setText(3, strDisableChart);
-                       } else if (chartTableItems[selectItemIndex].getText(3).equals(
-                                       strDisableChart)) {
-                               chartTableItems[selectItemIndex].setText(3, strEnableChart);
+                       TableItem[] chartTableItems = chartTableViewer.getTable().getItems();
+                       TableItemData itemData = (TableItemData)chartTableItems[selectItemIndex].getData();
+                       itemData.isEnabled = !itemData.isEnabled;               // toggle 
+                       chartTableViewer.getTable().redraw();
+               }
+       };
+       
+       private MouseTrackListener mouseTrackListener = new MouseTrackAdapter() {
+               @Override
+               public void mouseHover(MouseEvent e) {
+                       TableItem targetItem = chartTableViewer.getTable().getItem(new Point(e.x, e.y));
+                       
+                       TableItem[] items = chartTableViewer.getTable().getItems();
+                       for (int i = 0; i < items.length; i++) {
+                               if (items[i] == targetItem) {
+                                       ((TableItemData)items[i].getData()).isHovered = true;
+                               } else {
+                                       ((TableItemData)items[i].getData()).isHovered = false;
+                               }
+                       }
+                       chartTableViewer.getTable().redraw();
+               }
+               
+               @Override
+               public void mouseExit(MouseEvent e) {
+                       TableItem[] items = chartTableViewer.getTable().getItems();
+                       for (int i = 0; i < items.length; i++) {
+                               ((TableItemData)items[i].getData()).isHovered = false;
                        }
                        chartTableViewer.getTable().redraw();
-                       // }
-                       // chartChangeSatus = true;
                }
        };
+       
+       private class TableItemData {
+               int index;
+               int chartType;
+               Image titleImage;
+               String titleText;
+               boolean isEnabled = false;
+               boolean isHovered = false;
+               boolean isDrag = false;
+       }
 }
\ No newline at end of file