Skip to content

Commit

Permalink
fix textareas
Browse files Browse the repository at this point in the history
  • Loading branch information
@hrfee
hrfee committed Jan 1, 2022
1 parent 7e0e0b0 commit dd5eecf
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 18 deletions.
8 changes: 8 additions & 0 deletions css/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -391,6 +391,10 @@ select, textarea {
-moz-appearance: none;
}

html.dark textarea {
background-color: #202020
}

input {
color: inherit;
border: 0 solid var(--color-neutral-300);
Expand Down Expand Up @@ -532,3 +536,7 @@ div.card:contains(section.banner.footer) {
.pb-0i {
padding-bottom: 0px !important
}

.text-center-i {
text-align: center !important;
}
16 changes: 8 additions & 8 deletions html/admin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@
<form class="modal-content wide card" id="form-announce" href="">
<span class="heading"><span id="header-announce"></span> <span class="modal-close">&times;</span></span>
<div class="row">
<div class="col flex-col content mt-8">
<div class="col card ~neutral @low">
<div id="announce-details">
<span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
<div id="announce-variables">
Expand All @@ -182,7 +182,7 @@
<label class="label supra" for="announce-subject"> {{ .strings.subject }}</label>
<input type="text" id="announce-subject" class="input ~neutral @low mb-2 mt-4">
<label class="label supra" for="textarea-announce">{{ .strings.message }}</label>
<textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-8 font-mono bg-inherit"></textarea>
<textarea id="textarea-announce" class="textarea full-width ~neutral @low mt-4 font-mono"></textarea>
<p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p>
</div>
<label class="label unfocused" id="announce-name"><p class="supra">{{ .strings.name }}</p>
Expand Down Expand Up @@ -226,13 +226,13 @@
<form class="modal-content wide card" id="form-editor" href="">
<span class="heading"><span id="header-editor"></span> <span class="modal-close">&times;</span></span>
<div class="row">
<div class="col flex-col content mt-8">
<div class="col card ~neutral @low">
<span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
<div id="editor-variables"></div>
<div id="editor-variables" class="mt-4"></div>
<span class="label supra" for="editor-conditionals" id="label-editor-conditionals">{{ .strings.conditionals }}</span>
<div id="editor-conditionals"></div>
<label class="label supra" for="textarea-editor">{{ .strings.message }}</label>
<textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-8 font-mono bg-inherit"></textarea>
<textarea id="textarea-editor" class="textarea full-width flex-auto ~neutral @low mt-4 font-mono"></textarea>
<p class="support mt-4 mb-2">{{ .strings.markdownSupported }}</p>
<div class="flex-row">
<label class="full-width ml-2">
Expand Down Expand Up @@ -609,13 +609,13 @@ <h1 class="ac" id="telegram-pin"></h1>
<th>{{ .strings.username }}</th>
<th>{{ .strings.emailAddress }}</th>
{{ if .telegramEnabled }}
<th>Telegram</th>
<th class="text-center-i">Telegram</th>
{{ end }}
{{ if .matrixEnabled }}
<th>Matrix</th>
<th class="text-center-i">Matrix</th>
{{ end }}
{{ if .discordEnabled }}
<th>Discord</th>
<th class="text-center-i">Discord</th>
{{ end }}
<th>{{ .strings.expiry }}</th>
<th>{{ .strings.lastActiveTime }}</th>
Expand Down
2 changes: 1 addition & 1 deletion scripts/missing-colors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const hasDark = (item) => {
const fixHTML = (infile, outfile) => {
console.log(infile, outfile)
let doc = new parser.JSDOM(fs.readFileSync(infile));
for (let item of ["badge", "chip", "shield", "input", "table", "button", "portal", "select", "aside", "card", "field"]) {
for (let item of ["badge", "chip", "shield", "input", "table", "button", "portal", "select", "aside", "card", "field", "textarea"]) {
let items = doc.window.document.body.querySelectorAll("."+item);
for (let i = 0; i < items.length; i++) {
let hasColor = false;
Expand Down
23 changes: 14 additions & 9 deletions ts/modules/accounts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ class user implements User {
this._notifyDropdown.querySelector(".accounts-area-matrix").classList.add("unfocused");
this._matrix.innerHTML = `
<div class="table-inline">
<span class="chip btn @high">${window.lang.strings("add")}</span>
<span class="chip btn @low w-100"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span>
<input type="text" class="input ~neutral @low stealth-input unfocused" placeholder="@user:riot.im">
</div>
`;
Expand All @@ -214,15 +214,20 @@ class user implements User {

private _addMatrix = () => {
const addButton = this._matrix.querySelector(".btn") as HTMLSpanElement;
const icon = this._matrix.querySelector("i");
const input = this._matrix.querySelector("input.stealth-input") as HTMLInputElement;
const addIcon = addButton.querySelector("i");
if (addButton.classList.contains("chip")) {
input.classList.remove("unfocused");
addButton.innerHTML = `<i class="ri-check-line"></i>`;
addButton.classList.remove("chip")
if (icon) {
icon.classList.add("unfocused");
}
addIcon.classList.add("ri-check-line");
addIcon.classList.remove("ri-link");
addButton.classList.remove("chip", "w-100")
const outerClickListener = (event: Event) => {
if (!(event.target instanceof HTMLElement && (this._matrix.contains(event.target) || addButton.contains(event.target)))) {
document.dispatchEvent(new CustomEvent("accounts-reload"));
document.removeEventListener("click", outerClickListener);
}
};
document.addEventListener("click", outerClickListener);
} else {
if (input.value.charAt(0) != "@" || !input.value.includes(":")) return;
const send = {
Expand Down Expand Up @@ -259,7 +264,7 @@ class user implements User {
this._telegramUsername = u;
if (!u) {
this._notifyDropdown.querySelector(".accounts-area-telegram").classList.add("unfocused");
this._telegram.innerHTML = `<span class="chip btn @high">${window.lang.strings("add")}</span>`;
this._telegram.innerHTML = `<span class="chip btn @low w-100"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span>`;
(this._telegram.querySelector("span") as HTMLSpanElement).onclick = this._addTelegram;
} else {
this._notifyDropdown.querySelector(".accounts-area-telegram").classList.remove("unfocused");
Expand Down Expand Up @@ -324,7 +329,7 @@ class user implements User {
const lastNotifyMethod = this.lastNotifyMethod() == "discord";
this._discordUsername = u;
if (!u) {
this._discord.innerHTML = `<span class="chip btn @high">Add</span>`;
this._discord.innerHTML = `<span class="chip btn @low w-100"><i class="ri-link" alt="${window.lang.strings("add")}"></i></span>`;
(this._discord.querySelector("span") as HTMLSpanElement).onclick = () => addDiscord(this.id);
this._notifyDropdown.querySelector(".accounts-area-discord").classList.add("unfocused");
} else {
Expand Down

0 comments on commit dd5eecf

Please sign in to comment.