add save button to edit topic input field
This commit is contained in:
parent
49652fc40a
commit
e69e448396
@ -20,15 +20,18 @@
|
||||
<div class="header">
|
||||
<button class="lt" aria-label="Toggle channel list" />
|
||||
<span class="title">{{ channel.name }}</span>
|
||||
<input
|
||||
v-if="channel.editTopic === true"
|
||||
:value="channel.topic"
|
||||
class="topic-edit"
|
||||
placeholder="Set channel topic"
|
||||
@keyup.enter="saveTopic"
|
||||
@keyup.esc="channel.editTopic = false"
|
||||
@blur="channel.editTopic = false"
|
||||
/>
|
||||
<div v-if="channel.editTopic === true" class="topic-container">
|
||||
<input
|
||||
:value="channel.topic"
|
||||
class="topic-input"
|
||||
placeholder="Set channel topic"
|
||||
@keyup.enter="saveTopic"
|
||||
@keyup.esc="channel.editTopic = false"
|
||||
/>
|
||||
<span aria-label="Save topic" class="save-topic" @click="saveTopic">
|
||||
<span type="button" aria-label="Save topic"></span>
|
||||
</span>
|
||||
</div>
|
||||
<span v-else :title="channel.topic" class="topic" @dblclick="editTopic"
|
||||
><ParsedMessage
|
||||
v-if="channel.topic"
|
||||
@ -133,13 +136,13 @@ export default {
|
||||
this.channel.editTopic = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
document.querySelector(`#chan-${this.channel.id} .topic-edit`).focus();
|
||||
document.querySelector(`#chan-${this.channel.id} .topic-input`).focus();
|
||||
});
|
||||
}
|
||||
},
|
||||
saveTopic(event) {
|
||||
saveTopic() {
|
||||
this.channel.editTopic = false;
|
||||
const newTopic = event.target.value;
|
||||
const newTopic = document.querySelector(`#chan-${this.channel.id} .topic-input`).value;
|
||||
|
||||
if (this.channel.topic !== newTopic) {
|
||||
const target = this.channel.id;
|
||||
|
@ -277,6 +277,7 @@ kbd {
|
||||
#chat .toggle-button::after,
|
||||
#chat .toggle-content .more-caret::before,
|
||||
#chat .scroll-down-arrow::after,
|
||||
#chat .topic-container .save-topic span::before,
|
||||
#version-checker::before,
|
||||
.context-menu-item::before,
|
||||
#help .website-link::before,
|
||||
@ -969,6 +970,12 @@ background on hover (unless active) */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.topic-container {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#windows .header .topic {
|
||||
color: var(--body-color-muted);
|
||||
margin-left: 8px;
|
||||
@ -978,19 +985,41 @@ background on hover (unless active) */
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#windows .header .topic-edit {
|
||||
#windows .header .topic-input {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border: 1px solid #cdd3da;
|
||||
border-radius: 2px;
|
||||
margin: 2px 0 2px 8px;
|
||||
padding: 0 10px;
|
||||
flex-grow: 1;
|
||||
padding-right: 37px;
|
||||
padding-left: 10px;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.topic-container .save-topic {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.topic-container .save-topic span {
|
||||
font-size: 16px;
|
||||
color: #607992;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.topic-container .save-topic span:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
#chat {
|
||||
overflow: hidden;
|
||||
flex: 1 0 auto;
|
||||
@ -1842,6 +1871,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
||||
content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
|
||||
}
|
||||
|
||||
.topic-container .save-topic span::before {
|
||||
content: "\f00c"; /* https://fontawesome.com/icons/check?style=solid */
|
||||
}
|
||||
|
||||
.password-container .reveal-password.visible span::before {
|
||||
content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */
|
||||
color: #ff4136;
|
||||
|
@ -322,7 +322,7 @@ function addEditTopicItem() {
|
||||
document.querySelector(`#sidebar .chan[data-id="${Number(itemData)}"]`).click();
|
||||
|
||||
vueApp.$nextTick(() => {
|
||||
document.querySelector(`#chan-${Number(itemData)} .topic-edit`).focus();
|
||||
document.querySelector(`#chan-${Number(itemData)} .topic-input`).focus();
|
||||
});
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user