From 79e7ed7eb305c28493b193e471def6c118c2fdeb Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Sun, 11 Dec 2022 19:49:40 -0600
Subject: [PATCH] Style fixes for Vue 3 spacing rules

---
 frontend/scss/_common.scss                    |  1 +
 .../scss/azuracast/overrides/_buttons.scss    | 21 +++++++++++++++++++
 frontend/vue/components/Admin/AuditLog.vue    |  2 +-
 .../components/Common/DateRangeDropdown.vue   | 12 ++++-------
 frontend/vue/components/Common/FlowUpload.vue |  2 +-
 frontend/vue/components/Dashboard.vue         |  4 ++--
 .../Stations/Media/MediaToolbar.vue           |  8 +++----
 .../components/Stations/Reports/Listeners.vue |  5 +++--
 .../components/Stations/Reports/Overview.vue  |  3 ++-
 9 files changed, 39 insertions(+), 19 deletions(-)
 create mode 100644 frontend/scss/azuracast/overrides/_buttons.scss

diff --git a/frontend/scss/_common.scss b/frontend/scss/_common.scss
index d8e28ef13..e26d31a22 100644
--- a/frontend/scss/_common.scss
+++ b/frontend/scss/_common.scss
@@ -95,6 +95,7 @@ $enable-print-styles: true !default;
 
 // Overrides for the Daemonite Material theme
 @import 'azuracast/overrides/body';
+@import 'azuracast/overrides/buttons';
 @import 'azuracast/overrides/card';
 @import 'azuracast/overrides/footer';
 @import 'azuracast/overrides/forms';
diff --git a/frontend/scss/azuracast/overrides/_buttons.scss b/frontend/scss/azuracast/overrides/_buttons.scss
new file mode 100644
index 000000000..e9996012f
--- /dev/null
+++ b/frontend/scss/azuracast/overrides/_buttons.scss
@@ -0,0 +1,21 @@
+.btn > .material-icons {
+  margin-right: calc($btn-padding-x / 2);
+}
+
+.btn-lg > .material-icons {
+  margin-right: calc($btn-padding-x-lg / 2);
+}
+
+.btn-sm > .material-icons {
+  margin-right: calc($btn-padding-x-sm / 2);
+}
+
+.buttons {
+  & > * {
+    margin-right: .5rem;
+  }
+
+  & > *:last-child {
+    margin-right: 0;
+  }
+}
diff --git a/frontend/vue/components/Admin/AuditLog.vue b/frontend/vue/components/Admin/AuditLog.vue
index 1338554c8..aac230cb9 100644
--- a/frontend/vue/components/Admin/AuditLog.vue
+++ b/frontend/vue/components/Admin/AuditLog.vue
@@ -6,7 +6,7 @@
                     <translate key="lang_title">Audit Log</translate>
                 </h2>
                 <div class="flex-shrink">
-                    <date-range-dropdown v-model="dateRange" @update="relist"></date-range-dropdown>
+                    <date-range-dropdown v-model:date-range="dateRange" @update="relist"></date-range-dropdown>
                 </div>
             </div>
         </div>
diff --git a/frontend/vue/components/Common/DateRangeDropdown.vue b/frontend/vue/components/Common/DateRangeDropdown.vue
index bd185754b..1467cf7bb 100644
--- a/frontend/vue/components/Common/DateRangeDropdown.vue
+++ b/frontend/vue/components/Common/DateRangeDropdown.vue
@@ -1,7 +1,7 @@
 <template>
     <date-range-picker
         v-bind="$props" ref="picker" controlContainerClass="" opens="left" show-dropdowns
-        :time-picker-increment="1" :ranges="ranges" @update="onUpdate">
+        :time-picker-increment="1" :ranges="ranges" :date-range="modelValue" @update="onUpdate">
         <template #input="datePicker">
             <a class="btn btn-bg dropdown-toggle" id="reportrange" href="#" @click.prevent="">
                 <icon icon="date_range"></icon>
@@ -27,11 +27,7 @@ import {DateTime} from 'luxon';
 export default {
     name: 'DateRangeDropdown',
     components: {DateRangePicker, Icon},
-    emits: ['update', 'input'],
-    model: {
-        prop: 'dateRange',
-        event: 'update',
-    },
+    emits: ['update:modelValue', 'update'],
     props: {
         tz: {
             type: String,
@@ -53,7 +49,7 @@ export default {
             type: Boolean,
             default: false,
         },
-        dateRange: { // for v-model
+        modelValue: {
             type: [Object],
             default: null,
             required: true
@@ -64,7 +60,6 @@ export default {
         },
     },
     computed: {
-
         ranges() {
             let ranges = {};
 
@@ -113,6 +108,7 @@ export default {
     },
     methods: {
         onUpdate(newValue) {
+            this.$emit('update:modelValue', newValue);
             this.$emit('update', newValue);
         }
     }
diff --git a/frontend/vue/components/Common/FlowUpload.vue b/frontend/vue/components/Common/FlowUpload.vue
index 946a3a31d..84c631828 100644
--- a/frontend/vue/components/Common/FlowUpload.vue
+++ b/frontend/vue/components/Common/FlowUpload.vue
@@ -17,8 +17,8 @@
         <div class="file-drop-target" ref="file_drop_target">
             <translate key="lang_upload_target">Drag file(s) here to upload or</translate>
             <button ref="file_browse_target" class="file-upload btn btn-primary text-center ml-1" type="button">
-                <translate key="lang_select_file">Select File</translate>
                 <icon icon="cloud_upload"></icon>
+                <translate key="lang_select_file">Select File</translate>
             </button>
             <small class="file-name"></small>
             <input type="file" :accept="validMimeTypesList" :multiple="allowMultiple"
diff --git a/frontend/vue/components/Dashboard.vue b/frontend/vue/components/Dashboard.vue
index babe75866..5669ad02a 100644
--- a/frontend/vue/components/Dashboard.vue
+++ b/frontend/vue/components/Dashboard.vue
@@ -10,12 +10,12 @@
                     <h3 class="card-subtitle">{{ user.email }}</h3>
                 </div>
 
-                <div class="flex-md-shrink-0 mt-3 mt-md-0">
+                <div class="flex-md-shrink-0 mt-3 mt-md-0 buttons">
                     <a class="btn btn-bg" role="button" :href="profileUrl">
                         <icon icon="account_circle"></icon>
                         <translate key="dashboard_btn_my_account">My Account</translate>
                     </a>
-                    <a v-if="showAdmin" class="btn btn-bg ml-2" role="button" :href="adminUrl">
+                    <a v-if="showAdmin" class="btn btn-bg" role="button" :href="adminUrl">
                         <icon icon="settings"></icon>
                         <translate key="dashboard_btn_administration">Administration</translate>
                     </a>
diff --git a/frontend/vue/components/Stations/Media/MediaToolbar.vue b/frontend/vue/components/Stations/Media/MediaToolbar.vue
index 9be0ddc19..de0ed556f 100644
--- a/frontend/vue/components/Stations/Media/MediaToolbar.vue
+++ b/frontend/vue/components/Stations/Media/MediaToolbar.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="row pt-4" id="app-toolbar">
-        <div class="col-md-8">
+        <div class="col-md-8 buttons">
             <div class="btn-group dropdown allow-focus">
                 <b-dropdown size="sm" variant="primary" ref="setPlaylistsDropdown" v-b-tooltip.hover
-                            class="mr-2" :title="langPlaylistDropdown">
+                            :title="langPlaylistDropdown">
                     <template #button-content>
                         <icon icon="clear_all"></icon>
                         <translate key="lang_playlists_title">Playlists</translate>
@@ -41,11 +41,11 @@
                     </b-dropdown-form>
                 </b-dropdown>
             </div>
-            <b-button size="sm" variant="primary" class="mr-2" v-b-modal.move_file>
+            <b-button size="sm" variant="primary" v-b-modal.move_file>
                 <icon icon="open_with"></icon>
                 <translate key="lang_btn_move">Move</translate>
             </b-button>
-            <b-dropdown size="sm" variant="default" class="mr-2">
+            <b-dropdown size="sm" variant="default">
                 <template #button-content>
                     <icon icon="more_horiz"></icon>
                     {{ langMore }}
diff --git a/frontend/vue/components/Stations/Reports/Listeners.vue b/frontend/vue/components/Stations/Reports/Listeners.vue
index 736ad1b70..718df7730 100644
--- a/frontend/vue/components/Stations/Reports/Listeners.vue
+++ b/frontend/vue/components/Stations/Reports/Listeners.vue
@@ -9,14 +9,15 @@
                                 <translate key="lang_header">Listeners</translate>
                             </h2>
                         </div>
-                        <div class="flex-shrink">
+                        <div class="flex-shrink buttons">
                             <a class="btn btn-bg" id="btn-export" :href="exportUrl" target="_blank">
                                 <icon icon="file_download"></icon>
                                 <translate key="lang_download_csv_button">Download CSV</translate>
                             </a>
 
                             <date-range-dropdown v-if="!isLive" time-picker :min-date="minDate" :max-date="maxDate"
-                                                 :tz="stationTimeZone" v-model="dateRange" @update="updateListeners">
+                                                 :tz="stationTimeZone" v-model="dateRange"
+                                                 @update="updateListeners">
                             </date-range-dropdown>
                         </div>
                     </div>
diff --git a/frontend/vue/components/Stations/Reports/Overview.vue b/frontend/vue/components/Stations/Reports/Overview.vue
index 07c1132d9..83c74584d 100644
--- a/frontend/vue/components/Stations/Reports/Overview.vue
+++ b/frontend/vue/components/Stations/Reports/Overview.vue
@@ -6,7 +6,8 @@
                     <translate key="hdr">Station Statistics</translate>
                 </h2>
                 <div class="flex-shrink">
-                    <date-range-dropdown time-picker v-model="dateRange" :tz="stationTimeZone"></date-range-dropdown>
+                    <date-range-dropdown time-picker v-model="dateRange"
+                                         :tz="stationTimeZone"></date-range-dropdown>
                 </div>
             </div>
         </div>