Improved flag prefs display - no need to show HTML color codes to users

diff --git a/imp/js/flagprefs.js b/imp/js/flagprefs.js
index ad93bb0..8f467e2 100644 (file)
--- a/imp/js/flagprefs.js
+++ b/imp/js/flagprefs.js
@@ -29,18 +29,21 @@ var ImpFlagPrefs = {
             return;
         }
 
-        var elt = e.element(), elt2, id;
+        var elt = e.element(), elt2;
 
         while (Object.isElement(elt)) {
             if (elt.hasClassName('flagcolorpicker')) {
                 elt2 = elt.previous('INPUT');
-                id = elt2.readAttribute('id');
                 new ColorPicker({
                     color: $F(elt2),
                     draggable: true,
                     offsetParent: elt,
                     resizable: true,
-                    update: [[ id, 'value' ], [ id, 'background' ]]
+                    update: [
+                        [ elt2, 'value' ],
+                        [ elt2, 'background' ],
+                        [ elt.previous('DIV.flagUser'), 'background' ]
+                    ]
                 });
                 e.stop();
                 return;

diff --git a/imp/lib/Prefs/Ui.php b/imp/lib/Prefs/Ui.php
index d06c173..cf97683 100644 (file)
--- a/imp/lib/Prefs/Ui.php
+++ b/imp/lib/Prefs/Ui.php
@@ -875,7 +875,6 @@ class IMP_Prefs_Ui
 
             if ($val['t'] == 'imapp') {
                 $tmp['label'] = $label;
-                $tmp['icon'] = $bgstyle;
                 $tmp['imapp'] = true;
                 $tmp['label_name'] = 'label_' . $hash;
                 if ($userflags_locked) {

diff --git a/imp/templates/prefs/flags.html b/imp/templates/prefs/flags.html
index 409f0d7..1352992 100644 (file)
--- a/imp/templates/prefs/flags.html
+++ b/imp/templates/prefs/flags.html
@@ -23,17 +23,14 @@
 </else:flags.imapp></if:flags.imapp>
    </td>
    <td class="flagicon">
-<if:flags.imapp>
-    <div class="msgflags flagUser" style="<tag:flags.icon />"></div>
-<else:flags.imapp>
+<if:flags.imapp><else:flags.imapp>
     <tag:flags.icon />
 </else:flags.imapp></if:flags.imapp>
    </td>
    <td>
-<if:flags.locked>
-    <input size="7" disabled="disabled" style="<tag:flags.colorstyle />" value="<tag:flags.color />" />
-<else:flags.locked>
-    <input size="7" style="<tag:flags.colorstyle />" id="<tag:flags.colorid />" name="<tag:flags.colorid />" value="<tag:flags.color />" />
+<if:flags.locked><else:flags.locked>
+    <input type="hidden" id="<tag:flags.colorid />" name="<tag:flags.colorid />" value="<tag:flags.color />" />
+    <div class="msgflags flagUser" style="<tag:flags.colorstyle />"></div>
     <a class="flagcolorpicker" href="#"><tag:picker_img /></a>
 <if:flags.flag_del>
     <a class="flagdelete" href="#"><span class="deleteImg"></span></a>

diff --git a/imp/themes/screen.css b/imp/themes/screen.css
index 1760a9f..8040113 100644 (file)
--- a/imp/themes/screen.css
+++ b/imp/themes/screen.css
@@ -384,6 +384,12 @@ table.accountsmanagement thead td, table.flagmanagement thead td {
     font-weight: bold;
     text-decoration: underline;
 }
+
+table.flagmanagement div.flagUser {
+    border: 1px solid gray;
+    margin-right: 2px;
+}
+
 table.accountsmanagement td.required, .accountsNotSecure {
     color: red;
 }