GuanM/tabby
1
0
Fork 0
mirror of https://github.com/Eugeny/tabby.git synced 2025-07-18 09:30:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Eugene Pankov 2023-02-20 11:38:34 +01:00
parent 921214dd09
commit 4943e2cd5e
No known key found for this signature in database
GPG Key ID: 5896FCBBDD1CF4F4
6 changed files with 290 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
tabby-core/package.json
View File

@ -18,6 +18,7 @@
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"bootstrap": "^5.3.0-alpha.1", "bootstrap": "^5.3.0-alpha.1",
"color": "^4.2.3",
"deepmerge": "^4.1.1", "deepmerge": "^4.1.1",
"fuzzy-search": "^3.2.1", "fuzzy-search": "^3.2.1",
"js-yaml": "^4.0.0", "js-yaml": "^4.0.0",

11
tabby-core/src/components/selfPositioning.component.ts
View File

@ -1,11 +1,12 @@
import { HostBinding, ElementRef } from '@angular/core' import { HostBinding, ElementRef, Component } from '@angular/core'
import { BaseComponent } from './base.component' import { BaseComponent } from './base.component'
@Component({})
export abstract class SelfPositioningComponent extends BaseComponent { export abstract class SelfPositioningComponent extends BaseComponent {
@HostBinding('style.left') cssLeft: string @HostBinding('style.left') cssLeft = ''
@HostBinding('style.top') cssTop: string @HostBinding('style.top') cssTop = ''
@HostBinding('style.width') cssWidth: string | null @HostBinding('style.width') cssWidth: string | null = null
@HostBinding('style.height') cssHeight: string | null @HostBinding('style.height') cssHeight: string | null = null
constructor (protected element: ElementRef) { super() } constructor (protected element: ElementRef) { super() }

42
tabby-core/src/services/themes.service.ts
View File

@ -1,5 +1,6 @@
import { Inject, Injectable } from '@angular/core' import { Inject, Injectable } from '@angular/core'
import { Subject, Observable } from 'rxjs' import { Subject, Observable } from 'rxjs'
import * as Color from 'color'
import { ConfigService } from '../services/config.service' import { ConfigService } from '../services/config.service'
import { Theme } from '../api/theme' import { Theme } from '../api/theme'
@ -28,24 +29,45 @@ export class ThemesService {
private applyThemeVariables () { private applyThemeVariables () {
const theme = this.config.store.terminal.colorScheme const theme = this.config.store.terminal.colorScheme
document.documentElement.style.setProperty('--bs-body-bg', this.config.store?.appearance.vibrancy ? 'rgba(255, 255, 255,.4)' : theme.background) const background = this.config.store?.appearance.vibrancy ? 'rgba(255, 255, 255,.4)' : theme.background
const backgroundDark = this.config.store?.appearance.vibrancy ? 'rgba(255, 255, 255,.5)' : Color(theme.background).darken(0.25).string()
const accentIndex = 4
document.documentElement.style.setProperty('--bs-body-bg', background)
document.documentElement.style.setProperty('--bs-body-color', theme.foreground) document.documentElement.style.setProperty('--bs-body-color', theme.foreground)
document.documentElement.style.setProperty('--bs-black', theme.colors[0]) document.documentElement.style.setProperty('--bs-black', theme.colors[0])
document.documentElement.style.setProperty('--bs-blue', theme.colors[1]) document.documentElement.style.setProperty('--bs-red', theme.colors[1])
document.documentElement.style.setProperty('--bs-green', theme.colors[2]) document.documentElement.style.setProperty('--bs-green', theme.colors[2])
document.documentElement.style.setProperty('--bs-cyan', theme.colors[3]) document.documentElement.style.setProperty('--bs-yellow', theme.colors[3])
document.documentElement.style.setProperty('--bs-red', theme.colors[4]) document.documentElement.style.setProperty('--bs-blue', theme.colors[4])
document.documentElement.style.setProperty('--bs-purple', theme.colors[5]) document.documentElement.style.setProperty('--bs-purple', theme.colors[5])
document.documentElement.style.setProperty('--bs-yellow', theme.colors[6]) document.documentElement.style.setProperty('--bs-cyan', theme.colors[6])
document.documentElement.style.setProperty('--bs-gray', theme.colors[7]) document.documentElement.style.setProperty('--bs-gray', theme.colors[7])
document.documentElement.style.setProperty('--bs-gray-dark', theme.colors[8]) document.documentElement.style.setProperty('--bs-gray-dark', theme.colors[8])
// document.documentElement.style.setProperty('--bs-blue', theme.colors[9]) // document.documentElement.style.setProperty('--bs-red', theme.colors[9])
// document.documentElement.style.setProperty('--bs-green', theme.colors[10]) // document.documentElement.style.setProperty('--bs-green', theme.colors[10])
// document.documentElement.style.setProperty('--bs-cyan', theme.colors[11]) // document.documentElement.style.setProperty('--bs-yellow', theme.colors[11])
// document.documentElement.style.setProperty('--bs-red', theme.colors[12]) // document.documentElement.style.setProperty('--bs-blue', theme.colors[12])
// document.documentElement.style.setProperty('--bs-purple', theme.colors[13]) // document.documentElement.style.setProperty('--bs-purple', theme.colors[13])
// document.documentElement.style.setProperty('--bs-yellow', theme.colors[14]) // document.documentElement.style.setProperty('--bs-cyan', theme.colors[14])
document.documentElement.style.setProperty('--bs-white', theme.colors[15])
document.documentElement.style.setProperty('--theme-fg-light', Color(theme.foreground).lighten(0.25).string())
document.documentElement.style.setProperty('--theme-bg-dark', backgroundDark)
document.documentElement.style.setProperty('--theme-bg-darker', Color(backgroundDark).darken(0.25).string())
for (const [color, index] of Object.entries({
primary: accentIndex,
secondary: 8,
warning: 3,
danger: 1,
success: 2,
dark: 0,
light: 15,
})) {
document.documentElement.style.setProperty(`--bs-${color}`, theme.colors[index])
document.documentElement.style.setProperty(`--theme-${color}`, theme.colors[index])
document.documentElement.style.setProperty(`--theme-${color}-dark`, Color(theme.colors[index]).darken(0.25).string())
document.documentElement.style.setProperty(`--theme-${color}-darker`, Color(theme.colors[index]).darken(0.5).string())
}
} }
findTheme (name: string): Theme|null { findTheme (name: string): Theme|null {

386
tabby-core/src/theme.new.scss
View File

@ -6,7 +6,7 @@ app-root {
&> .content { &> .content {
.tab-bar { .tab-bar {
background: var(--bs-gray-dark); background: var(--theme-bg-dark);
.btn-tab-bar { .btn-tab-bar {
background: transparent; background: transparent;
@ -158,18 +158,9 @@ $tab-border-radius: 5px;
// $dropdown-link-disabled-color: #333; // $dropdown-link-disabled-color: #333;
// $dropdown-header-color: #333; // $dropdown-header-color: #333;
// $list-group-color: $body-color;
// $list-group-bg: rgba($black,.05);
// $list-group-border-color: rgba($black,.1);
// $list-group-hover-bg: rgba($black,.1);
// $list-group-link-active-bg: rgba($black,.2);
// $list-group-action-color: $body-color;
// $list-group-action-bg: rgba($black,.05); // $list-group-action-bg: rgba($black,.05);
// $list-group-action-active-bg: $list-group-link-active-bg; // $list-group-action-active-bg: $list-group-link-active-bg;
// $list-group-border-radius: 0;
// $pre-bg: $dropdown-bg; // $pre-bg: $dropdown-bg;
// $pre-color: $dropdown-link-color; // $pre-color: $dropdown-link-color;
@ -180,6 +171,24 @@ $tab-border-radius: 5px;
@import "./theme.vendor.scss"; @import "./theme.vendor.scss";
.list-group {
--bs-list-group-bg: var(--theme-bg-dark);
--bs-list-group-border-color: var(--theme-bg-darker);
--bs-list-group-border-width: 0;
// --bs-list-group-item-padding-x: 1rem;
// --bs-list-group-item-padding-y: 0.5rem;
--bs-list-group-action-color: var(--bs-body-color);
--bs-list-group-action-hover-color: var(--theme-fg);
--bs-list-group-action-hover-bg: var(--theme-bg-darker);
--bs-list-group-action-active-color: var(--theme-fg);
--bs-list-group-action-active-bg: var(--theme-bg-darker);
--bs-list-group-disabled-color: var(--bs-secondary-color);
--bs-list-group-disabled-bg: var(--bs-body-bg);
// --bs-list-group-active-color: #fff;
// --bs-list-group-active-bg: #0d6efd;
// --bs-list-group-active-border-color: #0d6efd;
}
.nav { .nav {
// scss-docs-start nav-css-vars // scss-docs-start nav-css-vars
@ -188,7 +197,7 @@ $tab-border-radius: 5px;
// @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size); // @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
// --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight}; // --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
--#{$prefix}nav-link-color: var(--bs-body-color); --#{$prefix}nav-link-color: var(--bs-body-color);
--#{$prefix}nav-link-hover-color: var(--bs-white); --#{$prefix}nav-link-hover-color: var(--theme-fg-light);
--#{$prefix}nav-link-disabled-color: var(--bs-gray); --#{$prefix}nav-link-disabled-color: var(--bs-gray);
// scss-docs-end nav-css-vars // scss-docs-end nav-css-vars
} }
@ -209,8 +218,8 @@ $tab-border-radius: 5px;
.nav-pills { .nav-pills {
// scss-docs-start nav-pills-css-vars // scss-docs-start nav-pills-css-vars
--#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius}; --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color}; --#{$prefix}nav-pills-link-active-color: var(--theme-light);
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg}; --#{$prefix}nav-pills-link-active-bg: var(--bs-primary);
// scss-docs-end nav-pills-css-vars // scss-docs-end nav-pills-css-vars
} }
@ -252,147 +261,170 @@ $tab-border-radius: 5px;
} }
// tab-body { tab-body {
// background: $content-bg; terminal-toolbar {
background: var(--bs-body-bg);
// terminal-toolbar .btn, .toolbar-pin-button { .btn, .toolbar-pin-button {
// font-weight: bold; font-weight: bold;
// } }
// } }
}
// multi-hotkey-input { @each $color, $value in $theme-colors {
// .item { .btn-#{$color} {
// background: $body-bg2; // 6c757d
// border: 1px solid $blue; --bs-btn-bg: var(--theme-#{$color});
// border-radius: 3px; --bs-btn-border-color: var(--theme-#{$color});
// margin-right: 5px; --bs-btn-disabled-bg: var(--theme-#{$color});
--bs-btn-disabled-border-color: var(--theme-#{$color});
// .body { --bs-btn-hover-border-color: var(--theme-#{$color}-dark);
// padding: 3px 0 2px; --bs-btn-hover-bg: var(--theme-#{$color}-dark);
// .stroke { --bs-btn-active-border-color: var(--theme-#{$color}-darker);
// padding: 0 6px; --bs-btn-active-bg: var(--theme-#{$color}-darker);
// border-right: 1px solid $content-bg;
// }
// }
// .remove {
// padding: 3px 8px 2px;
// }
// }
// .item:has(.duplicate) { --bs-btn-color: #fff;
// background-color: map-get($theme-colors, 'danger'); --bs-btn-hover-color: #fff;
// border: 1px solid map-get($theme-colors, 'danger'); --bs-btn-focus-shadow-rgb: 130, 138, 145;
// } --bs-btn-active-color: #fff;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
}
}
// .add {
// color: #777;
// padding: 4px 10px 0;
// }
// .add, .item .body, .item .remove { multi-hotkey-input {
// &:hover { background: darken($body-bg2, 5%); } .item {
// &:active { background: darken($body-bg2, 15%); } background: var(--theme-bg-dark);
// } border: 1px solid var(--bs-primary);
border-radius: 3px;
margin-right: 5px;
// .add:has(.duplicate), .item:has(.duplicate) .body, .item:has(.duplicate) .remove { .body {
// &:hover { background: darken(map-get($theme-colors, 'danger'), 5%); } padding: 3px 0 2px;
// &:active { background: darken(map-get($theme-colors, 'danger'), 15%); }
// }
// }
// hotkey-input-modal { .stroke {
// .input { padding: 0 6px;
// background: $input-bg; border-right: 1px solid var(--bs-body-bg);
// padding: 10px; }
// font-size: 24px; }
// line-height: 27px;
// height: 55px;
// .stroke { .remove {
// background: $body-bg2; padding: 3px 8px 2px;
// border: 1px solid $blue; }
// border-radius: 3px; }
// margin-right: 10px;
// padding: 3px 10px;
// }
// }
// .timeout { .item:has(.duplicate) {
// background: $input-bg; background-color: var(--bs-danger);
border: 1px solid var(--bs-danger);
}
// div { .add {
// background: $blue; color: #777;
// } padding: 4px 10px 0;
// } }
// }
// .mb-3 label { .add, .item .body, .item .remove {
// margin-bottom: 2px; &:hover { background: var(--theme-bg-dark); }
// } &:active { background: var(--theme-bg-darker); }
}
// .btn-check:checked + label { .add:has(.duplicate), .item:has(.duplicate) .body, .item:has(.duplicate) .remove {
// background: $blue; &:hover { background: var(--theme-danger-dark); }
// } &:active { background: var(--theme-danger-darker); }
}
}
// .btn { hotkey-input-modal {
// i + * { .input {
// margin-left: 5px; // background: $input-bg;
// } padding: 10px;
font-size: 24px;
line-height: 27px;
height: 55px;
// &.btn-lg i + * { .stroke {
// margin-left: 10px; background: var(--theme-bg-dark);
// } border: 1px solid var(--bs-primary);
// } border-radius: 3px;
margin-right: 10px;
padding: 3px 10px;
}
}
// .input-group-addon + .form-control { .timeout {
// border-left: none; background: $input-bg;
// }
// .input-group > select.form-control { div {
// flex-direction: row; background: $blue;
// } }
}
}
// .list-group-item { .mb-3 label {
// // transition: 0.0625s background ease; margin-bottom: 2px;
}
// i + * { .btn {
// margin-left: 10px; i + * {
// } margin-left: 5px;
// } }
// .list-group.list-group-flush .list-group-item { &.btn-lg i + * {
// background: transparent; margin-left: 10px;
// border: none; }
}
// &:not(:last-child) { .input-group-addon + .form-control {
// border-bottom: none; border-left: none;
// } }
// &.list-group-item-action { .input-group > select.form-control {
// &:hover, &.active { flex-direction: row;
// background: $list-group-hover-bg; }
// }
// }
// }
// .list-group-light { .list-group-item {
// .list-group-item { // transition: 0.0625s background ease;
// border: none !important;
// outline: none !important;
// background: transparent;
// border-radius: $border-radius;
// margin: 0 !important;
// &.list-group-item-action { i + * {
// &:hover, &.active { margin-left: 10px;
// background: $component-active-bg; }
// color: $component-active-color; }
// }
// } .list-group.list-group-flush .list-group-item {
// } background: transparent;
// } border: none;
&:not(:last-child) {
border-bottom: none;
}
&.list-group-item-action {
&:hover, &.active {
// background: $list-group-hover-bg;
}
}
}
.list-group-light {
.list-group-item {
border: none !important;
outline: none !important;
background: transparent;
border-radius: $border-radius;
margin: 0 !important;
&.list-group-item-action {
&:hover, &.active {
background: var(--bs-primary);
color: var(--bs-body-color);
}
}
}
}
// checkbox i.on { // checkbox i.on {
// color: $blue; // color: $blue;
@ -407,58 +439,45 @@ $tab-border-radius: 5px;
// } // }
// } // }
// .list-group-item svg { .list-group-item svg {
// fill: white; fill: var(--bs-body-color);
// fill-opacity: 0.75; fill-opacity: 0.75;
// } }
// *::-webkit-scrollbar { *::-webkit-scrollbar {
// background: rgba(0, 0, 0, .125); background: rgba(0, 0, 0, .125);
// width: 10px; width: 10px;
// margin: 5px; margin: 5px;
// } }
// *::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
// background: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .25);
// } }
// *::-webkit-scrollbar-corner, *::-webkit-scrollbar-corner,
// *::-webkit-resizer { *::-webkit-resizer {
// opacity: 0; opacity: 0;
// } }
// search-panel { search-panel {
// background: #131d27 !important; background: var(--theme-bg-dark) !important;
// input { input {
// border-radius: 0 !important; border-radius: 0 !important;
// } }
// } }
// .btn { .btn {
// cursor: pointer; cursor: pointer;
// justify-content: flex-start; justify-content: flex-start;
// overflow: hidden; overflow: hidden;
// &.disabled, &.disabled,
// &:disabled { &:disabled {
// cursor: not-allowed; cursor: not-allowed;
// } }
// } }
// .btn-warning:not(:disabled):not(.disabled) {
// &.active, &:active {
// color: $gray-900;
// }
// }
// .btn-secondary:not(:disabled):not(.disabled) {
// &.active, &:active {
// background: #191e23;
// align-items: center;
// }
// }
// .btn-link { // .btn-link {
// text-decoration: none; // text-decoration: none;
@ -486,14 +505,19 @@ $tab-border-radius: 5px;
// box-shadow: $dropdown-box-shadow; // box-shadow: $dropdown-box-shadow;
// } // }
// ngx-colors-panel .opened { ngx-colors-panel .opened {
// background: $body-bg !important; background: var(--bs-body-bg) !important;
// button { button {
// color: $body-color !important; color: var(--bs-body-color) !important;
// } }
// .button svg { .button svg {
// fill: white; fill: white;
// } }
// } }
.text-muted {
color: var(--bs-body-color) !important;
opacity: .5;
}

40
tabby-core/yarn.lock
View File

@ -39,6 +39,34 @@ buffer@^6.0.3:
base64-js "^1.3.1" base64-js "^1.3.1"
ieee754 "^1.2.1" ieee754 "^1.2.1"
color-convert@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
dependencies:
color-name "~1.1.4"
color-name@^1.0.0, color-name@~1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
color-string@^1.9.0:
version "1.9.1"
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
dependencies:
color-name "^1.0.0"
simple-swizzle "^0.2.2"
color@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
dependencies:
color-convert "^2.0.1"
color-string "^1.9.0"
debug@4: debug@4:
version "4.3.1" version "4.3.1"
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee" resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
@ -79,6 +107,11 @@ ieee754@^1.2.1:
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA== integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
is-arrayish@^0.3.1:
version "0.3.2"
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
js-yaml@^4.0.0: js-yaml@^4.0.0:
version "4.1.0" version "4.1.0"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
@ -151,6 +184,13 @@ readable-stream@4.2.0:
events "^3.3.0" events "^3.3.0"
process "^0.11.10" process "^0.11.10"
simple-swizzle@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
dependencies:
is-arrayish "^0.3.1"
tslib@^1.10.0: tslib@^1.10.0:
version "1.14.1" version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"

13
tabby-terminal/src/components/terminalToolbar.component.scss
View File

@ -1,8 +1,13 @@
:host { :host {
background: #000000bf;
padding: 5px 15px 5px 15px; padding: 5px 15px 5px 15px;
display: flex; display: flex;
z-index: 3; z-index: 3;
::ng-deep .btn {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
} }
.content { .content {
@ -16,9 +21,3 @@
cursor: move; cursor: move;
opacity: .3; opacity: .3;
} }
::ng-deep .btn {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}