mirror of
https://github.com/CHOMPStation2/CHOMPStation2.git
synced 2025-12-11 10:43:20 +00:00
VChat Improvements
Hopefully, anyway. - Arbitrary font size setting - Line height setting - Multiple crush settings - Rewrote how tabs work hopefully for performance - Hidden messages are actually put elsewhere - Attempts to correct chat backlog restore on rejoin
This commit is contained in:
Aronai Sieyes
@@ -21,11 +21,11 @@
|
||||
<p>VChat is still loading. If you see this for a very long time, try the OOC 'Reload VChat' verb, or reconnecting.</p>
|
||||
<p>Sometimes if you're still caching resources, it will take longer than usual.</p>
|
||||
</div>
|
||||
<div id="app" @mouseup="on_mouseup" style="display: none;">
|
||||
<div id="app" @mouseup="on_mouseup" style="display: none;" :class="{ inverted: inverted }">
|
||||
|
||||
<!-- Top menu -->
|
||||
<div id="topmenu" class="ui top fixed menu" :class="{ inverted: inverted }">
|
||||
<div v-for="(tab,index) in tabs" class="item" :class="{ active: tab.active, inverted: inverted }" @click="switchtab(tab)" @click.ctrl="editmode">
|
||||
<div v-for="(tab,index) in tabs" class="item" :class="{ active: tab.active }" @click="switchtab(tab)" @click.ctrl="editmode">
|
||||
<i v-show="editing && !tab.immutable && index >= 2" class="icon-left-open-outline" @click.stop.prevent="movetab(tab,-1)" title="Move tab left"></i>
|
||||
{{tab.name}}
|
||||
<i v-show="editing && !tab.immutable" class="icon-cancel-circled-outline" @click.stop.prevent="deltab(tab)" title="Delete tab"></i>
|
||||
@@ -34,11 +34,11 @@
|
||||
</div>
|
||||
|
||||
<div class="right menu">
|
||||
<div class="item" :class="{ inverted: inverted }" @click="newtab" title="New Tab"><i class="icon-folder-add"></i></div>
|
||||
<div class="item" :class="{ inverted: inverted }" @click="pause" title="Pause Autoscroll">
|
||||
<div class="item" @click="newtab" title="New Tab"><i class="icon-folder-add"></i></div>
|
||||
<div class="item" @click="pause" title="Pause Autoscroll">
|
||||
<i class="icon-pause-outline" :class="{ blinkwarn: paused }"></i>
|
||||
</div>
|
||||
<div class="item" :class="{ inverted: inverted }" @click="editmode" title="Edit Mode">
|
||||
<div class="item" @click="editmode" title="Edit Mode">
|
||||
<i class="icon-cog-outline" :class="{ blinkwarn: editing }"></i>
|
||||
</div>
|
||||
<div class="item"><span class="ui circular label" title="VChat Latency (Not exactly network latency)" :class="ping_classes">{{latency}}ms</span></div>
|
||||
@@ -49,7 +49,7 @@
|
||||
<!-- Editor box -->
|
||||
<div id="contentbox">
|
||||
<div v-show="editing" id="editbox" class="ui segment" :class="{ inverted: inverted }">
|
||||
<div class="ui internally celled grid">
|
||||
<div class="ui internally celled grid" :class="{ inverted: inverted }">
|
||||
<div class="row">
|
||||
<div class="sixteen wide column">
|
||||
<div class="ui center aligned header" :class="{ inverted: inverted }">
|
||||
@@ -67,9 +67,9 @@
|
||||
<h5>Messages to display:</h5>
|
||||
<div class="ui form">
|
||||
<div class="grouped fields">
|
||||
<div class="field" v-for="type in type_table">
|
||||
<div class="field" v-for="type in type_table" :title="type.tooltip">
|
||||
<div v-show="!type.admin || is_admin" class="ui slider checkbox" :class="{ inverted: inverted, disabled: type.required || active_tab.immutable, checked: type.required || active_tab.immutable }">
|
||||
<input type="checkbox" id="type.becomes" :value="type.becomes" v-model="active_tab.classes" :disabled="type.required || active_tab.immutable" :checked="type.required || active_tab.immutable"><label :for="type.becomes">{{type.pretty}}</label>
|
||||
<input type="checkbox" id="type.becomes" :value="type.becomes" v-model="active_tab.categories" :disabled="type.required || active_tab.immutable" :checked="type.required || active_tab.immutable"><label :for="type.becomes">{{type.pretty}}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,6 +78,7 @@
|
||||
</div>
|
||||
<div class="eight wide column">
|
||||
<h3>Global Settings</h3>
|
||||
<p>Clicking anywhere in VChat saves your settings.</p>
|
||||
<div class="ui form" :class="{ inverted: inverted }">
|
||||
<div class="grouped fields">
|
||||
<div class="field">
|
||||
@@ -85,11 +86,6 @@
|
||||
<input type="checkbox" id="darkmode" v-model="inverted"><label for="darkmode">Dark Mode</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui slider checkbox" :class="{ inverted: inverted }">
|
||||
<input type="checkbox" id="combining" v-model="crushing"><label for="combining">Combine Messages</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui slider checkbox" :class="{ inverted: inverted }">
|
||||
<input type="checkbox" id="combining" v-model="animated"><label for="animated">Animate Messages</label>
|
||||
@@ -97,57 +93,82 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline fields">
|
||||
<label>Font Size</label>
|
||||
<div class="field">
|
||||
<label>Combine Messages</label>
|
||||
<div class="field" title="Combine no messages together.">
|
||||
<div class="ui radio checkbox">
|
||||
<input type="radio" id="fssmall" name="fontsize" v-model="fontsize" value="zoom_less">
|
||||
<label for="fssmall">Small</label>
|
||||
<input type="radio" id="cnone" name="crushing" v-model.number="crushing" value="0">
|
||||
<label for="cnone">None</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field" title="Try to combine the newest and last message.">
|
||||
<div class="ui radio checkbox">
|
||||
<input type="radio" id="fsstd" name="fontsize" v-model="fontsize" value="zoom_normal">
|
||||
<label for="fsstd">Standard</label>
|
||||
<input type="radio" id="cone" name="crushing" v-model.number="crushing" value="1">
|
||||
<label for="cone">One</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field" title="Try to combine the newest and last 3 messages.">
|
||||
<div class="ui radio checkbox">
|
||||
<input type="radio" id="fslarge" name="fontsize" v-model="fontsize" value="zoom_more">
|
||||
<label for="fslarge">Large</label>
|
||||
<input type="radio" id="cthree" name="crushing" v-model.number="crushing" value="3">
|
||||
<label for="cthree">Three</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline fields">
|
||||
<div class="field">
|
||||
<label># Shown Messages</label>
|
||||
<input :class="{ inverted: inverted }" type="number" name="showingnum" placeholder="200" title="Will affect performance!" v-model.lazy.number="showingnum" required style="width: 5em; padding: 0.1em;">
|
||||
<div class="field" title="Font size (Min 0.2, Max 5, Default 0.9)">
|
||||
<label>Font Scale</label>
|
||||
<input class="inputbox" type="number" name="fontsize" placeholder="0.9" v-model.lazy.number="fontsize" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline fields">
|
||||
<div class="field" title="Line height % (Min 100, Max 200, Default 130)">
|
||||
<label>Line Height %</label>
|
||||
<input class="inputbox" type="number" name="lineheight" placeholder="130" v-model.lazy.number="lineheight" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline fields">
|
||||
<div class="field" title="Hides messages for performance (Min 50, Max 2000, Default 200)">
|
||||
<label># Stored Messages</label>
|
||||
<input class="inputbox" type="number" name="showingnum" placeholder="200" v-model.lazy.number="showingnum" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="ui button" :class="{ inverted: inverted }" @click="save_chatlog">Export Chatlog</button>
|
||||
<button class="ui button" @click="save_chatlog">Export Chatlog</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Messages box -->
|
||||
<div v-show="!editing" id="messagebox" class="ui segment" :class="active_classes" @click="click_message">
|
||||
<div v-show="messages.length > showingnum" class="vc_system">
|
||||
<span class='notice'>[ {{messages.length - showingnum}} previous messages hidden due to display settings. ]</span>
|
||||
</div>
|
||||
<div v-show="!editing" id="messagebox" class="ui segment" @click="click_message" :class="{ inverted: inverted }" :style="{fontSize: fontsize+'em', lineHeight: lineheight+'%'}">
|
||||
<transition-group name="msgsanim" tag="span" :css="animated">
|
||||
<div v-for="message in shown_messages" :class="[message.category, fontsize]" :key="message.id">
|
||||
<span v-html="message.content"></span>
|
||||
<span v-show="message.repeats > 1" class="ui grey circular label">x{{message.repeats}}</span>
|
||||
</div>
|
||||
<!-- We're filtering -->
|
||||
<template v-if="current_categories.length">
|
||||
<div v-show="unshown_messages > 0" key="hidewarn1"><span class='notice'>[ {{unshown_messages}} previous messages archived for performance. ]</span></div>
|
||||
<div v-for="message in shown_messages" :key="message.id">
|
||||
<span v-html="message.content"></span>
|
||||
<span v-show="message.repeats > 1" class="ui grey circular label">x{{message.repeats}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- We're not filtering, messages go directly to dom -->
|
||||
<template v-else>
|
||||
<div v-show="archived_messages.length > 0" key="hidewarn2"><span class='notice'>[ {{archived_messages.length}} previous messages archived for performance. ]</span></div>
|
||||
<div v-for="message in messages" :key="message.id">
|
||||
<span v-html="message.content"></span>
|
||||
<span v-show="message.repeats > 1" class="ui grey circular label">x{{message.repeats}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--
|
||||
Tab: {{active_tab}}<br>
|
||||
Classes: {{active_classes}}<br>
|
||||
Fontsize: {{fontsize}}<br>
|
||||
<div class="ui segment">
|
||||
active_tab: {{active_tab}}<br>
|
||||
current_categories: {{current_categories}}<br>
|
||||
messages.length: {{messages.length}}<br>
|
||||
archived_messages.length: {{archived_messages.length}}<br>
|
||||
shown_messages.length: {{shown_messages.length}}<br>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user