forked from Qortal/qortal-ui
AlphaX-Projects
3 months ago
committed by
GitHub
36 changed files with 1203 additions and 107 deletions
@ -26,7 +26,7 @@ Easiest way to install the lastest required packages on Linux is via nvm.
|
||||
``` source ~/.profile ``` (For Debian based distro) <br/> |
||||
``` source ~/.bashrc ``` (For Fedora / CentOS) <br/> |
||||
``` nvm ls-remote ``` (Fetch list of available versions) <br/> |
||||
``` nvm install v20.14.0 ``` (LTS: Iron supported by Electron V31) <br/> |
||||
``` nvm install v18.20.3 ``` (Latest LTS: Hydrogen supported by Electron V31) <br/> |
||||
``` npm --location=global install [email protected] ``` <br/> |
||||
|
||||
Adding via binary package mirror will only work if you have set the package path. You can do a node or java build via ports instead by downloading ports with portsnap fetch method. |
||||
|
||||
Binary file not shown.
@ -0,0 +1,20 @@
|
||||
import { supportsEmojiFlags } from './ChatTestEmojiFlags' |
||||
|
||||
export function supportCountryFlagEmojis(fontName = "Twemoji Country Flags", fontUrl = "/font/TwemojiCountryFlags.woff2") { |
||||
if (typeof window !== "undefined" && supportsEmojiFlags("😊") && !supportsEmojiFlags("🇨🇭")) { |
||||
const style = document.createElement("style") |
||||
|
||||
style.textContent = `@font-face {
|
||||
font-family: "${fontName}"; |
||||
unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; |
||||
src: url('${fontUrl}') format('woff2'); |
||||
font-display: swap; |
||||
}` |
||||
|
||||
document.head.appendChild(style) |
||||
|
||||
return true |
||||
} |
||||
|
||||
return false |
||||
} |
||||
@ -0,0 +1,271 @@
|
||||
import { html, LitElement } from 'lit' |
||||
import { Epml } from '../../../epml' |
||||
import { chatRightPanelSettingsStyles } from './plugins-css' |
||||
import './WrapperModal' |
||||
import '@material/mwc-button' |
||||
import '@material/mwc-icon' |
||||
import '@vaadin/button' |
||||
|
||||
// Multi language support
|
||||
import { translate } from '../../../../core/translate' |
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) |
||||
|
||||
class ChatRightPanelSettings extends LitElement { |
||||
static get properties() { |
||||
return { |
||||
toggle: { attribute: false }, |
||||
agoTime: { type: Boolean }, |
||||
isoTime: { type: Boolean }, |
||||
bothTime: { type: Boolean }, |
||||
currentFontSize16: { type: Boolean }, |
||||
currentFontSize18: { type: Boolean }, |
||||
currentFontSize20: { type: Boolean }, |
||||
currentFontSize22: { type: Boolean } } |
||||
} |
||||
|
||||
static get styles() { |
||||
return [chatRightPanelSettingsStyles] |
||||
} |
||||
|
||||
constructor() { |
||||
super() |
||||
this.agoTime = false |
||||
this.isoTime = false |
||||
this.bothTime = false |
||||
this.currentFontSize16 = false |
||||
this.currentFontSize18 = false |
||||
this.currentFontSize20 = false |
||||
this.currentFontSize22 = false |
||||
} |
||||
|
||||
render() { |
||||
return html` |
||||
<div class="container"> |
||||
<div class="close-row" style="margin-top: 15px"> |
||||
<vaadin-icon class="top-bar-icon" @click=${() => this.toggle(false)} style="margin: 0px 10px" icon="vaadin:close" slot="icon"></vaadin-icon> |
||||
</div> |
||||
<div class="container-body"> |
||||
<div style="margin-top: 5px;"> |
||||
<p class="group-name">${translate("chatsettings.cs2")}</p> |
||||
<hr style="color: var(--black);"> |
||||
</div> |
||||
<div class="group-info"> |
||||
<p class="group-description">${translate("chatsettings.cs3")}</p> |
||||
<div class="checkbox-row"> |
||||
<label for="agoButton" id="agoButtonLabel" style="color: var(--black);">${translate("chatsettings.cs4")}</label> |
||||
<mwc-checkbox |
||||
style="margin-right: -15px;" |
||||
id="agoButton" |
||||
@click=${(e) => this.setAgo(e)} |
||||
?checked=${this.agoTime} |
||||
></mwc-checkbox> |
||||
</div> |
||||
<div class="checkbox-row" style="margin-top: -20px;"> |
||||
<label for="isoButton" id="isoButtonLabel" style="color: var(--black);">${translate("chatsettings.cs5")}</label> |
||||
<mwc-checkbox |
||||
style="margin-right: -15px;" |
||||
id="agoButton" |
||||
@click=${(e) => this.setIso(e)} |
||||
?checked=${this.isoTime} |
||||
></mwc-checkbox> |
||||
</div> |
||||
<div class="checkbox-row" style="margin-top: -20px;"> |
||||
<label for="bothButton" id="bothButtonLabel" style="color: var(--black);">${translate("chatsettings.cs5")} + ${translate("chatsettings.cs4")}</label> |
||||
<mwc-checkbox |
||||
style="margin-right: -15px;" |
||||
id="agoButton" |
||||
@click=${(e) => this.setBoth(e)} |
||||
?checked=${this.bothTime} |
||||
></mwc-checkbox> |
||||
</div> |
||||
</div> |
||||
<div><hr style="color: var(--black);"></div> |
||||
<div class="group-info"> |
||||
<p class="group-description">${translate("chatsettings.cs6")}</p> |
||||
<div class="checkbox-row"> |
||||
<label for="font16Button" id="font16ButtonLabel" style="color: var(--black);">${translate("chatsettings.cs7")} 16${translate("chatsettings.cs8")}</label> |
||||
<mwc-checkbox |
||||
style="margin-right: -15px;" |
||||
id="font16Button" |
||||
@click=${(e) => this.setFont16(e)} |
||||
?checked=${this.currentFontSize16} |
||||
></mwc-checkbox> |
||||
</div> |
||||
<div class="checkbox-row" style="margin-top: -20px;"> |
||||
<label for="font18Button" id="font18ButtonLabel" style="color: var(--black);">18${translate("chatsettings.cs8")}</label> |
||||
<mwc-checkbox |
||||
style="margin-right: -15px;" |
||||
id="font18Button" |
||||
@click=${(e) => this.setFont18(e)} |
||||
?checked=${this.currentFontSize18} |
||||
></mwc-checkbox> |
||||
<span style="color: var(--black)"> | </span> |
||||
<label for="font24Button" id="font20ButtonLabel" style="color: var(--black);">20${translate("chatsettings.cs8")}</label> |
||||
<mwc-checkbox |
||||
style="margin-right: -15px;" |
||||
id="font20Button" |
||||
@click=${(e) => this.setFont20(e)} |
||||
?checked=${this.currentFontSize20} |
||||
></mwc-checkbox> |
||||
<span style="color: var(--black)"> | </span> |
||||
<label for="font22Button" id="font22ButtonLabel" style="color: var(--black);">22${translate("chatsettings.cs8")}</label> |
||||
<mwc-checkbox |
||||
style="margin-right: -15px;" |
||||
id="font22Button" |
||||
@click=${(e) => this.setFont22(e)} |
||||
?checked=${this.currentFontSize22} |
||||
></mwc-checkbox> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
` |
||||
} |
||||
|
||||
firstUpdated() { |
||||
this.setTimeFormat() |
||||
this.setFontFormat() |
||||
} |
||||
|
||||
setTimeFormat() { |
||||
if (localStorage.getItem('timestampForChats') === 'ago') { |
||||
this.agoTime = true |
||||
this.isoTime = false |
||||
this.bothTime = false |
||||
} else if (localStorage.getItem('timestampForChats') === 'iso') { |
||||
this.agoTime = false |
||||
this.isoTime = true |
||||
this.bothTime = false |
||||
} else if (localStorage.getItem('timestampForChats') === 'both') { |
||||
this.agoTime = false |
||||
this.isoTime = false |
||||
this.bothTime = true |
||||
} |
||||
} |
||||
|
||||
setAgo(e) { |
||||
if (!e.target.checked) { |
||||
window.localStorage.setItem('timestampForChats', 'ago') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setTimeFormat() |
||||
} else { |
||||
window.localStorage.setItem('timestampForChats', 'ago') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setTimeFormat() |
||||
} |
||||
} |
||||
|
||||
setIso(e) { |
||||
if (!e.target.checked) { |
||||
window.localStorage.setItem('timestampForChats', 'iso') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setTimeFormat() |
||||
} else { |
||||
window.localStorage.setItem('timestampForChats', 'ago') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setTimeFormat() |
||||
} |
||||
} |
||||
|
||||
setBoth(e) { |
||||
if (!e.target.checked) { |
||||
window.localStorage.setItem('timestampForChats', 'both') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setTimeFormat() |
||||
} else { |
||||
window.localStorage.setItem('timestampForChats', 'ago') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setTimeFormat() |
||||
} |
||||
} |
||||
|
||||
setFontFormat() { |
||||
if (localStorage.getItem('fontsizeForChats') === 'font16') { |
||||
this.currentFontSize16 = true |
||||
this.currentFontSize18 = false |
||||
this.currentFontSize20 = false |
||||
this.currentFontSize22 = false |
||||
} else if (localStorage.getItem('fontsizeForChats') === 'font18') { |
||||
this.currentFontSize16 = false |
||||
this.currentFontSize18 = true |
||||
this.currentFontSize20 = false |
||||
this.currentFontSize22 = false |
||||
} else if (localStorage.getItem('fontsizeForChats') === 'font20') { |
||||
this.currentFontSize16 = false |
||||
this.currentFontSize18 = false |
||||
this.currentFontSize20 = true |
||||
this.currentFontSize22 = false |
||||
} else if (localStorage.getItem('fontsizeForChats') === 'font22') { |
||||
this.currentFontSize16 = false |
||||
this.currentFontSize18 = false |
||||
this.currentFontSize20 = false |
||||
this.currentFontSize22 = true |
||||
} |
||||
} |
||||
|
||||
setFont16(e) { |
||||
if (!e.target.checked) { |
||||
window.localStorage.setItem('fontsizeForChats', 'font16') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setFontFormat() |
||||
} else { |
||||
window.localStorage.setItem('fontsizeForChats', 'font16') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setFontFormat() |
||||
} |
||||
} |
||||
|
||||
setFont18(e) { |
||||
if (!e.target.checked) { |
||||
window.localStorage.setItem('fontsizeForChats', 'font18') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setFontFormat() |
||||
} else { |
||||
window.localStorage.setItem('fontsizeForChats', 'font16') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setFontFormat() |
||||
} |
||||
} |
||||
|
||||
setFont20(e) { |
||||
if (!e.target.checked) { |
||||
window.localStorage.setItem('fontsizeForChats', 'font20') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setFontFormat() |
||||
} else { |
||||
window.localStorage.setItem('fontsizeForChats', 'font16') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setFontFormat() |
||||
} |
||||
} |
||||
|
||||
setFont22(e) { |
||||
if (!e.target.checked) { |
||||
window.localStorage.setItem('fontsizeForChats', 'font22') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setFontFormat() |
||||
} else { |
||||
window.localStorage.setItem('fontsizeForChats', 'font16') |
||||
window.dispatchEvent( new Event('storage') ) |
||||
this.setFontFormat() |
||||
} |
||||
} |
||||
|
||||
// Standard functions
|
||||
getApiKey() { |
||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] |
||||
return myNode.apiKey |
||||
} |
||||
|
||||
isEmptyArray(arr) { |
||||
if (!arr) { return true } |
||||
return arr.length === 0 |
||||
} |
||||
|
||||
round(number) { |
||||
return (Math.round(parseFloat(number) * 1e8) / 1e8).toFixed(8) |
||||
} |
||||
} |
||||
|
||||
window.customElements.define('chat-right-panel-settings', ChatRightPanelSettings) |
||||
@ -0,0 +1,32 @@
|
||||
const FONT_FAMILY = '"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif' |
||||
|
||||
function makeCtx() { |
||||
const canvas = document.createElement("canvas") |
||||
canvas.width = canvas.height = 1 |
||||
|
||||
const ctx = canvas.getContext("2d", { willReadFrequently: true }) |
||||
|
||||
ctx.textBaseline = "top" |
||||
ctx.font = `100px ${FONT_FAMILY}` |
||||
ctx.scale(0.01, 0.01) |
||||
|
||||
return ctx |
||||
} |
||||
|
||||
function getColor(ctx, text, color) { |
||||
ctx.clearRect(0, 0, 100, 100) |
||||
ctx.fillStyle = color |
||||
ctx.fillText(text, 0, 0) |
||||
|
||||
const bytes = ctx.getImageData(0, 0, 1, 1).data |
||||
|
||||
return bytes.join(",") |
||||
} |
||||
|
||||
export function supportsEmojiFlags(text) { |
||||
const ctx = makeCtx() |
||||
const white = getColor(ctx, text, "#fff") |
||||
const black = getColor(ctx, text, "#000") |
||||
|
||||
return black === white && !black.startsWith("0,0,0,") |
||||
} |
||||
Loading…
Reference in new issue