chore: move var menu on some controls

crowbartools · Dec 25, 2024 · 8ed76f0 · 8ed76f0
1 parent d24d9c9
commit 8ed76f0
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/src/backend/effects/builtin/celebration.js b/src/backend/effects/builtin/celebration.js
@@ -43,10 +43,15 @@ const celebration = {
     </eos-container>
 
     <eos-container header="Duration" pad-top="true">
-        <div class="input-group">
-            <span class="input-group-addon" id="celebration-length-effect-type">Seconds</span>
-            <input type="text" ng-model="effect.length" class="form-control" id="celebration-amount-setting" aria-describedby="celebration-length-effect-type" replace-variables="number">
-        </div>
+        <firebot-input
+            model="effect.length"
+            input-title="Seconds"
+            data-type="number"
+            use-text-area="false"
+            placeholder-text="Enter Seconds"
+            menu-position="under"
+            aria-describedby="celebration-length-effect-type" 
+        />
     </eos-container>
 
     <eos-overlay-instance effect="effect" pad-top="true"></eos-overlay-instance>

diff --git a/src/backend/effects/builtin/chat-feed-alert.js b/src/backend/effects/builtin/chat-feed-alert.js
@@ -16,19 +16,19 @@ const effect = {
         <p>Use this effect to send yourself alerts in Firebot's chat feed without using actual chat messages. This means the alerts are only visible to you.</p>
     </eos-container>
     <eos-container header="Alert Message" pad-top="true">
-        <textarea ng-model="effect.message" class="form-control" name="text" placeholder="Enter message" rows="4" cols="40" replace-variables></textarea>
+        <textarea ng-model="effect.message" class="form-control" name="text" placeholder="Enter message" rows="4" cols="40" replace-variables menu-position="under"></textarea>
     </eos-container>
 
     `,
     optionsController: () => {},
-    optionsValidator: effect => {
+    optionsValidator: (effect) => {
         const errors = [];
         if (effect.message == null || effect.message === "") {
             errors.push("Alert message can't be blank.");
         }
         return errors;
     },
-    onTriggerEvent: async event => {
+    onTriggerEvent: async (event) => {
 
         const { effect } = event;
 

diff --git a/src/backend/effects/builtin/chat.js b/src/backend/effects/builtin/chat.js
@@ -22,6 +22,7 @@ const effect = {
             placeholder-text="Enter message"
             rows="4"
             cols="40"
+            menu-position="under"
         />
         <div style="color: #fb7373;" ng-if="effect.message && effect.message.length > 500">Chat messages cannot be longer than 500 characters. This message will get automatically chunked into multiple messages if it is too long after all replace variables have been populated.</div>
         <div style="display: flex; flex-direction: row; width: 100%; height: 36px; margin: 10px 0 10px; align-items: center;">

diff --git a/src/backend/effects/builtin/twitch/announcement.ts b/src/backend/effects/builtin/twitch/announcement.ts
@@ -21,8 +21,8 @@ const model: EffectType<{
     optionsTemplate: `
         <eos-chatter-select effect="effect" title="Announce as"></eos-chatter-select>
 
-        <eos-container header="Message" pad-top="true">
-            <textarea ng-model="effect.message" class="form-control" name="text" placeholder="Enter message" rows="4" cols="40" replace-variables></textarea>
+        <eos-container header="Message" pad-top="true">    
+            <textarea ng-model="effect.message" class="form-control" name="text" placeholder="Enter message" rows="4" cols="40" replace-variables menu-position="under"></textarea>
             <div style="color: #fb7373;" ng-if="effect.message && effect.message.length > 500">Announcement messages cannot be longer than 500 characters. This message will get automatically chunked into multiple messages if it is too long after all replace variables have been populated.</div>
         </eos-container>