Setting specific styles for inline arrays

Adds the ability for settings in an array to have no header text and appear full width

client/src/styles/partials/generic/forms/arrays.scss

@@ -30,8 +30,13 @@
                     margin-bottom: 0;
                 }
 
-                + .bd-settingsarray-item-controls {
-                    flex-basis: 0%;
+                .bd-settings-category:only-child > div > .bd-form-item.bd-form-item-noheader:only-child {
+                    .bd-form-textinput,
+                    .bd-form-numberinput {
+                        + .bd-form-divider {
+                            display: none;
+                        }
+                    }
                 }
             }
 

client/src/styles/partials/generic/forms/dropdowns.scss

@@ -1,5 +1,10 @@
 .bd-dropdown {
     position: relative;
+    width: 100%;
+
+    h3 + & {
+        width: 180px;
+    }
 
     .bd-dropdown-current {
         color: #f6f6f7;
@@ -10,7 +15,6 @@
         cursor: default;
         outline: none;
         transition: border .15s ease;
-        width: 180px;
         box-sizing: border-box;
         display: flex;
 

client/src/styles/partials/generic/forms/radios.scss

@@ -45,6 +45,8 @@
     .bd-radio-text {
         flex: 1 1 auto;
         color: white;
+        word-wrap: break-word;
+        width: 1px;
     }
 
     &:not(:last-child) {

client/src/styles/partials/generic/forms/text.scss

@@ -1,5 +1,13 @@
 .bd-form-textinput,
 .bd-form-numberinput {
+    h3 {
+        + .bd-textinput-wrapper,
+        + .bd-textinput-wrapper input[type="text"],
+        + .bd-textinput-wrapper input[type="number"] {
+            width: 180px;
+        }
+    }
+
     input[type="text"],
     input[type="number"] {
         background: transparent;
@@ -10,7 +18,7 @@
         line-height: 24px;
         font-size: 100%;
         font-weight: 500;
-        width: 180px;
+        width: 100%;
 
         &:focus {
             color: #fff;
@@ -19,6 +27,10 @@
     }
 }
 
+.bd-textinput-wrapper {
+    width: 100%;
+}
+
 .bd-form-textarea {
     .bd-form-textarea-wrap {
         margin-top: 15px;

client/src/ui/components/bd/setting/Array.vue

@@ -27,7 +27,7 @@
                 </div>
 
                 <div class="bd-settingsarray-item-controls">
-                    <span class="bd-settingsarray-open" @click="() => showModal(item, index)"><MiOpenInNew v-if="setting.inline" /><MiSettings v-else /></span>
+                    <span class="bd-settingsarray-open" v-if="typeof setting.allow_external !== 'undefined' ? setting.allow_external || !setting.inline : true" @click="() => showModal(item, index)"><MiOpenInNew v-if="setting.inline" /><MiSettings v-else /></span>
                     <span class="bd-settingsarray-remove" :class="{'bd-disabled': setting.disabled || setting.min && items.length <= setting.min}" @click="() => removeItem(item)"><MiMinus /></span>
                 </div>
             </div>

client/src/ui/components/bd/setting/Dropdown.vue

@@ -11,7 +11,7 @@
 <template>
     <div class="bd-form-dropdown">
         <div class="bd-title">
-            <h3>{{setting.text}}</h3>
+            <h3 v-if="setting.text">{{setting.text}}</h3>
             <div class="bd-dropdown" :class="{'bd-active': active}">
                 <div class="bd-dropdown-current" @click="() => active = !active && !setting.disabled">
                     <span class="bd-dropdown-text">{{getOptionText(setting.value)}}</span>

client/src/ui/components/bd/setting/Number.vue

@@ -11,7 +11,7 @@
 <template>
     <div class="bd-form-numberinput">
         <div class="bd-title">
-            <h3>{{setting.text}}</h3>
+            <h3 v-if="setting.text">{{setting.text}}</h3>
             <div class="bd-number">
                 <input type="number" :value="setting.value" :min="setting.min" :max="setting.max" :step="setting.step" @keyup.stop @input="input"/>
                 <div class="bd-number-spinner bd-flex bd-flex-col">

client/src/ui/components/bd/setting/Setting.vue

@@ -9,7 +9,7 @@
 */
 
 <template>
-    <div class="bd-form-item" :class="{'bd-form-item-changed': changed, 'bd-disabled': disabled}">
+    <div class="bd-form-item" :class="{'bd-form-item-changed': changed, 'bd-disabled': disabled, 'bd-form-item-noheader': !setting.text}">
         <BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change"/>
         <DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" :change="change"/>
         <NumberSetting v-if="setting.type === 'number'" :setting="setting" :change="change"/>

client/src/ui/components/bd/setting/String.vue

@@ -11,7 +11,7 @@
 <template>
     <div class="bd-form-textinput">
         <div class="bd-title">
-            <h3>{{setting.text}}</h3>
+            <h3 v-if="setting.text">{{setting.text}}</h3>
             <div class="bd-textinput-wrapper">
                 <input type="text" :value="setting.value" @keyup.stop @input="input"/>
             </div>

tests/themes/Example/config.json

@@ -25,6 +25,7 @@
                     "type": "array",
                     "text": "Additional colours",
                     "inline": true,
+                    "allow_external": false,
                     "settings": [
                         {
                             "category": "default",