From c18936f6e50198f801a50d11822c6671ce57827a Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Wed, 18 Jan 2017 22:13:50 +0100 Subject: [PATCH] removed titlebar --- app/src/components/app.less | 73 ++++++++++++------------------------- app/src/components/app.pug | 20 ++++------ 2 files changed, 32 insertions(+), 61 deletions(-) diff --git a/app/src/components/app.less b/app/src/components/app.less index 38c2924b..254192a0 100644 --- a/app/src/components/app.less +++ b/app/src/components/app.less @@ -13,7 +13,6 @@ background: @body-bg; } -@titlebar-height: 35px; @tabs-height: 40px; @tab-border-radius: 4px; @@ -29,35 +28,6 @@ } } -.titlebar { - height: @titlebar-height; - background: #141c23; - flex: none; - display: flex; - flex-direction: row; - - .title { - flex: auto; - padding-left: 15px; - line-height: @titlebar-height; - -webkit-app-region: drag; - } - - .btn-minimize, .btn-maximize, .btn-close { - flex: none; - line-height: @titlebar-height - 2px; - padding: 0 15px; - font-size: 8px; - - .button-states(); - cursor: pointer; - } - - .btn-close { - font-size: 12px; - } -} - .tabs { flex: none; height: @tabs-height; @@ -66,28 +36,29 @@ display: flex; flex-direction: row; - .btn-settings, .btn-new-tab, .tab { - line-height: @tabs-height - 2px; - cursor: pointer; - } - - .btn-new-tab, .btn-settings { - padding: 0 15px; + &>button { + border: none; flex: none; - flex-grow: 0; - border-bottom: 2px solid transparent; - transition: 0.25s all; - - text-transform: uppercase; - font-weight: bold; - color: #888; + line-height: @tabs-height; + padding: 0 15px; + font-size: 8px; background: #141c23; - i { - margin-right: 10px; + .button-states(); + cursor: pointer; + + &.btn-close { + font-size: 12px; } - .button-states(); + &.btn-new-tab { + border-bottom-left-radius: @tab-border-radius; + font-size: 14px; + } + + &.btn-settings { + font-size: 14px; + } } .tab { @@ -95,6 +66,12 @@ flex-basis: 0; flex-grow: 1000; + &:active { + -webkit-app-region: drag; + } + + line-height: @tabs-height - 2px; + display: flex; overflow: hidden; min-width: 0; @@ -180,8 +157,6 @@ .content-wrapper { //border-bottom: 2px solid #69bbea; background: @body-bg; - border-top-left-radius: @tab-border-radius; - border-top-right-radius: @tab-border-radius; } } } diff --git a/app/src/components/app.pug b/app/src/components/app.pug index 5e62f9e7..32de80b5 100644 --- a/app/src/components/app.pug +++ b/app/src/components/app.pug @@ -1,12 +1,3 @@ -.titlebar - .title((dblclick)='hostApp.maximizeWindow()') Term - .btn-minimize((click)='hostApp.minimizeWindow()') - i.fa.fa-window-minimize - .btn-maximize((click)='hostApp.maximizeWindow()') - i.fa.fa-window-maximize - .btn-close((click)='hostApp.quit()') - i.fa.fa-close - .tabs .tab( *ngFor='let tab of tabs; let idx = index; trackBy: tab?.id', @@ -20,11 +11,16 @@ div.index {{idx + 1}} div.name {{tab.name || 'Terminal'}} button((click)='closeTab(tab)') × - .btn-new-tab((click)='newTab()') + button.btn-new-tab((click)='newTab()') i.fa.fa-plus - span Tab - .btn-settings((click)='showSettings()') + button.btn-settings((click)='showSettings()') i.fa.fa-cog + button.btn-minimize((click)='hostApp.minimizeWindow()') + i.fa.fa-window-minimize + button.btn-maximize((click)='hostApp.maximizeWindow()') + i.fa.fa-window-maximize + button.btn-close((click)='hostApp.quit()') + i.fa.fa-close .tabs-content .tab(*ngFor='let tab of tabs; trackBy: tab?.id', [class.active]='tab == activeTab')