mirror of
https://github.com/thelounge/thelounge.git
synced 2024-06-10 09:42:18 +02:00
Add <styled-button> component; need to address index.html.tpl usage of btn
This commit is contained in:
parent
9082086ede
commit
9c6438b3a8
|
@ -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,
|
||||
|
|
|
@ -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,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 {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
104
client/components/StyledButton.vue
Normal 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>
|
|
@ -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();
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue