GuanM/tabby
1
0
Fork 0
mirror of https://github.com/Eugeny/tabby.git synced 2025-10-05 22:44:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

bootstrap 5 WIP

Browse Source
This commit is contained in:
Eugene Pankov
2023-02-04 20:50:11 +01:00
parent 0a2011acba
commit 153d11cfe2
44 changed files with 244 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tabby-core/package.json
View File

@@ -18,7 +18,7 @@
"license": "MIT",
"devDependencies": {
"@ngx-translate/core": "^14.0.0",
"bootstrap": "^4.1.3",
"bootstrap": "^5.3.0-alpha.1",
"deepmerge": "^4.1.1",
"fuzzy-search": "^3.2.1",
"js-yaml": "^4.0.0",

6
tabby-core/src/components/checkbox.component.ts
View File

@@ -6,9 +6,9 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
@Component({
selector: 'checkbox',
template: `
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" [(ngModel)]='model'>
<label class="custom-control-label">{{text}}</label>
<div class="form-check form-checkbox">
<input type="checkbox" class="form-check-input" [(ngModel)]='model'>
<label class="form-check-label">{{text}}</label>
</div>
`,
providers: [

2
tabby-core/src/components/promptModal.component.pug
View File

@@ -14,6 +14,6 @@
[(ngModel)]='remember',
text='Remember'
)
button.btn.btn-primary.ml-auto(
button.btn.btn-primary.ms-auto(
(click)='ok()',
) OK

12
tabby-core/src/components/selectorModal.component.pug
View File

@@ -21,14 +21,14 @@
[icon]='option.icon',
[color]='option.color'
)
.title.mr-2 {{getOptionText(option)}}
.title.me-2 {{getOptionText(option)}}
.description.no-wrap.text-muted(
*ngIf='option.description !== getOptionText(option)'
) {{option.description}}
.ml-auto
.no-wrap.badge.badge-secondary.text-muted.ml-2(*ngIf='selectedIndex == i && canEditSelected()')
.ms-auto
.no-wrap.badge.text-bg-secondary.text-muted.ms-2(*ngIf='selectedIndex == i && canEditSelected()')
span Backspace
i.fas.fa-pencil.ml-1
.no-wrap.badge.badge-secondary.text-muted.ml-2(*ngIf='selectedIndex == i')
i.fas.fa-pencil.ms-1
.no-wrap.badge.text-bg-secondary.text-muted.ms-2(*ngIf='selectedIndex == i')
span Enter
i.fas.fa-arrow-right.ml-1
i.fas.fa-arrow-right.ms-1

2
tabby-core/src/components/splitTabPaneLabel.component.ts
View File

@@ -15,7 +15,7 @@ import { SelfPositioningComponent } from './selfPositioning.component'
(cdkDragStarted)='onTabDragStart(tab)'
(cdkDragEnded)='onTabDragEnd()'
>
<i class="fa fa-window-maximize mr-3"></i>
<i class="fa fa-window-maximize me-3"></i>
<label>{{tab.title}}</label>
</div>
`,

2
tabby-core/src/components/startPage.component.pug
View File

@@ -12,7 +12,7 @@ div
span {{command.label}}
footer.d-flex.align-items-center
.btn-group.mr-auto
.btn-group.me-auto
button.btn.btn-dark((click)='homeBase.openGitHub()')
i.fab.fa-github
span GitHub

6
tabby-core/src/components/toggle.component.ts
View File

@@ -6,9 +6,9 @@ import { CheckboxComponent } from './checkbox.component'
@Component({
selector: 'toggle',
template: `
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" [(ngModel)]='model'>
<label class="custom-control-label"></label>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" [(ngModel)]='model'>
<label class="cform-check-label"></label>
</div>
`,
styles: [require('./toggle.component.scss')],

2
tabby-core/src/components/transfersMenu.component.pug
View File

@@ -1,6 +1,6 @@
.d-flex.align-items-center
.dropdown-header(translate) File transfers
button.btn.btn-link.ml-auto((click)='removeAll(); $event.stopPropagation()') !{require('../icons/times.svg')}
button.btn.btn-link.ms-auto((click)='removeAll(); $event.stopPropagation()') !{require('../icons/times.svg')}
.transfer(*ngFor='let transfer of transfers', (click)='showTransfer(transfer)')
.icon(*ngIf='isDownload(transfer)') !{require('../icons/download.svg')}
.icon(*ngIf='!isDownload(transfer)') !{require('../icons/upload.svg')}

7
tabby-core/src/components/unlockVaultModal.component.pug
View File

@@ -1,7 +1,7 @@
.modal-body
.d-flex.align-items-center.mb-3
h3.m-0(translate) Vault is locked
.ml-auto(ngbDropdown, placement='bottom-right')
.ms-auto(ngbDropdown, placement='bottom-right')
button.btn.btn-link(ngbDropdownToggle, (click)='$event.stopPropagation()')
span(
*ngIf='rememberFor',
@@ -29,6 +29,5 @@
(keyup.enter)='ok()',
(keyup.esc)='cancel()',
)
.input-group-append
button.btn.btn-secondary((click)='ok()', *ngIf='passphrase')
i.fas.fa-check
button.btn.btn-secondary((click)='ok()', *ngIf='passphrase')
i.fas.fa-check

19
tabby-core/src/theme.paper.scss
View File

@@ -19,10 +19,9 @@ $tab-border-radius: 5px;
$button-hover-bg: rgba(0, 0, 0, .125);
$button-active-bg: rgba(0, 0, 0, .25);
$theme-colors: (
"primary": $orange,
"secondary": $base0
);
$primary: #fd7e14;
$secondary: #495057;
$content-bg: rgba($white, 0.65);
$content-bg-solid: $white;
@@ -257,8 +256,8 @@ multi-hotkey-input {
}
.item:has(.duplicate) {
background-color: theme-color('danger');
border: 1px solid theme-color('danger');
background-color: map-get($theme-colors, 'danger');
border: 1px solid map-get($theme-colors, 'danger');
}
.add {
@@ -272,8 +271,8 @@ multi-hotkey-input {
}
.add:has(.duplicate), .item:has(.duplicate) .body, .item:has(.duplicate) .remove {
&:hover { background: darken(theme-color('danger'), 5%); }
&:active { background: darken(theme-color('danger'), 15%); }
&:hover { background: darken(map-get($theme-colors, 'danger'), 5%); }
&:active { background: darken(map-get($theme-colors, 'danger'), 15%); }
}
}
@@ -303,7 +302,7 @@ hotkey-input-modal {
}
}
.form-group label {
.mb-3 label {
margin-bottom: 2px;
}
@@ -370,7 +369,7 @@ toggle {
}
&.active .body .toggle {
background: theme-colors(primary) !important;
background: map-get($theme-colors, primary) !important;
}
}

16
tabby-core/src/theme.scss
View File

@@ -163,8 +163,8 @@ multi-hotkey-input {
}
.item:has(.duplicate) {
background-color: theme-color('danger');
border: 1px solid theme-color('danger');
background-color: map-get($theme-colors, 'danger');
border: 1px solid map-get($theme-colors, 'danger');
}
.add {
@@ -178,8 +178,8 @@ multi-hotkey-input {
}
.add:has(.duplicate), .item:has(.duplicate) .body, .item:has(.duplicate) .remove {
&:hover { background: darken(theme-color('danger'), 5%); }
&:active { background: darken(theme-color('danger'), 15%); }
&:hover { background: darken(map-get($theme-colors, 'danger'), 5%); }
&:active { background: darken(map-get($theme-colors, 'danger'), 15%); }
}
}
@@ -209,7 +209,7 @@ hotkey-input-modal {
}
}
.form-group label {
.mb-3 label {
margin-bottom: 2px;
}
@@ -375,9 +375,9 @@ search-panel {
font-size: 18px;
}
@include hover-focus {
color: $nav-tabs-link-active-color;
}
// @include hover-focus {
// color: $nav-tabs-link-active-color;
// }
&.disabled {
color: $nav-link-disabled-color;

13
tabby-core/src/theme.vars.scss
View File

@@ -175,13 +175,12 @@ $badge-padding-y: 4px;
$badge-padding-x: 6px;
$custom-control-indicator-size: 1.2rem;
$custom-control-indicator-bg: $body-bg;
$custom-control-indicator-border-color: lighten($body-bg, 25%);
$custom-control-indicator-checked-bg: theme-color("primary");
$custom-control-indicator-checked-color: $body-bg;
$custom-control-indicator-checked-border-color: transparent;
$custom-control-indicator-active-bg: rgba(255, 255, 0, 0.5);
$form-check-input-border: lighten($body-bg, 25%);
$form-check-input-width: 1.4em;
$form-switch-width: 2.5em;
$form-switch-color: lighten($body-bg, 25%);
$form-switch-focus-color: lighten($body-bg, 40%);
$form-switch-checked-color: map-get($theme-colors, "primary");
$modal-content-bg: $content-bg-solid;

8
tabby-core/yarn.lock
View File

@@ -33,10 +33,10 @@ base64-js@^1.3.1:
resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
bootstrap@^4.1.3:
version "4.5.3"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.3.tgz#c6a72b355aaf323920be800246a6e4ef30997fe6"
integrity sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ==
bootstrap@^5.3.0-alpha.1:
version "5.3.0-alpha1"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.0-alpha1.tgz#380629c4367893f02f7879a01ea3ae0f94e2e70e"
integrity sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==
buffer@^6.0.3:
version "6.0.3"