(js) Improve alarms dialog

Fixes #3909
Alinto · Nov 25, 2016 · dc7cb67 · dc7cb67
1 parent a76f8dc
commit dc7cb67
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 35 deletions.
diff --git a/NEWS b/NEWS
@@ -9,6 +9,7 @@ Enhancements
 
 Bug fixes
  - [web] restore attributes when rewriting base64-encoded img tags (#3814)
+ - [web] improve alarms dialog (#3909)
  - [eas] fixed EAS delete operation
 
 3.2.2 (2016-11-23)

diff --git a/UI/WebServerResources/js/Common/Alarm.service.js b/UI/WebServerResources/js/Common/Alarm.service.js
@@ -65,38 +65,43 @@
         template: [
           '<md-toast>',
           '  <div class="md-toast-content">',
-          '    <md-input-container>',
-          '      <label style="color: white;">{{ summary }}</label>',
-          '      <md-select ng-model="reminder">',
-          '       <md-option value=5>',
-                    l('5 minutes'),
-          '       </md-option>',
-          '       <md-option value=10>',
-                    l('10 minutes'),
-          '       </md-option>',
-          '       <md-option value=15>',
-                    l('15 minutes'),
-          '       </md-option>',
-          '       <md-option value=30>',
-                    l('30 minutes'),
-          '       </md-option>',
-          '       <md-option value=45>',
-                    l('45 minutes'),
-          '       </md-option>',
-          '       <md-option value=60>',
-                    l('1 hour'),
-          '       </md-option>',
-          '       <md-option value=1440>',
-                    l('1 day'),
-          '       </md-option>',
-          '     </md-select>',
-          '    </md-input-container>',
-          '    <md-button ng-click="cancel()">',
-                 l('Cancel'),
-          '    </md-button>',
-          '    <md-button ng-click="ok()">',
-                 l('Ok'),
-          '    </md-button>',
+          '    <div layout="column" layout="start end">',
+          '      <p class="sg-padded--top">{{ summary }}</p>',
+          '      <div layout="row" layout-align="start center">',
+          '        <md-input-container>',
+          '          <label style="color: white">{{ "Snooze for " | loc }}</label>',
+          '          <md-select ng-model="reminder">',
+          '           <md-option value="5">',
+                        l('5 minutes'),
+          '           </md-option>',
+          '           <md-option value="10">',
+                        l('10 minutes'),
+          '           </md-option>',
+          '           <md-option value="15">',
+                        l('15 minutes'),
+          '           </md-option>',
+          '           <md-option value="30">',
+                        l('30 minutes'),
+          '           </md-option>',
+          '           <md-option value="45">',
+                        l('45 minutes'),
+          '           </md-option>',
+          '           <md-option value="60">',
+                        l('1 hour'),
+          '           </md-option>',
+          '           <md-option value="1440">',
+                        l('1 day'),
+          '           </md-option>',
+          '         </md-select>',
+          '        </md-input-container>',
+          '        <md-button ng-click="cancel()">',
+                     l('Cancel'),
+          '        </md-button>',
+          '        <md-button ng-click="ok()">',
+                     l('Ok'),
+          '        </md-button>',
+          '      </div>',
+          '    </div>',
           '  </div>',
           '</md-toast>'
         ].join(''),
@@ -109,9 +114,9 @@
       /**
        * @ngInject
        */
-      AlarmController.$inject = ['scope', '$sanitize', '$mdToast', 'url'];
-      function AlarmController(scope, $sanitize, $mdToast, url) {
-        scope.summary = $sanitize(data.summary);
+      AlarmController.$inject = ['scope', '$mdToast', 'url'];
+      function AlarmController(scope, $mdToast, url) {
+        scope.summary = data.summary;
         scope.reminder = '10';
         scope.cancel = function() {
           $mdToast.hide();