Tidy up admin user interface

assets/javascripts/admin/templates/modal/admin-plugins-chat-edit-rule.hbs

@@ -1,49 +1,84 @@
-{{#d-modal-body title="chat_integration.edit_rule_modal.title"}}
+{{#d-modal-body id="chat_integration_edit_rule_modal" title="chat_integration.edit_rule_modal.title"}}
-  	
+  <div>
-  
+    <form>
-	<form class="form-horizontal">
+      <table>
-		<div>
-		{{i18n 'chat_integration.edit_rule_modal.provider'}}: {{i18n (concat 'chat_integration.provider.' model.provider '.title')}}
-		</div>
-		<div>
-      <label for="category">{{i18n "chat_integration.edit_rule_modal.category"}}</label>
-      {{category-chooser
-      			name="category"
-            value=model.category_id
-            rootNoneLabel="slack.choose.all_categories"
-            rootNone=true
-            allowUncategorized="true"
-            }} 
-    </div>
 
-    {{#if siteSettings.tagging_enabled}}
+      	<tr class="input">
-	    <div>
+          <td class="label"><label for='provider'>{{i18n "chat_integration.edit_rule_modal.provider"}}</label></td>
-	    	<label for="tags">{{i18n "chat_integration.edit_rule_modal.tags"}}</label>
+          <td>
-	      {{tag-chooser name="tags" tags=model.tags placeholderKey="chat_integration.edit_rule_modal.placeholders.tags"}}
+          	{{i18n (concat 'chat_integration.provider.' model.provider '.title')}}
-	    </div>
+          </td>
-    {{/if}}
+        </tr>
+        <tr class="instructions">
+          <td></td>
+          <td></td>
+        </tr>
 
-    <div>
+        <tr class="input">
-    	<label for="channel">{{i18n "chat_integration.edit_rule_modal.channel"}}</label>
+          <td class="label"><label for='channel'>{{i18n "chat_integration.edit_rule_modal.channel"}}</label></td>
-			{{text-field 
+          <td>
-						name="channel"
+          	{{text-field 
-						value=model.channel 
+							name="channel"
-						placeholderKey="chat_integration.edit_rule_modal.placeholders.channel" 
+							value=model.channel 
-						class="channel"}}
+							autofocus="autofocus"
-		</div>
+              id="channel-field"}}
+          </td>
+        </tr>
+        <tr class="instructions">
+          <td></td>
+          <td><label>{{i18n (concat 'chat_integration.provider.' model.provider '.channel_instructions')}}</label></td>
+        </tr>
 
-		<div>
+        <tr class="input">
-    	<label for="filter">{{i18n "chat_integration.edit_rule_modal.filter"}}</label>
+          <td class="label"><label for='filter'>{{i18n "chat_integration.edit_rule_modal.filter"}}</label></td>
-			{{combo-box name="filter" content=model.available_filters value=model.filter}}
+          <td>
-		</div>
+            {{combo-box name="filter" content=model.available_filters value=model.filter}}
+          </td>
+        </tr>
+        <tr class="instructions">
+          <td></td>
+          <td><label>{{i18n 'chat_integration.edit_rule_modal.instructions.filter'}}</label></td>
+        </tr>
 
-	</form>
+        <tr class="input">
+          <td class="label"><label for='category'>{{i18n "chat_integration.edit_rule_modal.category"}}</label></td>
+          <td>
+          	{{category-chooser
+	      			name="category"
+	            value=model.category_id
+	            rootNoneLabel="chat_integration.all_categories"
+	            rootNone=true
+              overrideWidths=false
+	            }} 
+          </td>
+        </tr>
+        <tr class="instructions">
+          <td></td>
+          <td><label>{{i18n 'chat_integration.edit_rule_modal.instructions.category'}}</label></td>
+        </tr>
 
+        {{#if siteSettings.tagging_enabled}}
+          <tr class="input">
+            <td class="label"><label for='tags'>{{i18n "chat_integration.edit_rule_modal.tags"}}</label></td>
+            <td>
+              {{tag-chooser placeholderKey="chat_integration.all_tags" name="tags" tags=model.tags}}
+            </td>
+          </tr>
+          <tr class="instructions">
+            <td></td>
+            <td><label>{{i18n 'chat_integration.edit_rule_modal.instructions.tags'}}</label></td>
+          </tr>
+		    {{/if}}
+
+      </table>
+
+    </form>
+  </div>	
 {{/d-modal-body}}
 
 <div class="modal-footer">
-	{{d-button class='btn-primary' action="save" title="chat_integration.edit_rule_modal.save" label="chat_integration.edit_rule_modal.save"}}
+	{{d-button class='btn-primary btn-large' action="save" title="chat_integration.edit_rule_modal.save" label="chat_integration.edit_rule_modal.save"}}
 
-	{{d-button action="cancel" title="chat_integration.edit_rule_modal.cancel" label="chat_integration.edit_rule_modal.cancel"}}
+	{{d-button class="btn-large" action="cancel" title="chat_integration.edit_rule_modal.cancel" label="chat_integration.edit_rule_modal.cancel"}}
 
 </div>

assets/javascripts/discourse/templates/admin/plugins-chat-provider.hbs

@@ -18,7 +18,7 @@
 
     {{#each model.rules as |rule|}}
 
-      <tr class="">
+      <tr>
 				<td>{{rule.channel}}</td>
         <td>{{rule.filterName}}</td>
 
@@ -32,7 +32,13 @@
 
 
         {{#if siteSettings.tagging_enabled}}
-          <td>{{rule.tags}}</td>
+          <td>
+            {{#if rule.tags}}
+              {{rule.tags}}
+            {{else}}
+              {{i18n "chat_integration.all_tags"}}
+            {{/if}}
+          </td>
         {{/if}}
 
         
@@ -45,7 +51,7 @@
 
   </table>
   
-  <div>
+  <div class="table-footer">
     <div class="pull-right">
        {{d-button action="create" actionParam=model.provider icon="plus" title="chat_integration.create_rule" label="chat_integration.create_rule"}}
     </div>

assets/stylesheets/chat-integration-admin.scss

@@ -0,0 +1,56 @@
+#admin-plugin-chat{
+
+	table{
+		td:last-child{
+			white-space:nowrap;
+		}
+		td:not(:last-child){
+			width: 25%;
+		}
+	}
+
+	div.table-footer{
+		margin-top: 10px;
+	}
+
+}
+
+#chat_integration_edit_rule_modal{
+		table{
+			width:100%;
+
+			tr.input td{
+				padding-top: 10px;
+
+				&.label{
+					width: 100px;
+					label{
+						margin-bottom: 0px;
+						font-weight: bold;
+					}
+				}
+			}
+
+			tr.instructions label{
+				color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
+			}
+
+
+		}
+
+		input{
+			width: 200px;
+			margin-bottom: 0px;
+			box-shadow: none;
+		}
+		.tag-chooser{
+			ul.select2-choices{
+				border: none;
+				background:none; 
+			}
+			margin-bottom: 0px;
+			margin-top: 0px;
+		}
+
+
+	}

config/locales/client.en.yml

@@ -4,19 +4,20 @@ en:
       menu_title: "Chat Integrations"
       settings: "Settings"
       no_providers: "You need to enable some providers in the plugin settings"
-      all_categories: "All Categories"
+      all_categories: "(all categories)"
+      all_tags: "(all tags)"
       create_rule: "Create Rule"
+      filter:
+        mute: 'Mute'
+        follow: 'First post only'
+        watch: 'All posts and replies'
       rule_table:
         channel: "Channel"
         filter: "Filter"
         category: "Category"
         tags: "Tags"
-        edit: "Edit"
+        edit_rule: "Edit"
-        delete: "Delete"
+        delete_rule: "Delete"
-      filter:
-        watch: "Watch"
-        follow: "Follow"
-        mute: "Mute"
       edit_rule_modal:
         title: "Edit Rule"
         save: "Save Rule"
@@ -26,11 +27,23 @@ en:
         tags: "Tags"
         channel: "Channel"
         filter: "Filter"
-        placeholders:
+        instructions:
-          tags: "Choose tags"
+          filter: "Notification level. Mute overrides other matching rules."
-          channel: "#channel, @user or Channel ID"
+          category: "This rule will only apply to topics in the specified category."
+          tags: "If specified, this rule will only apply to topics which have at least one of these tags."
+      
       provider:
+
+        #######################################
+        ########### SLACK STRINGS #############
+        #######################################
+        slack:
+          title: "Slack"
+          channel_instructions: "e.g. #channel, @username."
+      
+        #######################################
+        ########## TELEGRAM STRINGS ###########
+        #######################################
         telegram:
           title: "Telegram"
-        slack:
+          channel_instructions: "Enter a chat_id. You will need to add the bot to the chat first."
-          title: "Slack"

lib/discourse_chat/rule.rb

@@ -1,4 +1,3 @@
-  
   # Similar to an ActiveRecord class, but uses PluginStore for storage instead. Adapted from discourse-data-explorer
   # Using this means we can use a standard serializer for sending JSON to the client, and also have convenient save/update/delete methods
   # Since this is now being used in two plugins, maybe it should be built into core somehow

plugin.rb

@@ -5,6 +5,8 @@
 
 enabled_site_setting :chat_integration_enabled
 
+register_asset "stylesheets/chat-integration-admin.scss"
+
 # Site setting validators must be loaded before initialize
 require_relative "lib/validators/chat_integration_slack_enabled_setting_validator"
 
@@ -82,6 +84,9 @@ after_initialize do
         raise Discourse::NotFound
       end
 
+      filter_order = ["watch", "follow", "mute"]
+      rules = rules.sort_by{ |r| [r.channel, filter_order.index(r.filter), r.category_id] } 
+
       render_serialized rules, DiscourseChat::RuleSerializer, root: 'rules'
     end