diff --git a/@overflow/commons/ui/component/index.ts b/@overflow/commons/ui/component/index.ts index e4001f3..c1b181c 100644 --- a/@overflow/commons/ui/component/index.ts +++ b/@overflow/commons/ui/component/index.ts @@ -1,14 +1,19 @@ import { - AppMenuBarComponent, + MenuBarComponent, } from './menu'; +import { + ToolbarComponent, +} from './toolbar'; + import { TitleBarComponent, WindowControlsComponent, } from './window'; export const COMPONENTS = [ - AppMenuBarComponent, + MenuBarComponent, + ToolbarComponent, TitleBarComponent, WindowControlsComponent, ]; diff --git a/@overflow/commons/ui/component/menu/index.ts b/@overflow/commons/ui/component/menu/index.ts index bb4fc66..4ff70da 100644 --- a/@overflow/commons/ui/component/menu/index.ts +++ b/@overflow/commons/ui/component/menu/index.ts @@ -1 +1 @@ -export { AppMenuBarComponent } from './app-menu-bar.component'; +export { MenuBarComponent } from './menu-bar.component'; diff --git a/@overflow/commons/ui/component/menu/app-menu-bar.component.html b/@overflow/commons/ui/component/menu/menu-bar.component.html similarity index 100% rename from @overflow/commons/ui/component/menu/app-menu-bar.component.html rename to @overflow/commons/ui/component/menu/menu-bar.component.html diff --git a/@overflow/commons/ui/component/menu/app-menu-bar.component.ts b/@overflow/commons/ui/component/menu/menu-bar.component.ts similarity index 75% rename from @overflow/commons/ui/component/menu/app-menu-bar.component.ts rename to @overflow/commons/ui/component/menu/menu-bar.component.ts index a446ee7..9100821 100644 --- a/@overflow/commons/ui/component/menu/app-menu-bar.component.ts +++ b/@overflow/commons/ui/component/menu/menu-bar.component.ts @@ -2,9 +2,9 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-menu-bar', - templateUrl: './app-menu-bar.component.html', + templateUrl: './menu-bar.component.html', }) -export class AppMenuBarComponent implements OnInit { +export class MenuBarComponent implements OnInit { private style: string; private titleBarClass: string; diff --git a/@overflow/commons/ui/component/toolbar/index.ts b/@overflow/commons/ui/component/toolbar/index.ts new file mode 100644 index 0000000..2272d36 --- /dev/null +++ b/@overflow/commons/ui/component/toolbar/index.ts @@ -0,0 +1 @@ +export { ToolbarComponent } from './toolbar.component'; diff --git a/@overflow/commons/ui/component/toolbar/toolbar.component.html b/@overflow/commons/ui/component/toolbar/toolbar.component.html new file mode 100644 index 0000000..1fff1d2 --- /dev/null +++ b/@overflow/commons/ui/component/toolbar/toolbar.component.html @@ -0,0 +1,51 @@ +
+
+ +
+ +
+ +
+
\ No newline at end of file diff --git a/@overflow/commons/ui/component/toolbar/toolbar.component.ts b/@overflow/commons/ui/component/toolbar/toolbar.component.ts new file mode 100644 index 0000000..5f71b2f --- /dev/null +++ b/@overflow/commons/ui/component/toolbar/toolbar.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-toolbar', + templateUrl: './toolbar.component.html', +}) +export class ToolbarComponent implements OnInit { + + private style: string; + private titleBarClass: string; + private showTopResize: boolean; + private showLeftResize: boolean; + + constructor( + ) { } + + ngOnInit() { + } + + onTitlebarDoubleClick() { + } +} diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index 9ae6ded..cfcd28f 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -1 +1,2 @@ + \ No newline at end of file diff --git a/src/assets/scss/styles/_component.scss b/src/assets/scss/styles/_component.scss index a41bfeb..485f376 100644 --- a/src/assets/scss/styles/_component.scss +++ b/src/assets/scss/styles/_component.scss @@ -4,3 +4,6 @@ @import 'component/window/focus'; @import 'component/window/zoom-info'; @import 'component/window/toast-notification'; +@import 'component/toolbar/toolbar'; +@import 'component/toolbar/button'; +@import 'component/toolbar/dropdown'; \ No newline at end of file diff --git a/src/assets/scss/styles/component/toolbar/_button.scss b/src/assets/scss/styles/component/toolbar/_button.scss new file mode 100644 index 0000000..dee7c53 --- /dev/null +++ b/src/assets/scss/styles/component/toolbar/_button.scss @@ -0,0 +1,154 @@ +.toolbar-button { + // Make sure the contents shrink beyond their intrinsic width + // See https://css-tricks.com/flexbox-truncated-text/ + min-width: 0; + + // This is necessary for our absolutely positioned progress bar to work. + // We position the toolbar button container relatively so that we can + // position the progress bar absolutely in relation to the container. + // We then explicitly position all child elements of the container + // relatively in order for the progress bar not to position itself + // above all the other content. + position: relative; + + // General button behavior, mostly resets. + // For the button content styling see second button style. Note that we + // explicitly use > here to only target the direct descendant button since + // there might be buttons in foldouts which would otherwise be affected + // as well. + & > button { + // Reset styles from global buttons + -webkit-appearance: none; + border: none; + box-shadow: none; + background: transparent; + border-radius: 0; + text-align: left; + margin: 0; + padding: 0; + + &:active { + box-shadow: none; + } + + &:focus { + background-color: var(--toolbar-button-focus-background-color); + + // Prevent the focus-ring from getting clipped by UI elements + // outside of the toolbar + outline-offset: -4px; + + // Reset + border-color: var(--toolbar-button-border-color); + box-shadow: none; + + .progress { + background: var(--toolbar-button-focus-progress-color); + } + + // Focused but not through keyboard navigation + &:not(.focus-ring) { + outline: none; + background-color: var(--toolbar-button-background-color); + + .progress { + background: var(--toolbar-button-progress-color); + } + } + } + + &:not(:disabled):hover { + background-color: var(--toolbar-button-hover-background-color); + color: var(--toolbar-button-hover-color); + border-color: var(--toolbar-button-hover-border-color); + + .description { + color: var(--toolbar-button-secondary-color); + } + + .progress { + background: var(--toolbar-button-hover-progress-color); + } + } + + height: 100%; + width: 100%; + } + + & > button { + position: relative; + + display: flex; + flex-direction: row; + align-items: center; + + padding: var(--spacing); + margin: 0; + overflow: hidden; + + background-color: var(--toolbar-button-background-color); + color: var(--toolbar-button-color); + + border-right: 1px solid var(--toolbar-button-border-color); + + .icon { + flex-shrink: 0; + margin-right: var(--spacing); + position: relative; + } + + .dropdownArrow { + width: 9px; + height: 13px; + flex-shrink: 0; + position: relative; + } + + .text { + display: flex; + flex-direction: column; + flex-grow: 1; + min-width: 0; + margin-right: var(--spacing); + position: relative; + } + + .title { + font-weight: var(--font-weight-semibold); + position: relative; + } + + .description { + color: var(--toolbar-button-secondary-color); + font-size: var(--font-size-sm); + position: relative; + } + + .title, + .description { + @include ellipsis; + } + + .progress { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background: var(--toolbar-button-progress-color); + transform-origin: left; + pointer-events: none; + transition: transform 0.3s var(--easing-ease-out-quint); + } + } + + &.has-progress > button { + // The default disabled opacity for button is 0.6 but when we're showing + // progress we want the text to be slightly legible so we'll make it + // opaque. Since a toolbar button with progress also shows a spinner + // there's plenty of indication that it can't be used. + &:disabled { + opacity: 1; + } + } +} diff --git a/src/assets/scss/styles/component/toolbar/_dropdown.scss b/src/assets/scss/styles/component/toolbar/_dropdown.scss new file mode 100644 index 0000000..85dcbce --- /dev/null +++ b/src/assets/scss/styles/component/toolbar/_dropdown.scss @@ -0,0 +1,30 @@ +.toolbar-dropdown { + // Make sure the contents shrink beyond their intrinsic width + // See https://css-tricks.com/flexbox-truncated-text/ + min-width: 0; + + & > .toolbar-button { + width: 100%; + height: 100%; + } + + &.open { + & > .toolbar-button > button { + color: var(--toolbar-button-active-color); + background-color: var(--toolbar-button-active-background-color); + + // The foldout doesn't have a border so we have to either + // color ours or remove it entirely for us to match the + // min-width of the foldout. + border-color: var(--toolbar-button-active-border-color); + + .description { + color: var(--text-secondary-color); + } + + .progress { + background-color: var(--toolbar-dropdown-open-progress-color); + } + } + } +} diff --git a/src/assets/scss/styles/component/toolbar/_toolbar.scss b/src/assets/scss/styles/component/toolbar/_toolbar.scss new file mode 100644 index 0000000..6b75be0 --- /dev/null +++ b/src/assets/scss/styles/component/toolbar/_toolbar.scss @@ -0,0 +1,103 @@ +@import '../../mixins'; + +/** A React component holding the main application toolbar component. */ +#app-toolbar { + height: var(--toolbar-height); + border-bottom: 1px solid var(--toolbar-border-color); + + display: flex; + flex-direction: row; + + flex-grow: 0; + flex-shrink: 0; + + /* See https://css-tricks.com/flexbox-truncated-text/ + * We need to do this "hack" or else the container will + * always grow to fit the intrinsic width of its children + * and thus killing our text truncation in the title. + */ + min-width: 0; + + color: var(--toolbar-text-color); + background-color: var(--toolbar-background-color); + + .sidebar-section { + display: flex; + flex-direction: row; + flex-shrink: 0; + + & > :last-child { + flex-grow: 1; + } + } + + .toolbar-button { + &.push-pull-button { + width: 230px; + } + } + + .toolbar-dropdown { + &.branch-button { + width: 230px; + } + } + + .toolbar-button { + &.revert-progress { + width: 230px; + } + } +} + +@keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.spin { + animation: spin 1s linear infinite; +} + +.ahead-behind { + display: flex; + + background: var(--toolbar-badge-background-color); + + // Perfectly round semi circle ends with real tight + // padding on either side. Now in two flavors! + @include darwin { + height: 13px; + } + + @include win32 { + height: 14px; + } + + border-radius: 8px; + padding: 0 6px; + + font-size: var(--font-size-xs); + font-weight: var(--font-weight-semibold); + + span { + display: flex; + align-items: center; + + // Only add left margin if both ahead and behind are + // showing at the same time. + &:nth-child(2) { + margin-left: var(--spacing-half); + } + + // We're using arrowSmallUp and arrowSmallDown which are + // both exactly 6px wide. Let's use that so that spacing + // gets easier to reason about. + .octicon { + width: 6px; + margin-left: var(--spacing-third); + } + } +}