Merge pull request #3349 from ollipa/ollipa/edit-topic

Add functionality to edit channel topic from the user interface
This commit is contained in:
Pavel Djundik 2019-08-11 17:48:50 +03:00 committed by GitHub
commit 217cfb4701
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 101 additions and 2 deletions

View File

@ -20,7 +20,19 @@
<div class="header">
<button class="lt" aria-label="Toggle channel list" />
<span class="title">{{ channel.name }}</span>
<span :title="channel.topic" class="topic"
<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"
:network="network"
@ -77,6 +89,7 @@
</template>
<script>
const socket = require("../js/socket");
import ParsedMessage from "./ParsedMessage.vue";
import MessageList from "./MessageList.vue";
import ChatInput from "./ChatInput.vue";
@ -118,6 +131,25 @@ export default {
hideUserVisibleError() {
this.$root.currentUserVisibleError = null;
},
editTopic() {
if (this.channel.type === "channel") {
this.channel.editTopic = true;
this.$nextTick(() => {
document.querySelector(`#chan-${this.channel.id} .topic-input`).focus();
});
}
},
saveTopic() {
this.channel.editTopic = false;
const newTopic = document.querySelector(`#chan-${this.channel.id} .topic-input`).value;
if (this.channel.topic !== newTopic) {
const target = this.channel.id;
const text = `/raw TOPIC ${this.channel.name} :${newTopic}`;
socket.emit("input", {target, text});
}
},
},
};
</script>

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,6 +985,41 @@ background on hover (unless active) */
font-size: 14px;
}
#windows .header .topic-input {
color: inherit;
background: transparent;
border: 1px solid #cdd3da;
border-radius: 2px;
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;
@ -1829,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

@ -6,7 +6,7 @@ const utils = require("./utils");
const ContextMenu = require("./contextMenu");
const contextMenuActions = [];
const contextMenuItems = [];
const {findChannel} = require("./vue");
const {vueApp, findChannel} = require("./vue");
module.exports = {
addContextMenuItem,
@ -316,6 +316,25 @@ function addChannelListItem() {
});
}
function addEditTopicItem() {
function setEditTopic(itemData) {
findChannel(Number(itemData)).channel.editTopic = true;
document.querySelector(`#sidebar .chan[data-id="${Number(itemData)}"]`).click();
vueApp.$nextTick(() => {
document.querySelector(`#chan-${Number(itemData)} .topic-input`).focus();
});
}
addContextMenuItem({
check: (target) => target.hasClass("channel"),
className: "edit",
displayName: "Edit topic",
data: (target) => target.attr("data-id"),
callback: setEditTopic,
});
}
function addBanListItem() {
function banlist(itemData) {
socket.emit("input", {
@ -376,6 +395,7 @@ function addDefaultItems() {
addEditNetworkItem();
addJoinItem();
addChannelListItem();
addEditTopicItem();
addBanListItem();
addIgnoreListItem();
addConnectItem();

View File

@ -76,6 +76,7 @@ function initChannel(channel) {
channel.inputHistory = [""];
channel.historyLoading = false;
channel.scrolledToBottom = true;
channel.editTopic = false;
if (channel.type === "channel") {
channel.usersOutdated = true;