Move locale picker to profile dropdown

Signed-off-by: nscuro <nscuro@protonmail.com>

Author: nscuro

src/containers/DefaultHeader.vue

@@ -12,22 +12,19 @@
     <SidebarToggler class="d-md-down-none" display="lg" :defaultOpen="true" />
     <b-navbar-nav class="ml-auto">
       <DefaultHeaderProfileDropdown />
-      <LocalePicker />
     </b-navbar-nav>
   </AppHeader>
 </template>
 <script>
 import { Header as AppHeader, SidebarToggler, AsideToggler } from '@coreui/vue';
 import DefaultHeaderProfileDropdown from './DefaultHeaderProfileDropdown';
-import LocalePicker from '@/views/components/LocalePicker.vue';
 
 export default {
   name: 'DefaultHeader',
   components: {
     AsideToggler,
     AppHeader,
     DefaultHeaderProfileDropdown,
-    LocalePicker,
     SidebarToggler,
   },
 };

src/containers/DefaultHeaderProfileDropdown.vue

@@ -17,6 +17,10 @@
         {{ $t('message.change_password') }}</b-dropdown-item
       >
       <b-dropdown-divider v-if="canUpdateProfile() || canChangePassword()" />
+      <b-dropdown-form id="locale-picker-form" class="pl-2 pr-2">
+        <LocalePicker />
+      </b-dropdown-form>
+      <b-dropdown-divider />
       <b-dropdown-item @click="logout"
         ><i class="fa fa-sign-out text-primary" />
         {{ $t('message.logout') }}</b-dropdown-item
@@ -30,12 +34,14 @@ import { HeaderDropdown as AppHeaderDropdown } from '@coreui/vue';
 import EventBus from '../shared/eventbus';
 import { decodeToken, getToken } from '../shared/permissions';
 import globalVarsMixin from '../mixins/globalVarsMixin';
+import LocalePicker from '@/views/components/LocalePicker.vue';
 
 export default {
   name: 'DefaultHeaderProfileDropdown',
   mixins: [globalVarsMixin],
   components: {
     AppHeaderDropdown,
+    LocalePicker,
   },
   data: () => {
     return {
@@ -71,4 +77,9 @@ export default {
 .app-header .navbar-nav .dropdown-menu-right {
   right: inherit;
 }
+
+/* Remove default padding inherited from b-dropdown-form. */
+#locale-picker-form {
+  padding: 0;
+}
 </style>

src/views/components/LocalePicker.vue

@@ -1,7 +1,7 @@
 <template>
-  <b-input-group class="mr-3">
+  <b-input-group>
     <b-input-group-prepend :title="this.$t('message.language')" is-text>
-      <span class="fa fa-language"> </span>
+      <span class="fa fa-language text-primary"></span>
     </b-input-group-prepend>
     <b-form-select
       class="bg-widget"
@@ -14,7 +14,8 @@
         :value="locale"
         :title="$t(`language.${locale}`)"
       >
-        {{ localeToFlag(locale) }}
+        <span class="mr-2">{{ localeToFlag(locale) }}</span>
+        {{ locale.toUpperCase() }}
       </b-form-select-option>
     </b-form-select>
   </b-input-group>