overflow_scanner/app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ing

Browse Source
This commit is contained in:
crusader 2018-08-16 00:16:28 +09:00
parent f770a24a10
commit 648efb7a7a
12 changed files with 375 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
@overflow/commons/ui/component/index.ts
View File

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

2
@overflow/commons/ui/component/menu/index.ts
View File

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

0
@overflow/commons/ui/component/menu/app-menu-bar.component.html → @overflow/commons/ui/component/menu/menu-bar.component.html
View File

4
@overflow/commons/ui/component/menu/app-menu-bar.component.ts → @overflow/commons/ui/component/menu/menu-bar.component.ts
View File

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

1
@overflow/commons/ui/component/toolbar/index.ts Normal file
View File

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

51
@overflow/commons/ui/component/toolbar/toolbar.component.html Normal file
View File

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

22
@overflow/commons/ui/component/toolbar/toolbar.component.ts Normal file
View File

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

1
src/app/pages/pages.component.html
View File

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

3
src/assets/scss/styles/_component.scss
View File

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

154
src/assets/scss/styles/component/toolbar/_button.scss Normal file
View File

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

30
src/assets/scss/styles/component/toolbar/_dropdown.scss Normal file
View File

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

103
src/assets/scss/styles/component/toolbar/_toolbar.scss Normal file
View File

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