Merge pull request #3349 from ollipa/ollipa/edit-topic
Add functionality to edit channel topic from the user interface
This commit is contained in:
commit
217cfb4701
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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();
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user