ui tweaks

terminus-core/src/theme.scss

@@ -51,6 +51,7 @@ $input-disabled-bg:              #333;
 $input-color:                    $body-color;
 $input-color-placeholder:        #333;
 $input-border-color:             #344;
+$input-border-width: 0;
 //$input-box-shadow:               inset 0 1px 1px rgba($black,.075);
 $input-border-radius:            0;
 $custom-select-border-radius: 0;
@@ -346,6 +347,15 @@ ngb-tabset .tab-content {
     }
 }
 
+.list-group.list-group-flush .list-group-item:not(.list-group-item-action) {
+    background: transparent;
+    border-color: rgba(0, 0, 0, 0.2);
+
+    &:not(:last-child) {
+        border-bottom: none;
+    }
+}
+
 select.form-control {
   -webkit-appearance: none;
   background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");

terminus-plugin-manager/src/components/pluginsSettingsTab.component.pug

@@ -8,41 +8,44 @@ button.btn.btn-outline-info.btn-sm.pull-right((click)='openPluginsFolder()')
     
 h3.mb-1 Installed
 
-.mb-3.d-flex.w-100.align-items-center(*ngFor='let plugin of pluginManager.installedPlugins|orderBy:"name"')
-    button.btn.btn-outline-danger.active.mr-2(
-        *ngIf='config.store.pluginBlacklist.includes(plugin.name)',
-        (click)='enablePlugin(plugin)'
-    )
-        i.fa.fa-fw.fa-pause
-    button.btn.btn-outline-secondary.mr-2(
-        *ngIf='!config.store.pluginBlacklist.includes(plugin.name)',
-        (click)='disablePlugin(plugin)'
-    )
-        i.fa.fa-fw.fa-check
+.list-group.list-group-flush.mt-2
+    .list-group-item.d-flex.align-items-center(*ngFor='let plugin of pluginManager.installedPlugins|orderBy:"name"')
+        .mr-auto.d-flex.flex-column
+            div
+                strong {{plugin.name}}
+                small.text-muted.ml-1(*ngIf='!plugin.isBuiltin') {{plugin.version}} / {{plugin.author}}
+                small.text-warning.ml-1(*ngIf='config.store.pluginBlacklist.includes(plugin.name)') Disabled
+            a.text-muted.mb-0((click)='showPluginInfo(plugin)')
+                small {{plugin.description}}
 
-    .mr-auto.d-flex.flex-column
-        div
-            strong {{plugin.name}}
-            small.text-muted.ml-1 {{plugin.version}} / {{plugin.author}}
-        a.text-muted.mb-0((click)='showPluginInfo(plugin)')
-            small {{plugin.description}}
+        button.btn.btn-primary.ml-2(
+            *ngIf='npmInstalled && knownUpgrades[plugin.name]',
+            (click)='upgradePlugin(plugin)',
+            [disabled]='busy[plugin.name] != undefined'
+        )
+            i.fa.fa-fw.fa-arrow-up(*ngIf='busy[plugin.name] != BusyState.Installing')
+            i.fa.fa-fw.fa-circle-o-notch.fa-spin(*ngIf='busy[plugin.name] == BusyState.Installing')
+            span Upgrade ({{knownUpgrades[plugin.name].version}})
 
-    button.btn.btn-primary.ml-2(
-        *ngIf='npmInstalled && knownUpgrades[plugin.name]',
-        (click)='upgradePlugin(plugin)',
-        [disabled]='busy[plugin.name] != undefined'
-    )
-        i.fa.fa-fw.fa-arrow-up(*ngIf='busy[plugin.name] != BusyState.Installing')
-        i.fa.fa-fw.fa-circle-o-notch.fa-spin(*ngIf='busy[plugin.name] == BusyState.Installing')
-        span Upgrade ({{knownUpgrades[plugin.name].version}})
-        
-    button.btn.btn-outline-danger.ml-2(
-        (click)='uninstallPlugin(plugin)', 
-        *ngIf='!plugin.isBuiltin && npmInstalled',
-        [disabled]='busy[plugin.name] != undefined'
-    )
-        i.fa.fa-fw.fa-trash-o(*ngIf='busy[plugin.name] != BusyState.Uninstalling')
-        i.fa.fa-fw.fa-circle-o-notch.fa-spin(*ngIf='busy[plugin.name] == BusyState.Uninstalling')
+        button.btn.btn-primary.ml-2(
+            *ngIf='config.store.pluginBlacklist.includes(plugin.name)',
+            (click)='enablePlugin(plugin)'
+        )
+            i.fa.fa-fw.fa-play
+                
+        button.btn.btn-secondary.ml-2(
+            *ngIf='!config.store.pluginBlacklist.includes(plugin.name)',
+            (click)='disablePlugin(plugin)'
+        )
+            i.fa.fa-fw.fa-pause
+            
+        button.btn.btn-danger.ml-2(
+            (click)='uninstallPlugin(plugin)', 
+            *ngIf='!plugin.isBuiltin && npmInstalled',
+            [disabled]='busy[plugin.name] != undefined'
+        )
+            i.fa.fa-fw.fa-trash-o(*ngIf='busy[plugin.name] != BusyState.Uninstalling')
+            i.fa.fa-fw.fa-circle-o-notch.fa-spin(*ngIf='busy[plugin.name] == BusyState.Uninstalling')
 
 .text-center.mt-5(*ngIf='npmMissing')
     h4 npm not installed
@@ -71,10 +74,10 @@ div(*ngIf='npmInstalled')
         )
 
 
-    .mb-4(*ngIf='availablePlugins$')
+    .list-group.list-group-flush.mb-4(*ngIf='availablePlugins$')
         ng-container(*ngFor='let plugin of (availablePlugins$|async|orderBy:"name")')
-            .d-flex.w-100.align-items-center.mb-3(*ngIf='!isAlreadyInstalled(plugin)')
-                button.btn.btn-primary.mr-2(
+            .list-group-item.d-flex.align-items-center(*ngIf='!isAlreadyInstalled(plugin)')
+                button.btn.btn-primary.mr-3(
                     (click)='installPlugin(plugin)',
                     [disabled]='busy[plugin.name] != undefined'
                 )

terminus-ssh/src/components/sshSettingsTab.component.pug

@@ -1,8 +1,10 @@
 h3 Connections
 
-.list-group.mt-3.mb-3
+.list-group.list-group-flush.mt-3.mb-3
     ng-container(*ngFor='let group of childGroups') 
-        .list-group-item.list-group-item-action.d-flex.align-items-center((click)='groupCollapsed[group.name] = !groupCollapsed[group.name]')
+        .list-group-item.list-group-item-action.d-flex.align-items-center(
+            (click)='groupCollapsed[group.name] = !groupCollapsed[group.name]'
+        )
             .fa.fa-fw.fa-chevron-right(*ngIf='groupCollapsed[group.name]')
             .fa.fa-fw.fa-chevron-down(*ngIf='!groupCollapsed[group.name]')
             span.ml-3.mr-auto {{group.name || "Ungrouped"}}
@@ -11,15 +13,16 @@ h3 Connections
             button.btn.btn-outline-danger.ml-1((click)='deleteGroup(group)')
                 i.fa.fa-trash-o
         ng-container(*ngIf='!groupCollapsed[group.name]')
-            .list-group-item.pl-5.d-flex.align-items-center(*ngFor='let connection of group.connections') 
+            .list-group-item.list-group-item-action.pl-5.d-flex.align-items-center(
+                *ngFor='let connection of group.connections',
+                (click)='editConnection(connection)'
+            )
                 .mr-auto
                     div {{connection.name}}
                     .text-muted {{connection.host}}
-                button.btn.btn-outline-info.ml-2((click)='editConnection(connection)')
-                    i.fa.fa-pencil
-                button.btn.btn-outline-danger.ml-1((click)='deleteConnection(connection)')
+                button.btn.btn-outline-danger.ml-1((click)='$event.stopPropagation(); deleteConnection(connection)')
                     i.fa.fa-trash-o
                     
-button.btn.btn-outline-primary((click)='createConnection()')
-    div.fa.fa-fw.fa-globe
+button.btn.btn-primary((click)='createConnection()')
+    i.fa.fa-fw.fa-plus
     span.ml-2 Add connection

terminus-terminal/src/components/shellSettingsTab.component.pug

@@ -62,6 +62,8 @@ h3.mt-3 Saved Profiles
             i.fa.fa-trash-o
                     
 div(ngbDropdown, placement='top-left')
-    button.btn.btn-outline-primary(ngbDropdownToggle) New profile        
+    button.btn.btn-primary(ngbDropdownToggle) 
+        i.fa.fa-fw.fa-plus
+        | New profile        
     div(ngbDropdownMenu)
         button.dropdown-item(*ngFor='let shell of shells', (click)='newProfile(shell)') {{shell.name}}