refactor: btn color theme
This commit is contained in:
parent
5d1639dddf
commit
4e92c06791
10
src/btn.css
10
src/btn.css
|
@ -52,15 +52,19 @@ button {
|
||||||
/* fix `View in LibreScore` button text overflow */
|
/* fix `View in LibreScore` button text overflow */
|
||||||
button:last-of-type {
|
button:last-of-type {
|
||||||
width: unset !important;
|
width: unset !important;
|
||||||
color: #2e68c0;
|
|
||||||
background: #e1effe;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
background: #1a4f9f;
|
background: #1a4f9f;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:last-of-type:hover {
|
/* light theme btn */
|
||||||
|
button.light {
|
||||||
|
color: #2e68c0;
|
||||||
|
background: #e1effe;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.light:hover {
|
||||||
background: #c3ddfd;
|
background: #c3ddfd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -25,16 +25,17 @@ const getBtnContainer = (): HTMLDivElement => {
|
||||||
return btnParent
|
return btnParent
|
||||||
}
|
}
|
||||||
|
|
||||||
const buildDownloadBtn = (icon: ICON) => {
|
const buildDownloadBtn = (icon: ICON, lightTheme = false) => {
|
||||||
const btn = document.createElement('button')
|
const btn = document.createElement('button')
|
||||||
btn.type = 'button'
|
btn.type = 'button'
|
||||||
|
if (lightTheme) btn.className = 'light'
|
||||||
|
|
||||||
// build icon svg element
|
// build icon svg element
|
||||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
|
||||||
svg.setAttribute('viewBox', '0 0 24 24')
|
svg.setAttribute('viewBox', '0 0 24 24')
|
||||||
const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
|
const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
|
||||||
svgPath.setAttribute('d', icon)
|
svgPath.setAttribute('d', icon)
|
||||||
svgPath.setAttribute('fill', icon === ICON.DOWNLOAD ? '#fff' : '#2e68c0')
|
svgPath.setAttribute('fill', lightTheme ? '#2e68c0' : '#fff')
|
||||||
svg.append(svgPath)
|
svg.append(svgPath)
|
||||||
|
|
||||||
const textNode = document.createElement('span')
|
const textNode = document.createElement('span')
|
||||||
|
@ -63,6 +64,7 @@ interface BtnOptions {
|
||||||
readonly disabled?: boolean;
|
readonly disabled?: boolean;
|
||||||
readonly tooltip?: string;
|
readonly tooltip?: string;
|
||||||
readonly icon?: ICON;
|
readonly icon?: ICON;
|
||||||
|
readonly lightTheme?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum BtnListMode {
|
export enum BtnListMode {
|
||||||
|
@ -76,7 +78,7 @@ export class BtnList {
|
||||||
constructor (private getBtnParent: () => HTMLDivElement = getBtnContainer) { }
|
constructor (private getBtnParent: () => HTMLDivElement = getBtnContainer) { }
|
||||||
|
|
||||||
add (options: BtnOptions): BtnElement {
|
add (options: BtnOptions): BtnElement {
|
||||||
const btnTpl = buildDownloadBtn(options.icon ?? ICON.DOWNLOAD)
|
const btnTpl = buildDownloadBtn(options.icon ?? ICON.DOWNLOAD, options.lightTheme)
|
||||||
const setText = (btn: BtnElement) => {
|
const setText = (btn: BtnElement) => {
|
||||||
const textNode = btn.querySelector('span')
|
const textNode = btn.querySelector('span')
|
||||||
return (str: string): void => {
|
return (str: string): void => {
|
||||||
|
|
|
@ -137,8 +137,10 @@ const main = (): void => {
|
||||||
action: BtnAction.openUrl(() => getLibreScoreLink(scoreinfo)),
|
action: BtnAction.openUrl(() => getLibreScoreLink(scoreinfo)),
|
||||||
tooltip: 'BETA',
|
tooltip: 'BETA',
|
||||||
icon: ICON.LIBRESCORE,
|
icon: ICON.LIBRESCORE,
|
||||||
|
lightTheme: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
||||||
btnList.commit(BtnListMode.InPage)
|
btnList.commit(BtnListMode.InPage)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue