avatar dialog select avatar and share buttons

src/app.js

@@ -12364,6 +12364,18 @@ console.log(`isLinux: ${LINUX}`);
         });
     };
 
+    $app.methods.selectAvatar = function (id) {
+        API.selectAvatar({
+            avatarId: id
+        }).then((args) => {
+            this.$message({
+                message: 'Avatar changed',
+                type: 'success'
+            });
+            return args;
+        });
+    };
+
     $app.methods.selectAvatarWithConfirmation = function (id) {
         this.$confirm(`Continue? Select Avatar`, 'Confirm', {
             confirmButtonText: 'Confirm',
@@ -12406,6 +12418,9 @@ console.log(`isLinux: ${LINUX}`);
             case 'Refresh':
                 this.showAvatarDialog(D.id);
                 break;
+            case 'Share':
+                this.copyAvatarUrl(D.id);
+                break;
             case 'Rename':
                 this.promptRenameAvatar(D);
                 break;
@@ -12446,17 +12461,6 @@ console.log(`isLinux: ${LINUX}`);
                                     objectId: D.id
                                 });
                                 break;
-                            case 'Select Avatar':
-                                API.selectAvatar({
-                                    avatarId: D.id
-                                }).then((args) => {
-                                    this.$message({
-                                        message: 'Avatar changed',
-                                        type: 'success'
-                                    });
-                                    return args;
-                                });
-                                break;
                             case 'Select Fallback Avatar':
                                 API.selectFallbackAvatar({
                                     avatarId: D.id

src/localization/en/en.json

@@ -945,6 +945,7 @@
                 "favorite_tooltip": "Favorites",
                 "unfavorite_tooltip": "Remove from favorites",
                 "refresh": "Refresh",
+                "share": "Share",
                 "select": "Select Avatar",
                 "select_fallback": "Select Fallback Avatar",
                 "block": "Block Avatar",

src/mixins/dialogs/avatarDialog.pug

@@ -158,6 +158,17 @@ mixin avatarDialog
                                 circle
                                 @click='avatarDialogCommand("Add Favorite")'
                                 style='margin-left: 5px')
+                        el-tooltip(
+                            placement='top'
+                            :content='$t("dialog.avatar.actions.select")'
+                            :disabled='hideTooltips')
+                            el-button(
+                                type='default'
+                                icon='el-icon-check'
+                                circle
+                                :disabled='API.currentUser.currentAvatar === avatarDialog.id'
+                                @click='selectAvatar(avatarDialog.id)'
+                                style='margin-left: 5px')
                         el-dropdown(
                             trigger='click'
                             @command='avatarDialogCommand'
@@ -166,20 +177,18 @@ mixin avatarDialog
                             el-button(:type='avatarDialog.isBlocked ? "danger" : "default"' icon='el-icon-more' circle)
                             el-dropdown-menu(#default='dropdown')
                                 el-dropdown-item(icon='el-icon-refresh' command='Refresh') {{ $t('dialog.avatar.actions.refresh') }}
-                                el-dropdown-item(
+                                el-dropdown-item(icon='el-icon-share' command='Share') {{ $t('dialog.avatar.actions.share') }}
-                                    icon='el-icon-check'
-                                    :disabled='API.currentUser.currentAvatar === avatarDialog.id'
-                                    command='Select Avatar') {{ $t('dialog.avatar.actions.select') }}
-                                el-dropdown-item(
-                                    v-if='/quest/.test(avatarDialog.ref.tags)'
-                                    icon='el-icon-check'
-                                    command='Select Fallback Avatar') {{ $t('dialog.avatar.actions.select_fallback') }}
                                 el-dropdown-item(
                                     v-if='avatarDialog.isBlocked'
                                     icon='el-icon-circle-check'
                                     command='Unblock Avatar'
-                                    style='color: #f56c6c') {{ $t('dialog.avatar.actions.unblock') }}
+                                    style='color: #f56c6c'
-                                el-dropdown-item(v-else icon='el-icon-circle-close' command='Block Avatar') {{ $t('dialog.avatar.actions.block') }}
+                                    divided) {{ $t('dialog.avatar.actions.unblock') }}
+                                el-dropdown-item(v-else icon='el-icon-circle-close' command='Block Avatar' divided) {{ $t('dialog.avatar.actions.block') }}
+                                el-dropdown-item(
+                                    v-if='/quest/.test(avatarDialog.ref.tags)'
+                                    icon='el-icon-check'
+                                    command='Select Fallback Avatar') {{ $t('dialog.avatar.actions.select_fallback') }}
                                 el-dropdown-item(
                                     v-if='avatarDialog.ref.authorId !== API.currentUser.id'
                                     icon='el-icon-picture-outline'
@@ -203,18 +212,15 @@ mixin avatarDialog
                                         v-if='avatarDialog.hasImposter'
                                         icon='el-icon-refresh'
                                         command='Regenerate Imposter'
-                                        style='color: #f56c6c') {{ $t('dialog.avatar.actions.regenerate_impostor') }}
+                                        style='color: #f56c6c'
+                                        divided) {{ $t('dialog.avatar.actions.regenerate_impostor') }}
                                     el-dropdown-item(
                                         v-if='avatarDialog.hasImposter'
                                         icon='el-icon-delete'
                                         command='Delete Imposter'
                                         style='color: #f56c6c') {{ $t('dialog.avatar.actions.delete_impostor') }}
-                                    el-dropdown-item(v-else icon='el-icon-user' command='Create Imposter') {{ $t('dialog.avatar.actions.create_impostor') }}
+                                    el-dropdown-item(v-else icon='el-icon-user' command='Create Imposter' divided) {{ $t('dialog.avatar.actions.create_impostor') }}
-                                    el-dropdown-item(
+                                    el-dropdown-item(icon='el-icon-delete' command='Delete' style='color: #f56c6c') {{ $t('dialog.avatar.actions.delete') }}
-                                        icon='el-icon-delete'
-                                        command='Delete'
-                                        style='color: #f56c6c'
-                                        divided) {{ $t('dialog.avatar.actions.delete') }}
             el-tabs
                 el-tab-pane(:label='$t("dialog.avatar.info.header")')
                     .x-friend-list

src/mixins/tabs/friendsList.pug

@@ -1,6 +1,6 @@
 mixin friendsListTab
     .x-container(v-show='$refs.menu && $refs.menu.activeIndex === "friendsList"')
-        .options-container(style='margin-top: 0')
+        div(style='padding: 0px 10px 0px 10px')
             span.header {{ $t('view.friend_list.header') }}
             div(style='float: right; font-size: 13px')
                 div(v-if='friendsListBulkUnfriendMode' style='display: inline-block; margin-right: 10px')

src/theme.darkvanilla.scss

@@ -20,8 +20,8 @@
     --dv_sm-rounded: 0.45rem;
     --dv_background-modifier-selected: rgba(var(--dv_bright-rgb), 0.2);
     --dv_background-modifier-hover: rgba(var(--dv_bright-rgb), 0.3);
-    --font-primary: 'Encode Sans', 'Tofu', 'Helvetica Neue', Helvetica, Arial,
+    --font-primary:
-        sans-serif;
+        'Encode Sans', 'Tofu', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     --shadow: 0 0 15px 5px rgba(0, 0, 0, 0.35);
 }
 
@@ -40,9 +40,10 @@ body,
     font-stretch: 100%;
     src: url(https://fonts.gstatic.com/s/encodesans/v19/LDIhapOFNxEwR-Bd1O9uYNmnUQomAgE25imKSbHLR8A6WQw.woff2)
         format('woff2');
-    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+    unicode-range:
-        U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323,
+        U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-        U+0329, U+1EA0-1EF9, U+20AB;
+        U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+        U+1EA0-1EF9, U+20AB;
 }
 
 /* latin-ext */
@@ -53,9 +54,9 @@ body,
     font-stretch: 100%;
     src: url(https://fonts.gstatic.com/s/encodesans/v19/LDIhapOFNxEwR-Bd1O9uYNmnUQomAgE25imKSbHLRsA6WQw.woff2)
         format('woff2');
-    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
+    unicode-range:
-        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+        U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
-        U+A720-A7FF;
+        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
 /* latin */
@@ -66,9 +67,10 @@ body,
     font-stretch: 100%;
     src: url(https://fonts.gstatic.com/s/encodesans/v19/LDIhapOFNxEwR-Bd1O9uYNmnUQomAgE25imKSbHLSMA6.woff2)
         format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
+    unicode-range:
-        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+        U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 body,
@@ -363,6 +365,9 @@ table.el-table__body[style^='width:']
 
 .el-button:not(.el-button--text, .el-button--primary, .is-disabled) {
     background-color: var(--dv_bg-bot);
+}
+
+.el-button:not(.el-button--text, .el-button--primary) {
     border-radius: var(--dv_md-rounded);
 }
 
@@ -724,15 +729,17 @@ i[class='el-icon-star-off']:not(.el-menu-item div.el-tooltip i) {
     color: #fff;
 }
 .el-date-table td.available:hover {
-    color: #fff
+    color: #fff;
 }
-.el-year-table td .cell:hover, .el-year-table td.current:not(.disabled) .cell {
+.el-year-table td .cell:hover,
+.el-year-table td.current:not(.disabled) .cell {
     color: var(--dv_muted);
 }
 .el-month-table td.current:not(.disabled) .cell {
     color: var(--dv_muted);
 }
-.el-date-picker__header-label.active, .el-date-picker__header-label:hover {
+.el-date-picker__header-label.active,
+.el-date-picker__header-label:hover {
     color: var(--dv_muted);
 }
 .el-picker-panel__icon-btn:hover {