Compare commits

...

5 Commits

Author SHA1 Message Date
Eugene Pankov
2a8b7c3e79 fixed #8124 - animation toggle didn't affect pane maximizing 2023-03-21 21:03:14 +01:00
Eugene Pankov
9a6e684f9e added minimum contrast ratio support to the theme 2023-03-21 20:55:31 +01:00
Eugene Pankov
1ebf29a977 Merge branch 'master' of github.com:Eugeny/tabby 2023-03-21 19:35:27 +01:00
Eugene Pankov
0cd856b51f replaced hashbin with which 2023-03-21 17:24:56 +01:00
Eugene Pankov
307b4ea266 removed unused ngbDropdown directives 2023-03-21 15:55:03 +01:00
8 changed files with 73 additions and 29 deletions

View File

@@ -37,14 +37,12 @@ title-bar(
.btn-group.background
.d-flex(
*ngFor='let button of leftToolbarButtons',
ngbDropdown
*ngFor='let button of leftToolbarButtons'
)
button.btn.btn-secondary.btn-tab-bar(
[title]='button.label',
(click)='button.run && button.run()',
[fastHtmlBind]='button.icon',
ngbDropdownToggle,
[fastHtmlBind]='button.icon'
)
.d-flex(
@@ -67,14 +65,12 @@ title-bar(
.btn-group.background
.d-flex(
*ngFor='let button of rightToolbarButtons',
ngbDropdown
*ngFor='let button of rightToolbarButtons'
)
button.btn.btn-secondary.btn-tab-bar(
[title]='button.label',
(click)='button.run && button.run()',
[fastHtmlBind]='button.icon',
ngbDropdownToggle,
[fastHtmlBind]='button.icon'
)
button.btn.btn-secondary.btn-tab-bar.btn-update(

View File

@@ -24,3 +24,7 @@
border-radius: 10px;
}
}
::ng-deep .no-animations split-tab > .child {
transition: none;
}

View File

@@ -26,9 +26,9 @@ export class ThemesService {
this.applyThemeVariables()
config.changed$.subscribe(() => {
this.applyCurrentTheme()
this.applyThemeVariables()
})
})
config.changed$.subscribe(() => this.applyThemeVariables())
}
private applyThemeVariables () {
@@ -62,6 +62,7 @@ export class ThemesService {
// const backgroundMore =more(theme.background, 0.25).string()
const accentIndex = 4
const vars: Record<string, string> = {}
const contrastPairs: string[][] = []
if (this.findCurrentTheme().followsColorScheme) {
vars['--bs-body-bg'] = background.string()
@@ -82,6 +83,8 @@ export class ThemesService {
// vars['--bs-purple'] = theme.colors[13]
// vars['--bs-cyan'] = theme.colors[14]
contrastPairs.push(['--bs-body-bg', '--bs-body-color'])
vars['--theme-fg-more-2'] = more(theme.foreground, 0.5).string()
vars['--theme-fg-more'] = more(theme.foreground, 0.25).string()
vars['--theme-fg'] = theme.foreground
@@ -94,6 +97,12 @@ export class ThemesService {
vars['--theme-bg-more'] = backgroundMore
vars['--theme-bg-more-2'] = more(backgroundMore, 0.25).string()
contrastPairs.push(['--theme-bg', '--theme-fg'])
contrastPairs.push(['--theme-bg-less', '--theme-fg-less'])
contrastPairs.push(['--theme-bg-less-2', '--theme-fg-less-2'])
contrastPairs.push(['--theme-bg-more', '--theme-fg-more'])
contrastPairs.push(['--theme-bg-more-2', '--theme-fg-more-2'])
const themeColors = {
primary: theme.colors[accentIndex],
secondary: theme.colors[8],
@@ -117,6 +126,9 @@ export class ThemesService {
vars[`--theme-${key}`] = color
vars[`--theme-${key}-less`] = less(color, 0.25).string()
vars[`--theme-${key}-less-2`] = less(color, 0.75).string()
vars[`--theme-${key}-fg`] = more(color, 1).string()
contrastPairs.push([`--theme-${key}`, `--theme-${key}-fg`])
}
const switchBackground = less(theme.colors[accentIndex], 0.25).string()
@@ -125,9 +137,29 @@ export class ThemesService {
vars['--spaciness'] = this.config.store.appearance.spaciness
for (const [bg, fg] of contrastPairs) {
const colorBg = Color(vars[bg]).hsl()
const colorFg = Color(vars[fg]).hsl()
const bgContrast = colorBg.contrast(colorFg)
const isLightBG = colorBg.luminosity() > colorFg.luminosity()
if (bgContrast < this.config.store.terminal.minimumContrastRatio) {
const targetLuminosityDarkFG = (colorBg.luminosity() + 0.05) / this.config.store.terminal.minimumContrastRatio - 0.05
const targetLuminosityLightFG = (colorBg.luminosity() + 0.05) * this.config.store.terminal.minimumContrastRatio - 0.05
let candidateLuminosities = isLightBG ? [targetLuminosityDarkFG, targetLuminosityLightFG] : [targetLuminosityLightFG, targetLuminosityDarkFG]
candidateLuminosities = candidateLuminosities.map(x => Math.max(0, Math.min(1, x)))
const targetLuminosity = candidateLuminosities.reduce((a, b) => Math.abs(b - colorBg.luminosity()) < Math.abs(a - colorBg.luminosity()) ? a : b, colorFg.color[2] / 100)
colorFg.color[2] = targetLuminosity * 100
vars[fg] = colorFg
}
}
for (const [key, value] of Object.entries(vars)) {
document.documentElement.style.setProperty(key, value)
}
document.body.classList.toggle('no-animations', !this.config.store.accessibility.animations)
}
findTheme (name: string): Theme|null {

View File

@@ -195,14 +195,14 @@ tab-body {
--bs-btn-focus-shadow-rgb: 130, 138, 145;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-color: var(--theme-#{$color}-more-2);
--bs-btn-hover-color: var(--theme-#{$color}-more-2);
--bs-btn-active-color: var(--theme-#{$color}-more-2);
--bs-btn-disabled-color: var(--theme-#{$color}-more-2);
--bs-btn-color: var(--theme-#{$color}-fg);
--bs-btn-hover-color: var(--theme-#{$color}-fg);
--bs-btn-active-color: var(--theme-#{$color}-fg);
--bs-btn-disabled-color: var(--theme-#{$color}-fg);
}
.alert-#{$color} {
--bs-alert-bg: var(--theme-#{$color}-more-2);
--bs-alert-bg: var(--theme-#{$color}-fg);
--bs-alert-border-color: var(--theme-#{$color}-more);
--bs-alert-color: var(--theme-#{$color});
}

View File

@@ -24,7 +24,7 @@
"electron-promise-ipc": "^2.2.4",
"ps-node": "^0.1.6",
"tmp-promise": "^3.0.2",
"hasbin": "^1.2.3",
"which": "^3.0.0",
"winston": "^3.3.3"
}
}

View File

@@ -1,6 +1,6 @@
import * as path from 'path'
import * as fs from 'fs/promises'
import hasbin from 'hasbin'
import * as which from 'which'
import { Injectable } from '@angular/core'
import { HostAppService, Platform, ConfigService } from 'tabby-core'
import { ElectronService } from '../services/electron.service'
@@ -73,7 +73,7 @@ export class WindowsStockShellsProvider extends WindowsBaseShellProvider {
private async getPowerShellPath () {
for (const name of ['pwsh.exe', 'powershell.exe']) {
if (await new Promise(resolve => hasbin(name, resolve))) {
if (await which(name, { nothrow: true })) {
return name
}
}

View File

@@ -21,11 +21,6 @@ async@^3.2.3:
resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9"
integrity sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==
async@~1.5:
version "1.5.2"
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
integrity sha512-nSVgobk4rv61R9PUSDtYt7mPVB2olxNR5RWJcAsH676/ef11bUZwvu7+RGYrYauVdDPcO519v68wRhXQtxsV9w==
balanced-match@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -209,13 +204,6 @@ has@^1.0.3:
dependencies:
function-bind "^1.1.1"
hasbin@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/hasbin/-/hasbin-1.2.3.tgz#78c5926893c80215c2b568ae1fd3fcab7a2696b0"
integrity sha512-CCd8e/w2w28G8DyZvKgiHnQJ/5XXDz6qiUHnthvtag/6T5acUeN5lqq+HMoBqcmgWueWDhiCplrw0Kb1zDACRg==
dependencies:
async "~1.5"
inflight@^1.0.4:
version "1.0.6"
resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -296,6 +284,11 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
dependencies:
has-symbols "^1.0.2"
isexe@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
kuler@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/kuler/-/kuler-2.0.0.tgz#e2c570a3800388fb44407e851531c1d670b061b3"
@@ -515,6 +508,13 @@ which-boxed-primitive@^1.0.2:
is-string "^1.0.5"
is-symbol "^1.0.3"
which@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/which/-/which-3.0.0.tgz#a9efd016db59728758a390d23f1687b6e8f59f8e"
integrity sha512-nla//68K9NU6yRiwDY/Q8aU6siKlSs64aEC7+IV56QoAuyQT2ovsJcgGYGyqMOmI/CGN1BOR6mM5EN0FBO+zyQ==
dependencies:
isexe "^2.0.0"
winston-transport@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/winston-transport/-/winston-transport-4.5.0.tgz#6e7b0dd04d393171ed5e4e4905db265f7ab384fa"

View File

@@ -114,6 +114,18 @@
.title(translate) Enable animations
toggle([(ngModel)]='config.store.accessibility.animations', (ngModelChange)='saveConfiguration()')
.form-line
.header
.title(translate) Minimum contrast ratio
input.form-control(
type='number',
min='1',
max='21',
step='0.5',
[(ngModel)]='config.store.terminal.minimumContrastRatio',
(ngModelChange)='config.save()'
)
ng-container(*ngFor='let provider of settingsProviders')
li(*ngIf='provider.prioritized', [ngbNavItem]='provider.id')
a.d-flex.align-items-center(ngbNavLink)