add save button to edit topic input field

This commit is contained in:
ollipa 2019-08-11 16:59:06 +03:00
parent 49652fc40a
commit e69e448396
3 changed files with 53 additions and 17 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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();
});
}