Support UI

customize.dist/src/less2/include/support.less

@@ -3,6 +3,18 @@
     @ticket-bg: #F7F7F7;
     @msg-bg: #eee;
     @fromme-bg: #ddd;
+    .cp-support-form-container {
+        [type="text"] {
+            width: @sidebar_button-width;
+            margin-bottom: 10px;
+        }
+        textarea {
+            width: 2*@sidebar_button-width;
+            max-width: 90%;
+            padding: 10px 15px;
+            height: 300px;
+        }
+    }
     .cp-support-container {
         .cp-support-list-ticket {
             display: flex;
@@ -61,6 +73,10 @@
                     display: none !important;
                 }
             }
+            button {
+                margin-left: 2px;
+                margin-right: 5px;
+            }
         }
     }
 }

www/support/inner.js

@@ -218,7 +218,7 @@ define([
             displayed: displayed,
             sfCommon: common,
             $container: APP.$toolbar,
-            pageTitle: Messages.supportPage || 'Support',
+            pageTitle: Messages.supportPage,
             metadataMgr: common.getMetadataMgr(),
         };
         APP.toolbar = Toolbar.create(configTb);
@@ -239,7 +239,7 @@ define([
         createToolbar();
         metadataMgr = common.getMetadataMgr();
         privateData = metadataMgr.getPrivateData();
-        common.setTabTitle(Messages.supportPage || 'Support');
+        common.setTabTitle(Messages.supportPage);
 
         APP.origin = privateData.origin;
         APP.readOnly = privateData.readOnly;

www/support/ui.js

@@ -2,17 +2,11 @@ define([
     'jquery',
     '/api/config',
     '/common/hyperscript.js',
+    '/common/common-interface.js',
     '/common/common-hash.js',
     '/common/common-util.js',
     '/customize/messages.js',
-], function ($, ApiConfig, h, Hash, Util, Messages) {
-
-    var showError = function (form, msg) {
-        if (!msg) {
-            return void $(form).find('.cp-support-form-error').text('').hide();
-        }
-        $(form).find('.cp-support-form-error').text(msg).show();
-    };
+], function ($, ApiConfig, h, UI, Hash, Util, Messages) {
 
     var send = function (common, id, type, data, dest) {
         var supportKey = ApiConfig.supportMailbox;
@@ -49,14 +43,12 @@ define([
 
         var title = $title.val();
         if (!title) {
-            return void showError(form, Messages.support_formTitleError);
+            return void UI.alert(Messages.support_formTitleError);
         }
         var content = $content.val();
         if (!content) {
-            return void showError(form, Messages.support_formContentError);
+            return void UI.alert(form, Messages.support_formContentError);
         }
-        // Success: hide any error
-        showError(form, null);
         $content.val('');
         $title.val('');
 
@@ -80,14 +72,15 @@ define([
 
         var content = [
             h('hr'),
-            h('div.cp-support-form-error'),
-            h('label' + (title ? '.cp-hidden' : ''), Messages.support_formTitle),
             h('input.cp-support-form-title' + (title ? '.cp-hidden' : ''), {
+                placeholder: Messages.support_formTitle,
+                type: 'text',
                 value: title || ''
             }),
             cb ? undefined : h('br'),
-            h('label', Messages.support_formMessage),
-            h('textarea.cp-support-form-msg', { }),
+            h('textarea.cp-support-form-msg', {
+                placeholder: Messages.support_formMessage
+            }),
             h('hr'),
             button,
             cancel
@@ -104,7 +97,7 @@ define([
     };
 
     var makeTicket = function ($div, common, content, onHide) {
-        var ticketTitle = content.id + ' - ' + content.title;
+        var ticketTitle = content.title + ' (#' + content.id + ')';
         var answer = h('button.btn.btn-primary.cp-support-answer', Messages.support_answer);
         var close = h('button.btn.btn-danger.cp-support-close', Messages.support_close);
         var hide = h('button.btn.btn-danger.cp-support-hide', Messages.support_remove);