Shout: Make the editAction form a lot prettier

diff --git a/shout/templates/dialplan/edit.inc b/shout/templates/dialplan/edit.inc
index 58c6d90..e38c045 100644 (file)
--- a/shout/templates/dialplan/edit.inc
+++ b/shout/templates/dialplan/edit.inc
@@ -2,8 +2,10 @@
 </table>
 
 <div id="digitpad">
-  <div id="editAction">
-      <div onClick="saveAction('x');">SAVE</div>
+  <div id="editActionOverlay">
+      <img id="digitGraphic" alt="Current Digit">
+      <div id="selectAction"></div>
+      <div id="editAction"></div>
   </div>
   <div class="digit" id="digit_1" onClick="editAction('1');"><span class="digitLabel">1</span></div>
   <div class="digit" id="digit_2" onClick="editAction('2');"><span class="digitLabel">2</span></div>
@@ -17,9 +19,9 @@
   <div class="digit" id="digit_8" onClick="editAction('8');"><span class="digitLabel">8</span></div>
   <div class="digit" id="digit_9" onClick="editAction('9');"><span class="digitLabel">9</span></div>
   <br style="clear:both;">
-  <div class="digit" id="digit_*" onClick="editAction('*');"><span class="digitLabel">*</span></div>
+  <div class="digit" id="digit_*" onClick="editAction('star');"><span class="digitLabel">*</span></div>
   <div class="digit" id="digit_0" onClick="editAction('0');"><span class="digitLabel">0</span></div>
-  <div class="digit" id="digit_#" onClick="editAction('#');"><span class="digitLabel">#</span></div>
+  <div class="digit" id="digit_#" onClick="editAction('octothorpe');"><span class="digitLabel">#</span></div>
   <br style="clear:both;">
   <div id="defaultAction" onclick="editAction('defaultAction');"><span class="digitLabel">Default Action</span></div>
 </div>
@@ -36,11 +38,18 @@ function editAction(digit)
 {
     if ($('selectActionForm') == null) {
         curDigit = digit;
+        $('digitGraphic').src = '<?php echo $registry->getImageDir('shout'); ?>/digit-'+digit+'.png';
+
         // Draw the selectActionForm
-        $('editAction').show();
-        while ((e = $('editAction').childNodes[0]) != null) {
-            $('editAction').removeChild(e);
+        $('editActionOverlay').show();
+        while ((e = $('selectAction').childNodes[0]) != null) {
+            $('selectAction').removeChild(e);
         }
+        var p = document.createElement('p');
+        p.id = 'actionPrompt';
+        var text = document.createTextNode('<?php echo _("Select Action:"); ?>');
+        p.appendChild(text);
+        $('selectAction').appendChild(p);
         var form = document.createElement('form');
         form.id = 'selectActionForm';
         form.setAttribute('onChange', 'editAction('+digit+')');
@@ -54,10 +63,7 @@ function editAction(digit)
             select.appendChild(option);
         });
         form.appendChild(select);
-        $('editAction').appendChild(form);
-        var div = document.createElement('div');
-        div.id = 'editActionFormContainer';
-        $('editAction').appendChild(div);
+        $('selectAction').appendChild(form);
     } else {
         var action = null;
         // Draw the options for this action
@@ -68,7 +74,7 @@ function editAction(digit)
         });
         var params = $H({'action': action});
         var actionForm;
-        new Ajax.Updater('editActionFormContainer', ajax_url + 'getActionForm',
+        new Ajax.Updater('editAction', ajax_url + 'getActionForm',
         {
             method: 'post',
             parameters: params
@@ -90,7 +96,7 @@ function saveAction(digit)
             while ((e = $('editAction').childNodes[0]) != null) {
                 $('editAction').removeChild(e);
             }
-            $('editAction').hide();
+            $('editActionOverlay').hide();
         }
     });
 }
@@ -171,7 +177,7 @@ function getMetaRow(name, value)
     return row;
 }
 
-$('editAction').hide();
+$('editActionOverlay').hide();
 new Ajax.Request(ajax_url + 'getMenuInfo',
 {
     method: 'post',

diff --git a/shout/themes/graphics/digit-1.png b/shout/themes/graphics/digit-1.png
new file mode 100644 (file)
index 0000000..db39956
Binary files /dev/null and b/shout/themes/graphics/digit-1.png differ

diff --git a/shout/themes/graphics/digit-2.png b/shout/themes/graphics/digit-2.png
new file mode 100644 (file)
index 0000000..530ff3d
Binary files /dev/null and b/shout/themes/graphics/digit-2.png differ

diff --git a/shout/themes/graphics/digit-3.png b/shout/themes/graphics/digit-3.png
new file mode 100644 (file)
index 0000000..3b0eded
Binary files /dev/null and b/shout/themes/graphics/digit-3.png differ

diff --git a/shout/themes/graphics/digit-4.png b/shout/themes/graphics/digit-4.png
new file mode 100644 (file)
index 0000000..4dbbc2a
Binary files /dev/null and b/shout/themes/graphics/digit-4.png differ

diff --git a/shout/themes/graphics/digit-5.png b/shout/themes/graphics/digit-5.png
new file mode 100644 (file)
index 0000000..c038293
Binary files /dev/null and b/shout/themes/graphics/digit-5.png differ

diff --git a/shout/themes/graphics/digit-6.png b/shout/themes/graphics/digit-6.png
new file mode 100644 (file)
index 0000000..576b25a
Binary files /dev/null and b/shout/themes/graphics/digit-6.png differ

diff --git a/shout/themes/graphics/digit-7.png b/shout/themes/graphics/digit-7.png
new file mode 100644 (file)
index 0000000..71a1492
Binary files /dev/null and b/shout/themes/graphics/digit-7.png differ

diff --git a/shout/themes/graphics/digit-8.png b/shout/themes/graphics/digit-8.png
new file mode 100644 (file)
index 0000000..82c8e23
Binary files /dev/null and b/shout/themes/graphics/digit-8.png differ

diff --git a/shout/themes/graphics/digit-9.png b/shout/themes/graphics/digit-9.png
new file mode 100644 (file)
index 0000000..cbbfd3d
Binary files /dev/null and b/shout/themes/graphics/digit-9.png differ

diff --git a/shout/themes/graphics/digit-octothorpe.png b/shout/themes/graphics/digit-octothorpe.png
new file mode 100644 (file)
index 0000000..2dceffa
Binary files /dev/null and b/shout/themes/graphics/digit-octothorpe.png differ

diff --git a/shout/themes/graphics/digit-star.png b/shout/themes/graphics/digit-star.png
new file mode 100644 (file)
index 0000000..582d439
Binary files /dev/null and b/shout/themes/graphics/digit-star.png differ

diff --git a/shout/themes/graphics/transparency.png b/shout/themes/graphics/transparency.png
new file mode 100644 (file)
index 0000000..a7a693f
Binary files /dev/null and b/shout/themes/graphics/transparency.png differ

diff --git a/shout/themes/screen.css b/shout/themes/screen.css
index 9ceef34..9355d74 100644 (file)
--- a/shout/themes/screen.css
+++ b/shout/themes/screen.css
@@ -83,7 +83,7 @@ ul {
 
 #digitpad {
     width: 300px;
-    height: 400px;
+    height: 456px;
     margin-left: auto;
     margin-right: auto;
     position: relative;
@@ -105,7 +105,7 @@ ul {
 }
 
 #defaultAction {
-    width: 288px;
+    width: 284px;
     height: 38px;
     border-top: 4px solid #aaa;
     border-left: 4px solid #aaa;
@@ -128,13 +128,26 @@ ul {
     color: #666;
 }
 
-#editAction {
+#editActionOverlay {
     width: 290px;
-    height: 440px;
-    margin: 5px;
+    height: 444px;
+    padding: 5px;
     position: absolute;
     top: 0px;
     left: 0px;
-    background: #0f0;
-    /*display: none;*/
+    background-image: url('graphics/transparency.png');
+}
+
+#digitGraphic {
+    float: left;
+    margin: 0px 5px 5px 5px;
+}
+
+#actionPrompt {
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+#editAction {
+    margin: 5px;
 }
\ No newline at end of file