ing

@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,
 ];

@overflow/commons/ui/component/menu/index.ts

@@ -1 +1 @@
-export { AppMenuBarComponent } from './app-menu-bar.component';
+export { MenuBarComponent } from './menu-bar.component';

@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;

@overflow/commons/ui/component/toolbar/index.ts

@@ -0,0 +1 @@
+export { ToolbarComponent } from './toolbar.component';

@overflow/commons/ui/component/toolbar/toolbar.component.html

@@ -0,0 +1,51 @@
+<div id="app-toolbar" class="toolbar">
+  <div class="sidebar-section" style="width: 250px;">
+    <div class="toolbar-dropdown closed" aria-expanded="false">
+      <div class="toolbar-button" title="C:\Users\crusader\Documents\GitHub\gateway">
+        <button class="button-component" type="button">
+          <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 10 16">
+            <path d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
+          </svg>
+          <div class="text">
+            <div class="description">Current repository</div>
+            <div class="title">gateway</div>
+          </div>
+          <svg aria-hidden="true" class="octicon dropdownArrow" version="1.1" viewBox="0 0 12 16">
+            <path d="M0 5l6 6 6-6z"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="toolbar-dropdown closed branch-button" aria-expanded="false">
+    <div class="toolbar-button" title="Current branch is master">
+      <button class="button-component" type="button">
+        <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 10 16">
+          <path d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path>
+        </svg>
+        <div class="text">
+          <div class="description">Current branch</div>
+          <div class="title">master</div>
+        </div>
+        <svg aria-hidden="true" class="octicon dropdownArrow" version="1.1" viewBox="0 0 12 16">
+          <path d="M0 5l6 6 6-6z"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+  <div class="toolbar-button push-pull-button">
+    <button class="button-component" type="button">
+      <svg aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 12 16">
+        <path d="M10.24 7.4a4.15 4.15 0 0 1-1.2 3.6 4.346 4.346 0 0 1-5.41.54L4.8 10.4.5 9.8l.6 4.2 1.31-1.26c2.36 1.74 5.7 1.57 7.84-.54a5.876 5.876 0 0 0 1.74-4.46l-1.75-.34zM2.96 5a4.346 4.346 0 0 1 5.41-.54L7.2 5.6l4.3.6-.6-4.2-1.31 1.26c-2.36-1.74-5.7-1.57-7.85.54C.5 5.03-.06 6.65.01 8.26l1.75.35A4.17 4.17 0 0 1 2.96 5z"></path>
+      </svg>
+      <div class="text">
+        <div class="title">Fetch origin</div>
+        <div class="description">
+          <span>Last fetched
+            <span title="Tuesday, August 14, 2018 10:06 PM">a day ago</span>
+          </span>
+        </div>
+      </div>
+    </button>
+  </div>
+</div>

@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() {
+  }
+}

src/app/pages/pages.component.html

@@ -1 +1,2 @@
+<app-toolbar></app-toolbar>
 <router-outlet #o="outlet"></router-outlet>

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';

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;
+    }
+  }
+}

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);
+      }
+    }
+  }
+}

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);
+    }
+  }
+}