mirror of
https://codeberg.org/emersion/gamja.git
synced 2024-11-24 16:28:05 -05:00
Restyle action buttons
This commit is contained in:
Drew DeVault
Simon Ser
parent
9567d56f53
commit
258b0b0a3c
2 changed files with 115 additions and 16 deletions
|
|
@ -96,34 +96,64 @@ export default function BufferHeader(props) {
|
|||
if (props.isBouncer) {
|
||||
if (props.network.isupport.get("BOUNCER_NETID")) {
|
||||
actions = html`
|
||||
<a href="#" onClick=${handleJoinClick}>Join</a>
|
||||
${" "}
|
||||
<a href="#" onClick=${handleManageNetworkClick}>Manage network</a>
|
||||
<button
|
||||
key="join"
|
||||
onClick=${handleJoinClick}
|
||||
>Join channel</button>
|
||||
<button
|
||||
key="manage"
|
||||
onClick=${handleManageNetworkClick}
|
||||
>Manage network</button>
|
||||
`;
|
||||
} else {
|
||||
actions = html`
|
||||
<a href="#" onClick=${handleAddNetworkClick}>Add network</a>
|
||||
${" "}
|
||||
<a href="#" onClick=${handleCloseClick}>Disconnect</a>
|
||||
<button
|
||||
key="add"
|
||||
onClick=${handleAddNetworkClick}
|
||||
>Add network</button>
|
||||
<button
|
||||
key="disconnect"
|
||||
class="danger"
|
||||
onClick=${handleCloseClick}
|
||||
>Disconnect</button>
|
||||
`;
|
||||
}
|
||||
} else {
|
||||
actions = html`
|
||||
<a href="#" onClick=${handleJoinClick}>Join</a>
|
||||
${" "}
|
||||
<a href="#" onClick=${handleCloseClick}>Disconnect</a>
|
||||
<button
|
||||
key="join"
|
||||
onClick=${handleJoinClick}
|
||||
>Join channel</button>
|
||||
<button
|
||||
key="disconnect"
|
||||
class="danger"
|
||||
onClick=${handleCloseClick}
|
||||
>Disconnect</button>
|
||||
`;
|
||||
}
|
||||
break;
|
||||
case BufferType.CHANNEL:
|
||||
actions = html`<a href="#" onClick=${handleCloseClick}>Part</a>`;
|
||||
actions = html`
|
||||
<button
|
||||
key="part"
|
||||
class="danger"
|
||||
onClick=${handleCloseClick}
|
||||
>Leave</button>
|
||||
`;
|
||||
break;
|
||||
case BufferType.NICK:
|
||||
actions = html`<a href="#" onClick=${handleCloseClick}>Close</a>`;
|
||||
actions = html`
|
||||
<button
|
||||
key="close"
|
||||
class="danger"
|
||||
onClick=${handleCloseClick}
|
||||
>Close</button>
|
||||
`;
|
||||
break;
|
||||
}
|
||||
|
||||
return html`
|
||||
<span class="title">${props.buffer.name}</span>
|
||||
<span class="description">${description}</span>
|
||||
<span class="actions">${actions}</span>
|
||||
`;
|
||||
|
|
|
|||
79
style.css
79
style.css
|
|
@ -5,8 +5,18 @@
|
|||
--expander-background: #b5b5b5;
|
||||
--expander-background-hover: #a6a6a6;
|
||||
--expander-border: #6c6c6c;
|
||||
--green: green;
|
||||
|
||||
--button-color: #eff7ef;
|
||||
--button-background: #282879;
|
||||
--button-background-hover: #00007C;
|
||||
--button-border: #222;
|
||||
|
||||
--danger-button-color: #eff7ef;
|
||||
--danger-button-background: red;
|
||||
--danger-button-background-hover: #B20000;
|
||||
--danger-button-border: #222;
|
||||
|
||||
--green: green;
|
||||
--gray: #4a4a4a;
|
||||
}
|
||||
|
||||
|
|
@ -17,6 +27,10 @@
|
|||
--sidebar-background: #131618;
|
||||
--expander-background: #424446;
|
||||
--expander-background-hover: #2a2d2f;
|
||||
--button-background: #282879;
|
||||
--button-background-hover: #00007C;
|
||||
--danger-button-background: #B20000;
|
||||
--danger-button-background-hover: red;
|
||||
--green: #53b266;
|
||||
|
||||
--red: #fb615b;
|
||||
|
|
@ -37,6 +51,32 @@ body {
|
|||
font-family: monospace;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--button-background);
|
||||
transition: background 0.25s linear;
|
||||
color: var(--button-color);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-style: solid;
|
||||
border-color: var(--button-border);
|
||||
border-width: 1px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--button-background-hover);
|
||||
}
|
||||
|
||||
button.danger {
|
||||
background: var(--danger-button-background);
|
||||
color: var(--danger-button-color);
|
||||
border-color: var(--danger-button-border);
|
||||
}
|
||||
|
||||
button.danger:hover {
|
||||
background: var(--danger-button-background-hover);
|
||||
}
|
||||
|
||||
#buffer, #connect {
|
||||
color: var(--main-color);
|
||||
background: var(--main-background);
|
||||
|
|
@ -66,7 +106,7 @@ body {
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
background: var(--expander-background);
|
||||
transition: background 0.25s linear;
|
||||
transition: background 0.2s linear;
|
||||
border: none;
|
||||
width: 10px;
|
||||
}
|
||||
|
|
@ -113,7 +153,7 @@ body {
|
|||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#buffer-header, #member-list-header {
|
||||
#member-list-header {
|
||||
color: var(--main-color);
|
||||
background-color: var(--main-background);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -122,8 +162,27 @@ body {
|
|||
}
|
||||
|
||||
#buffer-header {
|
||||
color: var(--main-color);
|
||||
background-color: var(--main-background);
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid var(--sidebar-background);
|
||||
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#buffer-header .title {
|
||||
display: none;
|
||||
padding: 5px 10px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#buffer-header .description {
|
||||
flex-grow: 1;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
#buffer-header .status-here {
|
||||
|
|
@ -136,8 +195,14 @@ body {
|
|||
color: red;
|
||||
}
|
||||
|
||||
#buffer-header .actions {
|
||||
float: right;
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.actions button {
|
||||
border-width: 0 0 1px 1px;
|
||||
}
|
||||
|
||||
#buffer {
|
||||
|
|
@ -560,4 +625,8 @@ kbd {
|
|||
#member-list-header {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
#buffer-header .title {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue