vuetify 3.7.4 & sass 1.83.0

fix extra margins around buttons
nkonev · Dec 14, 2024 · 84130ea · 84130ea
1 parent d606016
commit 84130ea
Show file tree

Hide file tree

Showing 29 changed files with 782 additions and 230 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -47,12 +47,12 @@
     "uuid": "^11.0.3",
     "vue": "3.5.13",
     "vue-router": "4.5.0",
-    "vuetify": "3.6.15"
+    "vuetify": "3.7.4"
   },
   "type": "module",
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
-    "sass": "1.77.7",
+    "sass": "1.83.0",
     "stylus": "^0.64.0",
     "vite": "^6.0.3",
     "vite-plugin-vuetify": "^2.0.4"

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -904,6 +904,21 @@ html {
   }
 }
 
+// to check those 2 bugs:
+// Open ChatEditModal of a chat with an avatar
+
+// reverts 3.7.4 https://github.com/vuetifyjs/vuetify/commit/42a12dd89da2e7e5ea5f6a3bc7611fb2e9f2563a#diff-0ca827fe1439dde86f60164ea243a0e4c495fa2e03606f4dd802703d1a0d30efR58
+.v-dialog--scrollable {
+  > .v-overlay__content {
+    max-height: calc(100% - 48px);
+  }
+}
+
+// reverts some changes from ~3.7.0 (from F12)
+.my-actions .v-btn ~ .v-btn:not(.v-btn-toggle .v-btn) {
+  margin-inline-start: .5rem;
+}
+
 </style>
 
 <style lang="stylus">

diff --git a/frontend/src/ChatEditModal.vue b/frontend/src/ChatEditModal.vue
@@ -121,7 +121,7 @@
                     ></v-progress-circular>
                 </v-card-text>
 
-                <v-card-actions class="d-flex flex-wrap flex-row">
+                <v-card-actions class="my-actions d-flex flex-wrap flex-row">
                     <template v-if="!isNew && !loading">
                       <v-btn v-if="hasAva" variant="outlined" @click="removeAvatarFromChat()">
                         <template v-slot:prepend>

diff --git a/frontend/src/ChatParticipantsModal.vue b/frontend/src/ChatParticipantsModal.vue
@@ -118,7 +118,7 @@
                     ></v-progress-circular>
                 </v-card-text>
 
-                <v-card-actions class="d-flex flex-wrap flex-row">
+                <v-card-actions class="my-actions d-flex flex-wrap flex-row">
 
                     <!-- Pagination is shuddering / flickering on the second page without this wrapper -->
                     <v-row no-gutters class="ma-0 pa-0 d-flex flex-row">

diff --git a/frontend/src/ChooseColorModal.vue b/frontend/src/ChooseColorModal.vue
@@ -15,7 +15,7 @@
                         width="100%"
                     ></v-color-picker>
                 </v-card-text>
-                <v-card-actions>
+                <v-card-actions class="my-actions">
                     <v-spacer/>
                     <v-btn color="primary" variant="flat" @click="accept()">{{ $vuetify.locale.t('$vuetify.ok') }}</v-btn>
                     <v-btn @click="clear()" variant="outlined">{{ $vuetify.locale.t('$vuetify.clear') }}</v-btn>

diff --git a/frontend/src/ChooseSmileyModal.vue b/frontend/src/ChooseSmileyModal.vue
@@ -31,7 +31,7 @@
 
                 </v-card-text>
 
-                <v-card-actions>
+                <v-card-actions class="my-actions">
                     <v-spacer/>
                     <v-btn v-if="showSettings" color="primary" variant="flat" @click="closeSettings()" :title="$vuetify.locale.t('$vuetify.ok')">{{$vuetify.locale.t('$vuetify.ok')}}</v-btn>
                     <v-btn v-if="!showSettings" variant="outlined" @click="openSettings()" min-width="0" :title="$vuetify.locale.t('$vuetify.settings')"><v-icon size="large">mdi-cog</v-icon></v-btn>

diff --git a/frontend/src/FileItemAttachToMessage.vue b/frontend/src/FileItemAttachToMessage.vue
@@ -26,7 +26,7 @@
                     ></v-progress-circular>
                 </v-card-text>
 
-                <v-card-actions class="d-flex flex-wrap flex-row">
+                <v-card-actions class="my-actions d-flex flex-wrap flex-row">
 
                   <!-- Pagination is shuddering / flickering on the second page without this wrapper -->
                   <v-row no-gutters class="ma-0 pa-0 d-flex flex-row">

diff --git a/frontend/src/FileListModal.vue b/frontend/src/FileListModal.vue
@@ -85,7 +85,7 @@
 
                 </v-card-text>
 
-                <v-card-actions class="d-flex flex-wrap flex-row">
+                <v-card-actions class="my-actions d-flex flex-wrap flex-row">
                   <!-- Pagination is shuddering / flickering on the second page without this wrapper -->
                   <v-row no-gutters class="ma-0 pa-0 d-flex flex-row">
                     <v-col class="ma-0 pa-0 flex-grow-1 flex-shrink-0" :class="isMobile() ? 'mb-2' : ''">

diff --git a/frontend/src/FileTextEditModal.vue b/frontend/src/FileTextEditModal.vue
@@ -13,7 +13,7 @@
                     <v-textarea v-else v-model="editableText" auto-grow autofocus filled dense hide-spin-buttons hide-details/>
                 </v-card-text>
 
-                <v-card-actions>
+                <v-card-actions class="my-actions">
                     <v-spacer/>
                     <v-btn variant="flat" color="primary" @click="saveFile()">{{$vuetify.locale.t('$vuetify.ok')}}</v-btn>
                     <v-btn variant="flat" color="red" @click="closeModal()">{{$vuetify.locale.t('$vuetify.close')}}</v-btn>

diff --git a/frontend/src/FileUploadModal.vue b/frontend/src/FileUploadModal.vue
@@ -42,7 +42,7 @@
                     </template>
                 </v-card-text>
 
-                <v-card-actions>
+                <v-card-actions class="my-actions">
                     <v-spacer></v-spacer>
                     <v-checkbox
                         v-if="shouldShowSendMessageAfterMediaInsert()"

diff --git a/frontend/src/MessageEditLinkModal.vue b/frontend/src/MessageEditLinkModal.vue
@@ -6,7 +6,7 @@
                     <v-text-field density="comfortable" autofocus hide-details variant="underlined" v-model="link" :placeholder="placeHolder()" @keyup.native.enter="accept()"/>
                 </v-card-text>
 
-                <v-card-actions>
+                <v-card-actions class="my-actions">
                     <v-spacer/>
                     <v-btn color="primary" @click="accept()" variant="flat">{{ $vuetify.locale.t('$vuetify.ok') }}</v-btn>
                     <v-btn v-if="shouldShowClearButton()" variant="outlined" @click="clear()">{{ $vuetify.locale.t('$vuetify.clear') }}</v-btn>

diff --git a/frontend/src/MessageEditMediaModal.vue b/frontend/src/MessageEditMediaModal.vue
@@ -60,7 +60,7 @@
                     ></v-progress-circular>
                 </v-card-text>
 
-                <v-card-actions class="d-flex flex-wrap flex-row">
+                <v-card-actions class="my-actions d-flex flex-wrap flex-row">
 
                   <!-- Pagination is shuddering / flickering on the second page without this wrapper -->
                   <v-row no-gutters class="ma-0 pa-0 d-flex flex-row">

diff --git a/frontend/src/MessageReadUsersModal.vue b/frontend/src/MessageReadUsersModal.vue
@@ -30,7 +30,7 @@
                     ></v-progress-circular>
                 </v-card-text>
 
-                <v-card-actions class="d-flex flex-wrap flex-row">
+                <v-card-actions class="my-actions d-flex flex-wrap flex-row">
 
                 <!-- Pagination is shuddering / flickering on the second page without this wrapper -->
                   <v-row no-gutters class="ma-0 pa-0 d-flex flex-row">

diff --git a/frontend/src/MessageResendToModal.vue b/frontend/src/MessageResendToModal.vue
@@ -45,7 +45,7 @@
                         color="primary"
                     ></v-progress-circular>
                 </v-card-text>
-                <v-card-actions class="d-flex flex-wrap flex-row">
+                <v-card-actions class="my-actions d-flex flex-wrap flex-row">
                     <v-spacer></v-spacer>
                     <v-btn
                         variant="elevated"

diff --git a/frontend/src/NotificationsModal.vue b/frontend/src/NotificationsModal.vue
@@ -40,7 +40,7 @@
 
                 </v-card-text>
 
-                <v-card-actions class="d-flex flex-wrap flex-row">
+                <v-card-actions class="my-actions d-flex flex-wrap flex-row">
 
                   <!-- Pagination is shuddering / flickering on the second page without this wrapper -->
                   <v-row no-gutters class="ma-0 pa-0 d-flex flex-row">

diff --git a/frontend/src/PermissionsWarningModal.vue b/frontend/src/PermissionsWarningModal.vue
@@ -4,7 +4,7 @@
             <v-card :title="$vuetify.locale.t('$vuetify.audio_autoplay_permissions_title')">
                 <v-card-text>{{ $vuetify.locale.t('$vuetify.audio_autoplay_permissions_text') }}</v-card-text>
 
-                <v-card-actions class="pa-4">
+                <v-card-actions class="my-actions pa-4">
                     <v-btn class="mr-4" @click="show=false">
                         {{ $vuetify.locale.t('$vuetify.close') }}
                     </v-btn>

diff --git a/frontend/src/PinnedMessagesModal.vue b/frontend/src/PinnedMessagesModal.vue
@@ -56,7 +56,7 @@
 
                 </v-card-text>
 
-                <v-card-actions class="d-flex flex-wrap flex-row">
+                <v-card-actions class="my-actions d-flex flex-wrap flex-row">
 
                     <!-- Pagination is shuddering / flickering on the second page without this wrapper -->
                     <v-row no-gutters class="ma-0 pa-0 d-flex flex-row">

diff --git a/frontend/src/PublishedMessagesModal.vue b/frontend/src/PublishedMessagesModal.vue
@@ -59,7 +59,7 @@
 
                 </v-card-text>
 
-                <v-card-actions class="d-flex flex-wrap flex-row">
+                <v-card-actions class="my-actions d-flex flex-wrap flex-row">
 
                     <!-- Pagination is shuddering / flickering on the second page without this wrapper -->
                     <v-row no-gutters class="ma-0 pa-0 d-flex flex-row">

diff --git a/frontend/src/RecordingModal.vue b/frontend/src/RecordingModal.vue
@@ -39,7 +39,7 @@
                   </v-window-item>
               </v-window>
           </v-card-text>
-          <v-card-actions>
+          <v-card-actions class="my-actions">
               <v-spacer/>
               <v-btn variant="outlined" @click="openSettings()" :disabled="isRecording" min-width="0" :title="$vuetify.locale.t('$vuetify.settings')"><v-icon size="large">mdi-cog</v-icon></v-btn>
               <v-btn v-if="mediaDevicesGotten" :color="blob ? null : 'primary'" :variant="blob ? 'outlined' : 'flat'" @click="onClick()"><v-icon size="x-large">{{isRecording ? 'mdi-stop' : 'mdi-record'}}</v-icon> {{ isRecording ? $vuetify.locale.t('$vuetify.stop_recording') : $vuetify.locale.t('$vuetify.start_recording') }} </v-btn>

diff --git a/frontend/src/SetPasswordModal.vue b/frontend/src/SetPasswordModal.vue
@@ -24,7 +24,7 @@
 
                 </v-card-text>
 
-                <v-card-actions class="d-flex flex-wrap flex-row">
+                <v-card-actions class="my-actions d-flex flex-wrap flex-row">
                     <v-spacer></v-spacer>
                     <v-btn color="primary" variant="flat" @click="onSet()">{{ $vuetify.locale.t('$vuetify.ok') }}</v-btn>
                     <v-btn variant="outlined" @click="onClose()">{{ $vuetify.locale.t('$vuetify.close') }}</v-btn>

diff --git a/frontend/src/SettingsModal.vue b/frontend/src/SettingsModal.vue
@@ -51,7 +51,7 @@
         </v-window>
       </v-card-text>
 
-      <v-card-actions>
+      <v-card-actions class="my-actions">
         <template v-if="tab == 'user_profile_self'">
           <v-btn v-if="hasAva" variant="outlined" @click="removeAvatarFromProfile()">
             <template v-slot:prepend>

diff --git a/frontend/src/SimpleModal.vue b/frontend/src/SimpleModal.vue
@@ -12,7 +12,7 @@
 
                 <v-card-text v-html="text"></v-card-text>
 
-                <v-card-actions class="d-flex flex-wrap flex-row">
+                <v-card-actions class="my-actions d-flex flex-wrap flex-row">
                     <v-spacer></v-spacer>
                     <v-btn color="red" variant="flat" @click="actionFunction(this)">{{buttonName}}</v-btn>
                     <v-btn variant="outlined" @click="lightClose()">{{ $vuetify.locale.t('$vuetify.close') }}</v-btn>

diff --git a/frontend/src/UserProfile.vue b/frontend/src/UserProfile.vue
@@ -55,7 +55,6 @@
     <v-card-actions class="mx-2 nominheight">
         <v-chip v-for="(role, index) in viewableUser?.additionalData?.roles"
           density="comfortable"
-          class="mr-1"
           text-color="white"
         >
           <template v-slot:default>
@@ -77,7 +76,7 @@
               <font-awesome-icon :icon="{ prefix: 'fas', iconName: 'database'}"></font-awesome-icon>
           </template>
           <template v-slot:default>
-              <span class="ml-1">
+              <span>
                 Ldap
               </span>
           </template>
@@ -89,7 +88,7 @@
         v-if="viewableUser.oauth2Identifiers.vkontakteId"
         min-width="80px"
         label
-        class="c-btn-vk py-5 mr-2"
+        class="c-btn-vk py-5"
         text-color="white"
       >
         <font-awesome-icon :icon="{ prefix: 'fab', iconName: 'vk'}" :size="'2x'"></font-awesome-icon>
@@ -99,7 +98,7 @@
         v-if="viewableUser.oauth2Identifiers.facebookId"
         min-width="80px"
         label
-        class="c-btn-fb py-5 mr-2"
+        class="c-btn-fb py-5"
         text-color="white"
       >
         <font-awesome-icon :icon="{ prefix: 'fab', iconName: 'facebook'}" :size="'2x'"></font-awesome-icon>
@@ -109,7 +108,7 @@
         v-if="viewableUser.oauth2Identifiers.googleId"
         min-width="80px"
         label
-        class="c-btn-google py-5 mr-2"
+        class="c-btn-google py-5"
         text-color="white"
       >
         <font-awesome-icon :icon="{ prefix: 'fab', iconName: 'google'}" :size="'2x'"></font-awesome-icon>
@@ -119,7 +118,7 @@
         v-if="viewableUser.oauth2Identifiers.keycloakId"
         min-width="80px"
         label
-        class="c-btn-keycloak py-5 mr-2"
+        class="c-btn-keycloak py-5"
         text-color="white"
       >
         <font-awesome-icon :icon="{ prefix: 'fa', iconName: 'key'}" :size="'2x'"></font-awesome-icon>

diff --git a/frontend/src/UserRoleModal.vue b/frontend/src/UserRoleModal.vue
@@ -20,7 +20,7 @@
                     ></v-progress-circular>
                 </v-card-text>
 
-                <v-card-actions>
+                <v-card-actions class="my-actions">
                     <v-spacer></v-spacer>
                     <v-btn variant="flat" v-if="chosenRoles.length" color="primary" @click="changeRole()">{{ $vuetify.locale.t('$vuetify.ok') }}</v-btn>
                     <v-btn variant="flat" color="red" @click="closeModal()">{{ $vuetify.locale.t('$vuetify.close') }}</v-btn>

diff --git a/frontend/src/UserSelfProfileModalContent.vue b/frontend/src/UserSelfProfileModalContent.vue
@@ -88,7 +88,7 @@
                 v-if="shouldShowBoundVkontakte()"
                 min-width="80px"
                 label
-                class="c-btn-vk py-5 mr-2"
+                class="c-btn-vk py-5"
                 text-color="white"
                 :closable="shouldShowUnbindVkontakte()"
                 close-icon="mdi-delete"
@@ -101,7 +101,7 @@
                 v-if="shouldShowBoundFacebook()"
                 min-width="80px"
                 label
-                class="c-btn-fb py-5 mr-2"
+                class="c-btn-fb py-5"
                 text-color="white"
                 :closable="shouldShowUnbindFacebook()"
                 close-icon="mdi-delete"
@@ -114,7 +114,7 @@
                 v-if="shouldShowBoundGoogle()"
                 min-width="80px"
                 label
-                class="c-btn-google py-5 mr-2"
+                class="c-btn-google py-5"
                 text-color="white"
                 :closable="shouldShowUnbindGoogle()"
                 close-icon="mdi-delete"
@@ -127,7 +127,7 @@
                 v-if="shouldShowBoundKeycloak()"
                 min-width="80px"
                 label
-                class="c-btn-keycloak py-5 mr-2"
+                class="c-btn-keycloak py-5"
                 text-color="white"
                 :closable="shouldShowUnbindKeycloak()"
                 close-icon="mdi-delete"
@@ -146,7 +146,7 @@
                 @click="submitOauthVkontakte"
                 min-width="80px"
                 label
-                class="c-btn-vk py-5 mr-2"
+                class="c-btn-vk py-5"
                 text-color="white"
             >
                 <font-awesome-icon :icon="{ prefix: 'fab', iconName: 'vk'}" :size="'2x'"></font-awesome-icon>
@@ -157,7 +157,7 @@
                 @click="submitOauthFacebook"
                 min-width="80px"
                 label
-                class="c-btn-fb py-5 mr-2"
+                class="c-btn-fb py-5"
                 text-color="white"
             >
                 <font-awesome-icon :icon="{ prefix: 'fab', iconName: 'facebook'}" :size="'2x'"></font-awesome-icon>
@@ -168,7 +168,7 @@
                 @click="submitOauthGoogle"
                 min-width="80px"
                 label
-                class="c-btn-google py-5 mr-2"
+                class="c-btn-google py-5"
                 text-color="white"
             >
                 <font-awesome-icon :icon="{ prefix: 'fab', iconName: 'google'}" :size="'2x'"></font-awesome-icon>
@@ -179,7 +179,7 @@
                 @click="submitOauthKeycloak"
                 min-width="80px"
                 label
-                class="c-btn-keycloak py-5 mr-2"
+                class="c-btn-keycloak py-5"
                 text-color="white"
             >
                 <font-awesome-icon :icon="{ prefix: 'fa', iconName: 'key'}" :size="'2x'"></font-awesome-icon>

diff --git a/frontend/src/VideoAddNewSourceModal.vue b/frontend/src/VideoAddNewSourceModal.vue
@@ -23,7 +23,7 @@
                     ></v-select>
                 </v-card-text>
 
-                <v-card-actions>
+                <v-card-actions class="my-actions">
                     <v-spacer></v-spacer>
                     <v-btn variant="flat" v-if="videoDevice != null || audioDevice != null" color="primary" @click="onChosen()">{{ $vuetify.locale.t('$vuetify.ok') }}</v-btn>
                     <v-btn variant="flat" color="red" @click="closeModal()">{{ $vuetify.locale.t('$vuetify.close') }}</v-btn>