Portrait next to text input

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## 1.19.3
+* Added option to have character portrait displayed next to text input
 * Fixed asexual orientation ID
 * Replaced the action star icon to differentiate with the mod badges
 

bbcode/Editor.vue

@@ -8,6 +8,10 @@
         <div class="bbcode-toolbar btn-toolbar" role="toolbar" :style="showToolbar ? {display: 'flex'} : undefined" @mousedown.stop.prevent
             v-if="hasToolbar" style="flex:1 51%">
             <div class="btn-group" style="flex-wrap:wrap">
+                <div v-if="!!characterName" class="character-btn">
+                  <icon :character="characterName"></icon>
+                </div>
+
                 <div class="btn btn-light btn-sm" v-for="button in buttons" :title="button.title" @click.prevent.stop="apply(button)">
                     <i :class="(button.class ? button.class : 'fa ') + button.icon"></i>
                 </div>
@@ -43,8 +47,13 @@
     import {BBCodeElement, CoreBBCodeParser, urlRegex} from './core';
     import {defaultButtons, EditorButton, EditorSelection} from './editor';
     import {BBCodeParser} from './parser';
+    import {default as IconView} from './IconView.vue';
 
-    @Component
+    @Component({
+      components: {
+        'icon': IconView
+      }
+    })
     export default class Editor extends Vue {
         @Prop
         readonly extras?: EditorButton[];
@@ -70,6 +79,9 @@
         @Prop({default: false, type: Boolean})
         readonly invalid!: boolean;
 
+        @Prop({default: null})
+        readonly characterName: string | null = null;
+
         preview = false;
         previewWarnings: ReadonlyArray<string> = [];
         previewResult = '';
@@ -311,3 +323,20 @@
         }
     }
 </script>
+<style lang="scss">
+  .bbcode-editor .bbcode-toolbar .character-btn {
+    width: 30px;
+    height: 30px;
+    overflow: hidden;
+
+    a {
+      width: 100%;
+      height: 100%;
+
+      img {
+        width: inherit;
+        height: inherit;
+      }
+    }
+  }
+</style>

chat/ConversationView.vue

@@ -135,9 +135,12 @@
         <bbcode-editor v-model="conversation.enteredText" @keydown="onKeyDown" :extras="extraButtons" @input="keepScroll"
             :classes="'form-control chat-text-box' + (isChannel(conversation) && conversation.isSendingAds ? ' ads-text-box' : '')"
             :hasToolbar="settings.bbCodeBar" ref="textBox" style="position:relative;margin-top:5px"
-            :maxlength="isChannel(conversation) || isPrivate(conversation) ? conversation.maxMessageLength : undefined">
+            :maxlength="isChannel(conversation) || isPrivate(conversation) ? conversation.maxMessageLength : undefined"
+            :characterName="ownName"
+            >
+
             <span v-if="isPrivate(conversation) && conversation.typingStatus !== 'clear'" class="chat-info-text">
-                {{l('chat.typing.' + conversation.typingStatus, conversation.name)}}
+              <user :character="conversation.character" :match="false" :bookmark="false"></user>&nbsp;{{l('chat.typing.' + conversation.typingStatus, '').trim()}}
             </span>
             <div v-show="conversation.infoText" class="chat-info-text">
                 <span class="fa fa-times" style="cursor:pointer" @click.stop="conversation.infoText = ''"></span>
@@ -203,13 +206,22 @@
     import CharacterChannelList from './character/CharacterChannelList.vue';
     import * as _ from 'lodash';
     import Dropdown from '../components/Dropdown.vue';
-
+    import { EventBus } from './preview/event-bus';
 
     @Component({
         components: {
-            user: UserView, 'bbcode-editor': Editor, 'manage-channel': ManageChannel, settings: ConversationSettings,
-            logs: Logs, 'message-view': MessageView, bbcode: BBCodeView(core.bbCodeParser), 'command-help': CommandHelp,
-            'ad-view': CharacterAdView, 'channel-list': CharacterChannelList, dropdown: Dropdown, adSettings: ConversationAdSettings
+            user: UserView,
+            'bbcode-editor': Editor,
+            'manage-channel': ManageChannel,
+            settings: ConversationSettings,
+            logs: Logs,
+            'message-view': MessageView,
+            bbcode: BBCodeView(core.bbCodeParser),
+            'command-help': CommandHelp,
+            'ad-view': CharacterAdView,
+            'channel-list': CharacterChannelList,
+            dropdown: Dropdown,
+            adSettings: ConversationAdSettings
         }
     })
     export default class ConversationView extends Vue {
@@ -246,15 +258,20 @@
         isPrivate = Conversation.isPrivate;
         showNonMatchingAds = true;
 
+        ownName?: string;
 
         @Hook('beforeMount')
         async onBeforeMount(): Promise<void> {
+          this.updateOwnName();
+
           this.showNonMatchingAds = !await core.settingsStore.get('hideNonMatchingAds');
         }
 
 
         @Hook('mounted')
         mounted(): void {
+            this.updateOwnName();
+
             this.extraButtons = [{
                 title: 'Help\n\nClick this button for a quick overview of slash commands.',
                 tag: '?',
@@ -295,8 +312,13 @@
 
             this.$watch(() => this.conversation.adManager.isActive(), () => (this.refreshAutoPostingTimer()));
             this.refreshAutoPostingTimer();
+
+            this.configUpdateHook = () => this.updateOwnName();
+            EventBus.$on('configuration-update', this.configUpdateHook);
         }
 
+        protected configUpdateHook: any;
+
         @Hook('destroyed')
         destroyed(): void {
             window.removeEventListener('resize', this.resizeHandler);
@@ -305,6 +327,8 @@
             clearInterval(this.searchTimer);
             clearInterval(this.autoPostingUpdater);
             clearInterval(this.adCountdown);
+
+            EventBus.$off('configuration-update', this.configUpdateHook);
         }
 
         hideSearch(): void {
@@ -312,6 +336,10 @@
             this.searchInput = '';
         }
 
+        updateOwnName(): void {
+            this.ownName = core.state.settings.risingShowPortraitNearInput ? core.characters.ownCharacter?.name : undefined;
+        }
+
         get conversation(): Conversation {
             return core.conversations.selectedConversation;
         }
@@ -328,6 +356,8 @@
 
         @Watch('conversation')
         conversationChanged(): void {
+            this.updateOwnName();
+
             if(!anyDialogsShown) (<Editor>this.$refs['textBox']).focus();
             this.$nextTick(() => setTimeout(() => this.messageView.scrollTop = this.messageView.scrollHeight));
             this.scrolledDown = true;

chat/SettingsView.vue

@@ -199,6 +199,12 @@
                 </label>
             </div>
 
+            <div class="form-group">
+                <label class="control-label" for="risingShowPortraitNearInput">
+                    <input type="checkbox" id="risingShowPortraitNearInput" v-model="risingShowPortraitNearInput"/>
+                    Show character portrait by text input
+                </label>
+            </div>
         </div>
 
         <div v-show="selectedTab === '3'">
@@ -325,6 +331,7 @@
     import { smartFilterTypes as smartFilterTypesOrigin } from '../learn/filter/types';
     import _ from 'lodash';
     import { matchesSmartFilters } from '../learn/filter/smart-filter';
+    import { EventBus } from './preview/event-bus';
 
     @Component({
         components: {modal: Modal, tabs: Tabs}
@@ -367,6 +374,8 @@
         risingShowUnreadOfflineCount!: boolean;
         risingColorblindMode!: boolean;
 
+        risingShowPortraitNearInput!: boolean;
+
         risingFilter!: SmartFilterSettings = {} as any;
 
         smartFilterTypes = smartFilterTypesOrigin;
@@ -408,6 +417,8 @@
             this.risingShowUnreadOfflineCount = settings.risingShowUnreadOfflineCount;
 
             this.risingColorblindMode = settings.risingColorblindMode;
+            this.risingShowPortraitNearInput = settings.risingShowPortraitNearInput;
+
             this.risingFilter = settings.risingFilter;
         }
 
@@ -468,6 +479,7 @@
                 risingComparisonInUserMenu: this.risingComparisonInUserMenu,
                 risingComparisonInSearch: this.risingComparisonInSearch,
                 risingShowUnreadOfflineCount: this.risingShowUnreadOfflineCount,
+                risingShowPortraitNearInput: this.risingShowPortraitNearInput,
 
                 risingColorblindMode: this.risingColorblindMode,
                 risingFilter: {
@@ -486,6 +498,8 @@
             }
 
             if(this.notifications) await core.notifications.requestPermission();
+
+            EventBus.$emit('configuration-update', core.state.settings);
         }
 
         rebuildFilters() {

chat/common.ts

@@ -54,6 +54,7 @@ export class Settings implements ISettings {
 
     risingShowUnreadOfflineCount = true;
     risingColorblindMode = false;
+    risingShowPortraitNearInput = true;
 
     risingFilter = {
         hideAds: true,

chat/interfaces.ts

@@ -226,6 +226,7 @@ export namespace Settings {
 
         readonly risingShowUnreadOfflineCount: boolean;
         readonly risingColorblindMode: boolean;
+        readonly risingShowPortraitNearInput: boolean;
 
         readonly risingFilter: SmartFilterSettings;
     }