deblan-mirror/thelounge
deblan-mirror
/
thelounge
mirror of https://github.com/thelounge/thelounge.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add <styled-button> component; need to address index.html.tpl usage of btn

This commit is contained in:
Max Leiter 2022-02-23 21:45:11 -08:00
parent 9082086ede
commit 9c6438b3a8
No known key found for this signature in database
GPG Key ID: A3512F2F2F17EBDA
12 changed files with 161 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/components/ConfirmDialog.vue
View File

@ -6,8 +6,8 @@
<p>{{ data.text }}</p>
</div>
<div class="confirm-buttons">
<button class="btn btn-cancel" @click="close(false)">Cancel</button>
<button class="btn btn-danger" @click="close(true)">{{ data.button }}</button>
<styled-button type="cancel" @click="close(false)">Cancel</styled-button>
<styled-button @click="close(true)">{{ data.button }}</styled-button>
</div>
</div>
</div>
@ -52,9 +52,12 @@
<script>
import eventbus from "../js/eventbus";
import StyledButton from "./StyledButton.vue";
export default {
name: "ConfirmDialog",
components: {
StyledButton,
},
data() {
return {
data: null,

10
client/components/JoinChannel.vue
View File

@ -31,7 +31,7 @@
title="The channel password may not contain spaces"
autocomplete="new-password"
/>
<button type="submit" class="btn btn-small">Join</button>
<styled-button small="true">Join</styled-button>
</form>
</template>
@ -54,9 +54,13 @@
<script>
import socket from "../js/socket";
import StyledButton from "./StyledButton.vue";
export default {
name: "JoinChannel",
components: {
StyledButton,
},
directives: {
focus: {
inserted(el) {
@ -79,23 +83,19 @@ export default {
const existingChannel = this.$store.getters.findChannelOnCurrentNetwork(
this.inputChannel
);
if (existingChannel) {
this.$root.switchToChannel(existingChannel);
} else {
const chanTypes = this.network.serverOptions.CHANTYPES;
let channel = this.inputChannel;
if (chanTypes && chanTypes.length > 0 && !chanTypes.includes(channel[0])) {
channel = chanTypes[0] + channel;
}
socket.emit("input", {
text: `/join ${channel} ${this.inputPassword}`,
target: this.channel.id,
});
}
this.inputChannel = "";
this.inputPassword = "";
this.$emit("toggle-join-channel");

8
client/components/Mentions.vue
View File

@ -8,13 +8,13 @@
<div class="mentions-popup">
<div class="mentions-popup-title">
Recent mentions
<button
<styled-button
v-if="resolvedMessages.length"
class="btn dismiss-all-mentions"
class="dismiss-all-mentions"
@click="dismissAllMentions()"
>
Dismiss all
</button>
</styled-button>
</div>
<template v-if="resolvedMessages.length === 0">
<p v-if="isLoading">Loading…</p>
@ -158,6 +158,7 @@ import eventbus from "../js/eventbus";
import localetime from "../js/helpers/localetime";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import StyledButton from "./StyledButton.vue";
dayjs.extend(relativeTime);
@ -166,6 +167,7 @@ export default {
components: {
Username,
ParsedMessage,
StyledButton,
},
data() {
return {

10
client/components/MessageList.vue
View File

@ -1,15 +1,13 @@
<template>
<div ref="chat" class="chat" tabindex="-1">
<div v-show="channel.moreHistoryAvailable" class="how-more">
<button
ref="loadMoreButton"
<div v-show="channel.moreHistoryAvailable" ref="loadMoreButton" class="show-more">
<styled-button
:disabled="channel.historyLoading || !$store.state.isConnected"
class="btn"
@click="onShowMoreClick"
>
<span v-if="channel.historyLoading">Loading…</span>
<span v-else>Show older messages</span>
</button>
</styled-button>
</div>
<div
class="messages"
@ -92,6 +90,7 @@ import socket from "../js/socket";
import Message from "./Message.vue";
import MessageCondensed from "./MessageCondensed.vue";
import DateMarker from "./DateMarker.vue";
import StyledButton from "./StyledButton.vue";
let unreadMarkerShown = false;
@ -101,6 +100,7 @@ export default {
Message,
MessageCondensed,
DateMarker,
StyledButton,
},
props: {
network: Object,

6
client/components/NetworkForm.vue
View File

@ -398,10 +398,10 @@ the server tab on new connection"
</template>
<div>
<button type="submit" class="btn" :disabled="disabled ? true : false">
<styled-button :disabled="disabled ? true : false">
<template v-if="defaults.uuid">Save network</template>
<template v-else>Connect</template>
</button>
</styled-button>
</div>
</form>
</div>
@ -504,12 +504,14 @@ input[name="proxyEnabled"] {
<script>
import RevealPassword from "./RevealPassword.vue";
import SidebarToggle from "./SidebarToggle.vue";
import StyledButton from "./StyledButton.vue";
export default {
name: "NetworkForm",
components: {
RevealPassword,
SidebarToggle,
StyledButton,
},
props: {
handleSubmit: Function,

8
client/components/Session.vue
View File

@ -15,10 +15,10 @@
</p>
</div>
<div class="session-item-btn">
<button class="btn" @click.prevent="signOut">
<styled-button @click.prevent="signOut">
<template v-if="session.current">Sign out</template>
<template v-else>Revoke</template>
</button>
</styled-button>
</div>
</div>
</template>
@ -49,9 +49,13 @@
import localetime from "../js/helpers/localetime";
import Auth from "../js/auth";
import socket from "../js/socket";
import StyledButton from "./StyledButton.vue";
export default {
name: "Session",
components: {
StyledButton,
},
props: {
session: Object,
},

104
client/components/StyledButton.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<component
:is="componentType"
:type="type"
:disabled="disabled"
:class="['btn', classes]"
:small="small"
v-on="$listeners"
>
<slot />
</component>
</template>
<style scoped>
.btn {
border: 2px solid var(--button-color);
border-radius: 3px;
color: var(--button-color);
display: inline-block;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
margin-bottom: 10px;
padding: 9px 17px;
text-transform: uppercase;
transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
word-spacing: 3px;
cursor: pointer; /* This is useful for `<button>` elements */
}
.btn-cancel {
border-color: var(--body-color-muted);
}
.btn-danger {
border-color: red;
}
.btn:disabled,
.btn:hover,
.btn:focus {
background: var(--button-color);
color: var(--button-text-color-hover);
opacity: 1;
}
.btn:active,
.btn:focus {
outline: 0;
box-shadow: 0 0 0 3px rgb(132 206 136 / 50%);
}
.btn:active {
opacity: 0.8;
}
.btn:disabled {
opacity: 0.6;
}
.btn-small {
padding: 4px 8px;
border-width: 1px;
letter-spacing: 0;
word-spacing: 0;
text-transform: none;
}
</style>
<script>
export default {
name: "StyledButton",
props: {
componentType: {
type: String,
default: "button",
},
text: {
type: String,
default: "",
},
small: {
type: Boolean,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
type: {
type: String,
default: "submit",
},
},
computed: {
classes() {
return {
"btn-small": this.small,
"btn-cancel": this.type === "cancel",
"btn-danger": this.type === "danger",
};
},
},
};
</script>

10
client/components/VersionChecker.vue
View File

@ -18,19 +18,19 @@
<template v-if="$store.state.versionStatus === 'up-to-date'">
<p>The Lounge is up to date!</p>
<button
<styled-button
v-if="$store.state.versionDataExpired"
id="check-now"
class="btn btn-small"
:small="true"
@click="checkNow"
>
Check now
</button>
</styled-button>
</template>
<template v-if="$store.state.versionStatus === 'error'">
<p>Information about latest release could not be retrieved.</p>
<button id="check-now" class="btn btn-small" @click="checkNow">Try again</button>
<styled-button id="check-now" :small="true" @click="checkNow">Try again</styled-button>
</template>
</div>
</template>
@ -102,9 +102,11 @@
</style>
<script>
import socket from "../js/socket";
import StyledButton from "./StyledButton.vue";
export default {
name: "VersionChecker",
components: {StyledButton},
mounted() {
if (!this.$store.state.versionData) {
this.checkNow();

10
client/components/Windows/SearchResults.vue
View File

@ -30,19 +30,17 @@
</div>
<div class="chat-content">
<div ref="chat" class="chat" tabindex="-1">
<div v-show="moreResultsAvailable" class="show-more">
<button
ref="loadMoreButton"
<div v-show="moreResultsAvailable" ref="loadMoreButton" class="show-more">
<styled-button
:disabled="
$store.state.messageSearchInProgress ||
!$store.state.isConnected
"
class="btn"
@click="onShowMoreClick"
>
<span v-if="$store.state.messageSearchInProgress">Loading…</span>
<span v-else>Show older messages</span>
</button>
</styled-button>
</div>
<div
@ -108,6 +106,7 @@ import SidebarToggle from "../SidebarToggle.vue";
import Message from "../Message.vue";
import MessageSearchForm from "../MessageSearchForm.vue";
import DateMarker from "../DateMarker.vue";
import StyledButton from "../StyledButton.vue";
export default {
name: "SearchResults",
@ -116,6 +115,7 @@ export default {
Message,
DateMarker,
MessageSearchForm,
StyledButton,
},
data() {
return {

34
client/components/Windows/Settings.vue
View File

@ -25,22 +25,12 @@
<div v-if="canRegisterProtocol || hasInstallPromptEvent">
<h2>Native app</h2>
<button
v-if="hasInstallPromptEvent"
type="button"
class="btn"
@click.prevent="nativeInstallPrompt"
>
<styled-button v-if="hasInstallPromptEvent" @click.prevent="nativeInstallPrompt">
Add The Lounge to Home screen
</button>
<button
v-if="canRegisterProtocol"
type="button"
class="btn"
@click.prevent="registerProtocol"
>
</styled-button>
<styled-button v-if="canRegisterProtocol" @click.prevent="registerProtocol">
Open irc:// URLs with The Lounge
</button>
</styled-button>
</div>
<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
@ -63,9 +53,9 @@
Use the button below to enable synchronization, and override any
settings already synced to the server.
</p>
<button type="button" class="btn btn-small" @click="onForceSyncClick">
<styled-button :small="true" @click="onForceSyncClick">
Sync settings and enable
</button>
</styled-button>
</div>
<div v-else class="settings-sync-panel">
<p>
@ -267,10 +257,8 @@ This may break orientation if your browser does not support that."
<template v-if="!$store.state.serverConfiguration.public">
<h2>Push Notifications</h2>
<div>
<button
<styled-button
id="pushNotifications"
type="button"
class="btn"
:disabled="
$store.state.pushNotificationState !== 'supported' &&
$store.state.pushNotificationState !== 'subscribed'
@ -284,7 +272,7 @@ This may break orientation if your browser does not support that."
Loading…
</template>
<template v-else> Subscribe to push notifications </template>
</button>
</styled-button>
<div v-if="$store.state.pushNotificationState === 'nohttps'" class="error">
<strong>Warning</strong>: Push notifications are only supported over HTTPS
connections.
@ -479,9 +467,7 @@ your nickname or expressions defined in custom highlights."
{{ passwordErrors[passwordChangeStatus.error] }}
</div>
<div>
<button type="submit" class="btn" @click.prevent="changePassword">
Change password
</button>
<styled-button @click.prevent="changePassword"> Change password </styled-button>
</div>
</div>
@ -633,6 +619,7 @@ import webpush from "../../js/webpush";
import RevealPassword from "../RevealPassword.vue";
import Session from "../Session.vue";
import SidebarToggle from "../SidebarToggle.vue";
import StyledButton from "../StyledButton.vue";
let installPromptEvent = null;
@ -647,6 +634,7 @@ export default {
RevealPassword,
Session,
SidebarToggle,
StyledButton,
},
data() {
return {

4
client/components/Windows/SignIn.vue
View File

@ -50,7 +50,7 @@
<div v-if="errorShown" class="error">Authentication failed.</div>
<button :disabled="inFlight" type="submit" class="btn">Sign in</button>
<styled-button :disabled="inFlight">Sign in</styled-button>
</form>
</div>
</template>
@ -99,11 +99,13 @@ label {
import storage from "../../js/localStorage";
import socket from "../../js/socket";
import RevealPassword from "../RevealPassword.vue";
import StyledButton from "../StyledButton.vue";
export default {
name: "SignIn",
components: {
RevealPassword,
StyledButton,
},
data() {
return {

48
client/css/style.css
View File

@ -172,57 +172,11 @@ p {
margin: 0 0 10px;
}
.btn {
border: 2px solid var(--button-color);
border-radius: 3px;
color: var(--button-color);
display: inline-block;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
margin-bottom: 10px;
padding: 9px 17px;
text-transform: uppercase;
transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
word-spacing: 3px;
cursor: pointer; /* This is useful for `<button>` elements */
}
.btn-small {
padding: 5px 13px;
}
.btn:disabled,
.btn:hover,
.btn:focus {
background: var(--button-color);
color: var(--button-text-color-hover);
opacity: 1;
}
.input:focus,
.btn:active,
.btn:focus {
.input:focus {
outline: 0;
box-shadow: 0 0 0 3px rgb(132 206 136 / 50%);
}
.btn:active {
opacity: 0.8;
}
.btn:disabled {
opacity: 0.6;
}
.btn-sm {
padding: 4px 8px;
border-width: 1px;
letter-spacing: 0;
word-spacing: 0;
text-transform: none;
}
#js-copy-hack,
#loading pre,
#help .container,