Skip to content

Commit

Permalink
Improve access sidebar functionality and styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@ItsOnlyBinary
ItsOnlyBinary committed Aug 25, 2023
1 parent 3efbcb3 commit 378b98b
Show file tree
Hide file tree
Showing 11 changed files with 633 additions and 502 deletions.
150 changes: 88 additions & 62 deletions src/components/ChannelBanlist.vue
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,110 @@
<template>
<div class="kiwi-channelbanlist">
<form class="u-form kiwi-channelbanlist" @submit.prevent="">
<a class="u-link" @click="updateBanlist">{{ $t('bans_refresh') }}</a>
<form class="u-form kiwi-channelbanlist" @submit.prevent="">
<a class="u-link" @click="updateBanlist">{{ $t('bans_refresh') }}</a>

<table v-if="banlist.length > 0" class="kiwi-channelbanlist-table">
<tr>
<th>{{ $t('bans_user') }}</th>
<th />
<th />
</tr>
<tr v-for="ban in banlist" :key="ban.banned" :title="'By ' + ban.banned_by">
<td class="kiwi-channelbanlist-table-mask">{{ ban.banned }}</td>
<td class="kiwi-channelbanlist-table-bannedat">
{{ (new Date(ban.banned_at * 1000)).toDateString() }}
</td>
<td class="kiwi-channelbanlist-table-actions">
<i class="fa fa-trash" aria-hidden="true" @click="removeBan(ban.banned)" />
</td>
</tr>
</table>
<div v-else-if="is_refreshing">
{{ $t('bans_refreshing') }}
</div>
<div v-else class="kiwi-channelbanlist-empty">
{{ $t('bans_nobody') }}
</div>
</form>
</div>
<div
v-if="banlist.length > 0"
:class="{'kiwi-sidebar-settings-access-restricted': !areWeAnOp}"
class="kiwi-sidebar-settings-access-table"
>
<div class="kiwi-sidebar-settings-access-table-header">{{ $t('bans_user') }}</div>
<div class="kiwi-sidebar-settings-access-table-header">{{ $t('bans_by') }}</div>
<div class="kiwi-sidebar-settings-access-table-header" />
<div v-if="areWeAnOp" class="kiwi-sidebar-settings-access-table-header" />

<template v-for="ban in banlist">
<div
:key="'mask' + ban.banned"
class="kiwi-sidebar-settings-access-mask"
>
{{ ban.banned }}
</div>
<div
:key="'who' + ban.banned"
class="kiwi-sidebar-settings-access-who"
>
{{ ban.banned_by }}
</div>
<div
:key="'when' + ban.banned"
class="kiwi-sidebar-settings-access-when"
>
{{
(new Date(ban.banned_at * 1000)).toLocaleDateString({
year: "numeric", month: "2-digit", day: "2-digit"
})
}}
</div>
<div
v-if="areWeAnOp"
:key="'actions' + ban.banned"
class="kiwi-sidebar-settings-access-actions"
>
<i class="fa fa-trash" aria-hidden="true" @click="removeBan(ban.banned)" />
</div>
</template>
</div>
<div v-else-if="is_refreshing">
{{ $t('bans_refreshing') }}
</div>
<div v-else class="kiwi-channelbanlist-empty">
{{ $t('bans_nobody') }}
</div>
</form>
</template>

<script>
'kiwi public';
export default {
props: ['buffer'],
data: function data() {
data() {
return {
banlist: [],
is_refreshing: false,
};
},
created: function created() {
computed: {
areWeAnOp() {
return this.buffer.isUserAnOp(this.buffer.getNetwork().nick);
},
},
watch: {
buffer() {
this.banlist = [];
this.is_refreshing = false;
this.updateBanlist();
},
},
created() {
this.updateBanlist();
},
methods: {
updateBanlist: function updateBanlist() {
if (this.buffer.getNetwork().state !== 'connected' || this.is_refreshing) {
updateBanlist() {
if (this.is_refreshing || this.buffer.getNetwork().state !== 'connected') {
return;
}
let channelName = this.buffer.name;
const channelName = this.buffer.name;
const network = this.buffer.getNetwork();
this.is_refreshing = true;
this.buffer.getNetwork().ircClient.banlist(channelName, (banEvent) => {
this.banlist = banEvent.bans;
network.ircClient.banlist(channelName, (event) => {
const currentNetwork = this.buffer.getNetwork();
const bufferMatches = currentNetwork.ircClient
.caseCompare(this.buffer.name, event.channel);
if (!bufferMatches || network !== currentNetwork) {
// The buffer or network changed since making the request
return;
}
this.banlist = event.bans;
this.is_refreshing = false;
});
},
removeBan: function removeBan(mask) {
let channelName = this.buffer.name;
removeBan(mask) {
const channelName = this.buffer.name;
this.buffer.getNetwork().ircClient.unban(channelName, mask);
this.banlist = this.banlist.filter((ban) => ban.banned !== mask);
},
Expand All @@ -66,31 +113,10 @@ export default {
</script>

<style lang="less">
.kiwi-channelbanlist-table {
width: 100%;
border-collapse: collapse;
line-height: 20px;
margin-top: 10px;
}
.kiwi-channelbanlist-table tr {
border-bottom: 1px solid;
}
.kiwi-channelbanlist-table-mask {
word-break: break-all;
}
.kiwi-channelbanlist-table-bannedat {
min-width: 150px;
}
.kiwi-channelbanlist-table-actions {
min-width: 50px;
text-align: center;
cursor: pointer;
position: relative;
transition: all 0.3s;
z-index: 1;
.kiwi-channelbanlist {
display: flex;
flex-direction: column;
row-gap: 10px;
margin: 10px 0;
}
</style>
49 changes: 25 additions & 24 deletions src/components/ChannelInfo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<form class="u-form kiwi-channelinfo-basicmodes" @submit.prevent="">
<label class="kiwi-channelinfo-topic">
<span>{{ $t('channel_topic') }}</span>
<textarea v-model.lazy="topic" rows="2" />
<textarea v-model.lazy="topic" rows="2" :readonly="!areWeAnOp" />
</label>

<div v-if="buffer.topics.length > 1" class="kiwi-channelinfo-previoustopics">
Expand All @@ -13,34 +13,34 @@
</a>
<ul v-if="showPrevTopics">
<li v-for="(topicText, idx) in prevTopics" :key="idx">
<span>{{ topicText.trim() }}</span>
<span>{{ topicText }}</span>
</li>
</ul>
</div>

<label class="u-checkbox-wrapper">
<span>{{ $t('channel_moderated') }}</span>
<input v-model="modeM" type="checkbox">
<input v-model="modeM" type="checkbox" :disabled="!areWeAnOp">
</label>
<label class="u-checkbox-wrapper">
<span>{{ $t('channel_invite') }}</span>
<input v-model="modeI" type="checkbox">
<input v-model="modeI" type="checkbox" :disabled="!areWeAnOp">
</label>
<label class="u-checkbox-wrapper">
<span>{{ $t('channel_secret') }}</span>
<input v-model="modeS" type="checkbox">
<input v-model="modeS" type="checkbox" :disabled="!areWeAnOp">
</label>
<label class="u-checkbox-wrapper">
<span>{{ $t('channel_moderated_topic') }}</span>
<input v-model="modeT" type="checkbox">
<input v-model="modeT" type="checkbox" :disabled="!areWeAnOp">
</label>
<label class="u-checkbox-wrapper">
<span>{{ $t('channel_external') }}</span>
<input v-model="modeN" type="checkbox">
<input v-model="modeN" type="checkbox" :disabled="!areWeAnOp">
</label>
<label>
<span>{{ $t('password') }}</span>
<input v-model.lazy="modeK" type="text" class="u-input">
<input v-model.lazy="modeK" type="text" class="u-input" :readonly="!areWeAnOp">
</label>
</form>
</div>
Expand All @@ -53,10 +53,10 @@
// Eg. +i, +n, etc
function generateComputedMode(mode) {
return {
get: function computedModeGet() {
get() {
return this.modeVal(mode);
},
set: function computedModeSet(newVal) {
set(newVal) {
return this.setMode((newVal ? '+' : '-') + mode);
},
};
Expand All @@ -66,13 +66,13 @@ function generateComputedMode(mode) {
// Eg. "+k key"
function generateComputedModeWithParam(mode) {
return {
get: function computedModeWithParamGet() {
get() {
let val = this.modeVal(mode);
return val === false ?
'' :
val;
},
set: function computedModeWithParamSet(newVal) {
set(newVal) {
if (newVal) {
this.setMode('+' + mode, newVal);
} else {
Expand All @@ -97,14 +97,11 @@ export default {
modeN: generateComputedMode('n'),
modeK: generateComputedModeWithParam('k'),
topic: {
get: function computedTopicGet() {
get() {
return this.buffer.topic;
},
set: function computedTopicSet(newVal) {
set(newVal) {
let newTopic = newVal.replace('\n', ' ');
// TODO: Update irc-framework to insert a trailing : if the last argument is an
// empty string. The trailing : makes a difference between things like
// requesting a topic and changing to an empty topic
if (!newTopic.trim()) {
this.buffer.getNetwork().ircClient.raw(`TOPIC ${this.buffer.name} :`);
} else {
Expand All @@ -115,15 +112,18 @@ export default {
prevTopics() {
return this.buffer.topics.filter((topic) => topic.trim());
},
areWeAnOp() {
return this.buffer.isUserAnOp(this.buffer.getNetwork().nick);
},
},
methods: {
updateBanList: function updateBanList() {
updateBanList() {
this.buffer.getNetwork().ircClient.raw('MODE', this.buffer.name, '+b');
},
setMode: function setMode(mode, param) {
setMode(mode, param) {
this.buffer.getNetwork().ircClient.raw('MODE', this.buffer.name, mode, param);
},
modeVal: function modeVal(mode) {
modeVal(mode) {
let val = false;
if (typeof this.buffer.modes[mode] === 'undefined') {
Expand All @@ -139,21 +139,22 @@ export default {
return val;
},
areWeAnOp: function areWeAnOp() {
return this.buffer.isUserAnOp(this.buffer.getNetwork().nick);
},
},
};
</script>

<style>
.kiwi-channelinfo .kiwi-channelinfo-topic {
margin-bottom: 10px;
}
.kiwi-channelinfo-previoustopics {
margin: 0 10px 15px 10px;
margin-bottom: 10px;
}
.kiwi-channelinfo-previoustopics ul {
margin-top: 0;
margin-left: 6px;
}
</style>
Loading

0 comments on commit 378b98b

Please sign in to comment.