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-15 04:10:02 +09:00
parent a7b40a8742
commit 9e95d4cee6
12 changed files with 131 additions and 433 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -46,6 +46,7 @@
"electron-connect-webpack-plugin": "^0.1.1", "electron-connect-webpack-plugin": "^0.1.1",
"electron-connect": "^0.6.3", "electron-connect": "^0.6.3",
"electron-debug": "^2.0.0", "electron-debug": "^2.0.0",
"electron-window-state": "^4.1.1",
"fs-extra": "^7.0.0", "fs-extra": "^7.0.0",
"jasmine-core": "~2.99.1", "jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1", "jasmine-spec-reporter": "~4.2.1",

7
src/app/app.component.html
View File

@ -1 +1,8 @@
<div id="app-container">
<div id="app-chrome" class="focused">
<of-title-bar></of-title-bar>
<div id="app-contents">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div>
</div>
</div>

4
src/app/app.module.ts
View File

@ -2,6 +2,8 @@ import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
@ -13,6 +15,8 @@ import { AppComponent } from './app.component';
BrowserModule, BrowserModule,
AppRoutingModule, AppRoutingModule,
BrowserAnimationsModule, BrowserAnimationsModule,
CommonsUIModule,
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

2
src/app/pages/home/home-page.component.html
View File

@ -2,7 +2,7 @@
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12 ui-nopad"> <div class="ui-g-12 ui-nopad">
<div class="card"> <div class="card">
<h1>Home works!!</h1> <h1>Home works!!!!</h1>
<p-panel #content [showHeader]="false" class="block-panel"> <p-panel #content [showHeader]="false" class="block-panel">
<div class="ui-g" dir="rtl"> <div class="ui-g" dir="rtl">
<button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton></button> <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton></button>

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

@ -1,23 +1 @@
<div class="layout-wrapper" [ngClass]="{'layout-compact':layoutCompact}" (click)="onLayoutClick()">
<div #layoutContainer class="layout-container" [ngClass]="{'menu-layout-static': !isOverlay(),
'menu-layout-overlay': isOverlay(),
'layout-menu-overlay-active': overlayMenuActive,
'menu-layout-horizontal': isHorizontal(),
'menu-layout-slim': isSlim(),
'layout-menu-static-inactive': staticMenuDesktopInactive,
'layout-menu-static-active': staticMenuMobileActive}">
<of-title-bar></of-title-bar>
<div class="layout-main">
<!-- <div class="layout-content" [@routerAnim]="getRouterOutletState(o)"> -->
<div class="layout-content">
<router-outlet #o="outlet"></router-outlet> <router-outlet #o="outlet"></router-outlet>
</div>
</div>
<div class="layout-mask"></div>
</div>
</div>

198
src/assets/scss/styles/_variables.scss
View File

@ -12,32 +12,32 @@
$overlay-background-color: rgba(0, 0, 0, 0.4); $overlay-background-color: rgba(0, 0, 0, 0.4);
:root { :root {
--color-new: $green; --color-new: #{$green};
--color-deleted: $red; --color-deleted: #{$red};
--color-modified: $yellow-700; --color-modified: #{$yellow-700};
--color-renamed: $blue; --color-renamed: #{$blue};
--color-conflicted: $orange; --color-conflicted: #{$orange};
--text-color: $gray-900; --text-color: #{$gray-900};
--text-secondary-color: $gray-500; --text-secondary-color: #{$gray-500};
--background-color: $white; --background-color: #{$white};
--button-height: 25px; --button-height: 25px;
--button-background: $blue; --button-background: #{$blue};
--button-border-radius: 2px; --button-border-radius: 2px;
--button-hover-background: lighten($blue, 5%); --button-hover-background: lighten(#{$blue}, 5%);
--button-text-color: $white; --button-text-color: #{$white};
--button-focus-border-color: $blue-600; --button-focus-border-color: #{$blue-600};
--link-button-color: $blue; --link-button-color: #{$blue};
--link-button-hover-color: $blue-600; --link-button-hover-color: #{$blue-600};
--secondary-button-background: $gray-000; --secondary-button-background: #{$gray-000};
--secondary-button-hover-background: $white; --secondary-button-hover-background: #{$white};
--secondary-button-text-color: var(--text-color); --secondary-button-text-color: var(--text-color);
--secondary-button-focus-shadow-color: rgba($gray-200, 0.75); --secondary-button-focus-shadow-color: rgba(#{$gray-200}, 0.75);
--secondary-button-focus-border-color: $gray-300; --secondary-button-focus-border-color: #{$gray-300};
// Typography // Typography
// //
@ -90,19 +90,19 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
// to decide what states to support (active selection, selection, etc). // to decide what states to support (active selection, selection, etc).
--box-background-color: var(--background-color); --box-background-color: var(--background-color);
--box-alt-background-color: $gray-100; --box-alt-background-color: #{$gray-100};
/** /**
* Background color for skeleton or "loading" boxes * Background color for skeleton or "loading" boxes
*/ */
--box-skeleton-background-color: $gray-200; --box-skeleton-background-color: #{$gray-200};
--skeleton-background-gradient: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%); --skeleton-background-gradient: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
/** /**
* Border color for boxes. * Border color for boxes.
*/ */
--box-border-color: $gray-200; --box-border-color: #{$gray-200};
--box-border-accent-color: $blue; --box-border-accent-color: #{$blue};
/** /**
* Background color for selected boxes without keyboard focus * Background color for selected boxes without keyboard focus
@ -115,7 +115,7 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
* implement a hover state since this will conflict with * implement a hover state since this will conflict with
* selection and active selection * selection and active selection
*/ */
--box-hover-text-color: $gray-900; --box-hover-text-color: #{$gray-900};
/** /**
* Background color for when a user hovers over a boxe with a * Background color for when a user hovers over a boxe with a
@ -127,47 +127,47 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
/** /**
* Text color for selected boxes without keyboard focus * Text color for selected boxes without keyboard focus
*/ */
--box-selected-text-color: $gray-900; --box-selected-text-color: #{$gray-900};
/** /**
* Border color for selected boxes without keyboard focus * Border color for selected boxes without keyboard focus
*/ */
--box-selected-border-color: $gray-400; --box-selected-border-color: #{$gray-400};
/** /**
* Background color for selected boxes with active keyboard focus * Background color for selected boxes with active keyboard focus
*/ */
--box-selected-active-background-color: $blue; --box-selected-active-background-color: #{$blue};
/** /**
* Text color for selected boxes with active keyboard focus * Text color for selected boxes with active keyboard focus
*/ */
--box-selected-active-text-color: $white; --box-selected-active-text-color: #{$white};
/** /**
* Border color for selected boxes with active keyboard focus * Border color for selected boxes with active keyboard focus
*/ */
--box-selected-active-border-color: $gray-400; --box-selected-active-border-color: #{$gray-400};
/** /**
* Gradient used to indicate that content is overflowing, intended * Gradient used to indicate that content is overflowing, intended
* for use when content can be expanded through other means than * for use when content can be expanded through other means than
* scrolling. * scrolling.
*/ */
--box-overflow-shadow-background: linear-gradient(180deg, rgba($white, 0) 0%, rgba($white, 1) 90%, rgba($white, 1) 100%); --box-overflow-shadow-background: linear-gradient(180deg, rgba(#{$white}, 0) 0%, rgba(#{$white}, 1) 90%, rgba(#{$white}, 1) 100%);
/** /**
* Author input (co-authors) * Author input (co-authors)
*/ */
--co-author-tag-background-color: $blue-000; --co-author-tag-background-color: #{$blue-000};
--co-author-tag-border-color: $blue-200; --co-author-tag-border-color: #{$blue-200};
/** /**
* The height of the title bar area on Win32 platforms * The height of the title bar area on Win32 platforms
* If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx' * If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
*/ */
--win32-title-bar-height: 28px; --win32-title-bar-height: 28px;
--win32-title-bar-background-color: $gray-900; --win32-title-bar-background-color: #{$gray-900};
/** /**
* The height of the title bar area on darwin platforms * The height of the title bar area on darwin platforms
@ -190,30 +190,30 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--toolbar-height: 50px; --toolbar-height: 50px;
--toolbar-background-color: $gray-900; --toolbar-background-color: #{$gray-900};
--toolbar-border-color: $gray-900; --toolbar-border-color: #{$gray-900};
--toolbar-text-color: $white; --toolbar-text-color: #{$white};
--toolbar-text-secondary-color: $gray-300; --toolbar-text-secondary-color: #{$gray-300};
--toolbar-button-color: var(--toolbar-text-color); --toolbar-button-color: var(--toolbar-text-color);
--toolbar-button-background-color: transparent; --toolbar-button-background-color: transparent;
--toolbar-button-border-color: black; --toolbar-button-border-color: black;
--toolbar-button-secondary-color: var(--toolbar-text-secondary-color); --toolbar-button-secondary-color: var(--toolbar-text-secondary-color);
--toolbar-button-hover-color: $white; --toolbar-button-hover-color: #{$white};
--toolbar-button-hover-background-color: $gray-800; --toolbar-button-hover-background-color: #{$gray-800};
--toolbar-button-hover-border-color: var(--toolbar-button-border-color); --toolbar-button-hover-border-color: var(--toolbar-button-border-color);
--toolbar-button-focus-background-color: $gray-800; --toolbar-button-focus-background-color: #{$gray-800};
--toolbar-button-active-color: var(--text-color); --toolbar-button-active-color: var(--text-color);
--toolbar-button-active-background-color: var(--background-color); --toolbar-button-active-background-color: var(--background-color);
--toolbar-button-active-border-color: var(--background-color); --toolbar-button-active-border-color: var(--background-color);
--toolbar-button-progress-color: $gray-800; --toolbar-button-progress-color: #{$gray-800};
--toolbar-button-focus-progress-color: $gray-700; --toolbar-button-focus-progress-color: #{$gray-700};
--toolbar-button-hover-progress-color: $gray-700; --toolbar-button-hover-progress-color: #{$gray-700};
--toolbar-dropdown-open-progress-color: $gray-200; --toolbar-dropdown-open-progress-color: #{$gray-200};
/** /**
* App menu bar colors (Windows/Linux only) * App menu bar colors (Windows/Linux only)
@ -234,28 +234,28 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
* push/pull button and the PR badge in the branch drop * push/pull button and the PR badge in the branch drop
* down button. * down button.
*/ */
--toolbar-badge-background-color: $gray-600; --toolbar-badge-background-color: #{$gray-600};
--toolbar-badge-active-background-color: $gray-200; --toolbar-badge-active-background-color: #{$gray-200};
--tab-bar-height: 29px; --tab-bar-height: 29px;
--tab-bar-active-color: $blue; --tab-bar-active-color: #{$blue};
--tab-bar-background-color: $white; --tab-bar-background-color: #{$white};
/** Count bubble colors when used inside of a tab bar item */ /** Count bubble colors when used inside of a tab bar item */
--tab-bar-count-color: var(--text-color); --tab-bar-count-color: var(--text-color);
--tab-bar-count-background-color: $gray-200; --tab-bar-count-background-color: #{$gray-200};
/** /**
* Badge colors when used inside of list items. * Badge colors when used inside of list items.
* Example of this is the change indicators inside * Example of this is the change indicators inside
* of the repository list. * of the repository list.
*/ */
--list-item-badge-color: $gray-800; --list-item-badge-color: #{$gray-800};
--list-item-badge-background-color: $gray-200; --list-item-badge-background-color: #{$gray-200};
--list-item-selected-badge-color: $gray-900; --list-item-selected-badge-color: #{$gray-900};
--list-item-selected-badge-background-color: $gray-300; --list-item-selected-badge-background-color: #{$gray-300};
--list-item-selected-active-badge-color: $gray-900; --list-item-selected-active-badge-color: #{$gray-900};
--list-item-selected-active-badge-background-color: $white; --list-item-selected-active-badge-background-color: #{$white};
/** Win32 has custom scrol bars, see _scroll.scss */ /** Win32 has custom scrol bars, see _scroll.scss */
--win32-scroll-bar-size: 10px; --win32-scroll-bar-size: 10px;
@ -277,17 +277,17 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
* percentage changing or the app toggling between full screen and normal * percentage changing or the app toggling between full screen and normal
* window mode. * window mode.
*/ */
--toast-notification-color: $gray-000; --toast-notification-color: #{$gray-000};
--toast-notification-background-color: rgba($gray-900, 0.6); --toast-notification-background-color: rgba(#{$gray-900}, 0.6);
/** The highlight color used for focus rings and focus box shadows */ /** The highlight color used for focus rings and focus box shadows */
--focus-color: $blue; --focus-color: #{$blue};
/** /**
* Variables for form elements * Variables for form elements
*/ */
--text-field-height: 25px; --text-field-height: 25px;
--text-field-focus-shadow-color: rgba($blue, 0.25); --text-field-focus-shadow-color: rgba(#{$blue}, 0.25);
/** /**
* Diff view * Diff view
@ -295,52 +295,52 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--diff-line-padding-y: 2px; --diff-line-padding-y: 2px;
--diff-text-color: $gray-900; --diff-text-color: #{$gray-900};
--diff-border-color: $gray-200; --diff-border-color: #{$gray-200};
--diff-gutter-color: $gray-200; --diff-gutter-color: #{$gray-200};
--diff-gutter-background-color: var(--background-color); --diff-gutter-background-color: var(--background-color);
--diff-line-number-color: $gray-700; --diff-line-number-color: #{$gray-700};
--diff-line-number-column-width: 50px; --diff-line-number-column-width: 50px;
--diff-selected-background-color: $blue-400; --diff-selected-background-color: #{$blue-400};
--diff-selected-border-color: $blue-600; --diff-selected-border-color: #{$blue-600};
--diff-selected-gutter-color: $blue-600; --diff-selected-gutter-color: #{$blue-600};
--diff-selected-text-color: var(--background-color); --diff-selected-text-color: var(--background-color);
--diff-add-background-color: darken($green-000, 2%); --diff-add-background-color: darken(#{$green-000}, 2%);
--diff-add-border-color: $green-300; --diff-add-border-color: #{$green-300};
--diff-add-gutter-color: $green-300; --diff-add-gutter-color: #{$green-300};
--diff-add-gutter-background-color: darken($green-100, 3%); --diff-add-gutter-background-color: darken(#{$green-100}, 3%);
--diff-add-inner-background-color: #acf2bd; --diff-add-inner-background-color: #acf2bd;
--diff-add-text-color: var(--diff-text-color); --diff-add-text-color: var(--diff-text-color);
--diff-delete-background-color: $red-000; --diff-delete-background-color: #{$red-000};
--diff-delete-border-color: $red-200; --diff-delete-border-color: #{$red-200};
--diff-delete-gutter-color: $red-200; --diff-delete-gutter-color: #{$red-200};
--diff-delete-gutter-background-color: $red-100; --diff-delete-gutter-background-color: #{$red-100};
--diff-delete-inner-background-color: #fdb8c0; --diff-delete-inner-background-color: #fdb8c0;
--diff-delete-text-color: var(--diff-text-color); --diff-delete-text-color: var(--diff-text-color);
--diff-hunk-background-color: $blue-000; --diff-hunk-background-color: #{$blue-000};
--diff-hunk-border-color: $blue-200; --diff-hunk-border-color: #{$blue-200};
--diff-hunk-gutter-color: darken($blue-200, 5%); --diff-hunk-gutter-color: darken(#{$blue-200}, 5%);
--diff-hunk-gutter-background-color: $blue-100; --diff-hunk-gutter-background-color: #{$blue-100};
--diff-hunk-text-color: $gray; --diff-hunk-text-color: #{$gray};
--diff-hover-background-color: $blue-300; --diff-hover-background-color: #{$blue-300};
--diff-hover-border-color: $blue-400; --diff-hover-border-color: #{$blue-400};
--diff-hover-gutter-color: $blue-400; --diff-hover-gutter-color: #{$blue-400};
--diff-hover-text-color: var(--background-color); --diff-hover-text-color: var(--background-color);
--diff-add-hover-background-color: $green-300; --diff-add-hover-background-color: #{$green-300};
--diff-add-hover-border-color: $green-400; --diff-add-hover-border-color: #{$green-400};
--diff-add-hover-gutter-color: $green-400; --diff-add-hover-gutter-color: #{$green-400};
--diff-add-hover-text-color: var(--text-color); --diff-add-hover-text-color: var(--text-color);
--diff-delete-hover-background-color: $red-200; --diff-delete-hover-background-color: #{$red-200};
--diff-delete-hover-border-color: $red-300; --diff-delete-hover-border-color: #{$red-300};
--diff-delete-hover-gutter-color: $red-300; --diff-delete-hover-gutter-color: #{$red-300};
--diff-delete-hover-text-color: var(--text-color); --diff-delete-hover-text-color: var(--text-color);
// Syntax highlighting text colors // Syntax highlighting text colors
@ -351,7 +351,7 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--syntax-string-color: #032f62; --syntax-string-color: #032f62;
--syntax-qualifier-color: #6f42c1; --syntax-qualifier-color: #6f42c1;
--syntax-type-color: #d73a49; --syntax-type-color: #d73a49;
--syntax-comment-color: $gray-500; --syntax-comment-color: #{$gray-500};
--syntax-tag-color: #22863a; --syntax-tag-color: #22863a;
--syntax-attribute-color: #6f42c1; --syntax-attribute-color: #6f42c1;
--syntax-link-color: #032f62; --syntax-link-color: #032f62;
@ -362,25 +362,25 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
--undo-animation-duration: 500ms; --undo-animation-duration: 500ms;
// Colors for form errors // Colors for form errors
--error-color: $red; --error-color: #{$red};
--form-error-background: $red-100; --form-error-background: #{$red-100};
--form-error-border-color: $red-200; --form-error-border-color: #{$red-200};
--form-error-text-color: $red-800; --form-error-text-color: #{$red-800};
/** Overlay is used as a background for both modals and foldouts */ /** Overlay is used as a background for both modals and foldouts */
--overlay-background-color: $overlay-background-color; --overlay-background-color: #{$overlay-background-color};
/** Dialog */ /** Dialog */
--dialog-warning-color: $yellow-600; --dialog-warning-color: #{$yellow-600};
--dialog-error-color: $red; --dialog-error-color: #{$red};
/** Inline paths and code */ /** Inline paths and code */
--path-segment-background: $blue-000; --path-segment-background: #{$blue-000};
--path-segment-padding: var(--spacing-third); --path-segment-padding: var(--spacing-third);
/** Diverging notification banner colors */ /** Diverging notification banner colors */
--notification-banner-background: $blue-000; --notification-banner-background: #{$blue-000};
--notification-banner-border-color: $blue-200; --notification-banner-border-color: #{$blue-200};
--notification-ref-background: rgba(255, 255, 255, 0.75); --notification-ref-background: rgba(255, 255, 255, 0.75);
// http://easings.net/#easeOutBack // http://easings.net/#easeOutBack
@ -394,5 +394,5 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
} }
::backdrop { ::backdrop {
--overlay-background-color: $overlay-background-color; --overlay-background-color: #{$overlay-background-color};
} }

0
src/assets/scss/styles/_app.scss → src/assets/scss/styles/app.scss
View File

2
src/assets/scss/styles/component/_app.scss
View File

@ -1,6 +1,6 @@
@import '../mixins'; @import '../mixins';
#desktop-app { #app {
// This is just a dummy wrapper needed because react doesn't like // This is just a dummy wrapper needed because react doesn't like
// being installed into <body>, see https://github.com/facebook/react/issues/3207 // being installed into <body>, see https://github.com/facebook/react/issues/3207
&-container { &-container {

306
src/assets/scss/styles/themes/_dark.scss
View File

@ -1,306 +0,0 @@
// Variables
//
// This files contains CSS variables accessible to all selectors
// Primer colors, see https://github.com/primer/primer-css/blob/master/modules/primer-support/lib/variables/color-system.scss
@import '~primer-support/lib/variables/color-system.scss';
body.theme-dark {
--color-new: $green;
--color-deleted: $red;
--color-modified: $yellow-700;
--color-renamed: $blue;
--color-conflicted: $orange;
--text-color: $gray-300;
--text-secondary-color: $gray-400;
--background-color: $gray-900;
--button-background: $blue;
--button-hover-background: lighten($blue, 5%);
--button-text-color: $white;
--button-focus-border-color: $blue-600;
--link-button-color: lighten($blue-400, 3%);
--link-button-hover-color: $blue-400;
--secondary-button-background: $gray-800;
--secondary-button-hover-background: var(--secondary-button-background);
--secondary-button-text-color: var(--text-color);
--secondary-button-focus-shadow-color: rgba($gray-200, 0.75);
--secondary-button-focus-border-color: $gray-300;
/**
* Background color for custom scroll bars.
* The color is applied to the thumb part of the scrollbar.
*
* Note: Only applies to win32 platforms
*/
--scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.7);
/**
* Background color for custom scroll bars in their active state.
* The color is applied to the thumb part of the scrollbar.
*
* Note: Only applies to win32 platforms
*/
--scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.8);
// Box
//
// We use the term 'box' here to refer to a very high-level generic
// component that fits many use cases. A 'box' might be a list item
// or an item in a tab control header. It's up to each implementation
// to decide what states to support (active selection, selection, etc).
--box-background-color: darken($gray-900, 3%);
--box-alt-background-color: $gray-800;
/**
* Background color for skeleton or "loading" boxes
*/
--box-skeleton-background-color: $gray-700;
--skeleton-background-gradient: -webkit-linear-gradient(left, rgba(36, 41, 46, 0) 0%, rgba(36, 41, 46, 0.5) 50%, rgba(36, 41, 46, 0) 100%);
/**
* Border color for boxes.
*/
--box-border-color: #141414;
--box-border-accent-color: $blue;
/**
* Background color for selected boxes without keyboard focus
*/
--box-selected-background-color: $gray-700;
/**
* Text color for when a user hovers over a boxe with a
* pointing device. Should not be used by boxes that doesn't
* implement a hover state since this will conflict with
* selection and active selection
*/
--box-hover-text-color: var(--text-color);
/**
* Background color for when a user hovers over a boxe with a
* pointing device. Should not be used by boxes that doesn't
* implement a hover state since this will conflict with
* selection and active selection
*/
/**
* Text color for selected boxes without keyboard focus
*/
--box-selected-text-color: var(--text-color);
/**
* Border color for selected boxes without keyboard focus
*/
--box-selected-border-color: $gray-400;
/**
* Background color for selected boxes with active keyboard focus
*/
--box-selected-active-background-color: $blue;
/**
* Text color for selected boxes with active keyboard focus
*/
--box-selected-active-text-color: $white;
/**
* Border color for selected boxes with active keyboard focus
*/
--box-selected-active-border-color: $gray-400;
/**
* Gradient used to indicate that content is overflowing, intended
* for use when content can be expanded through other means than
* scrolling.
*/
--box-overflow-shadow-background: linear-gradient(180deg, rgba($gray-900, 0) 0%, rgba($gray-900, 1) 90%, rgba($gray-900, 1) 100%);
/**
* Author input (co-authors)
*/
--co-author-tag-background-color: $blue-800;
--co-author-tag-border-color: $blue-700;
--base-border: 1px solid var(--box-border-color);
--shadow-color: rgba(black, 0.5);
--base-box-shadow: 0 2px 7px var(--shadow-color);
--toolbar-background-color: darken($gray-900, 3%);
--toolbar-border-color: var(--box-border-color);
--toolbar-text-color: var(--text-color);
--toolbar-text-secondary-color: var(--text-secondary-color);
--toolbar-button-color: var(--toolbar-text-color);
--toolbar-button-background-color: transparent;
--toolbar-button-border-color: var(--box-border-color);
--toolbar-button-secondary-color: var(--toolbar-text-secondary-color);
--toolbar-button-hover-color: $white;
--toolbar-button-hover-background-color: $gray-800;
--toolbar-button-hover-border-color: var(--toolbar-button-border-color);
--toolbar-button-focus-background-color: $gray-800;
--toolbar-button-active-color: var(--text-color);
--toolbar-button-active-background-color: var(--background-color);
--toolbar-button-active-border-color: var(--box-border-color);
--toolbar-button-progress-color: $gray-800;
--toolbar-button-focus-progress-color: $gray-700;
--toolbar-button-hover-progress-color: $gray-700;
--toolbar-dropdown-open-progress-color: $gray-200;
/**
* App menu bar colors (Windows/Linux only)
*/
--app-menu-button-color: var(--toolbar-text-color);
--app-menu-button-hover-color: var(--toolbar-button-hover-color);
--app-menu-button-hover-background-color: var(--toolbar-button-hover-background-color);
--app-menu-button-active-color: var(--text-color);
--app-menu-button-active-background-color: $gray-800;
--app-menu-pane-color: var(--text-color);
--app-menu-pane-secondary-color: var(--text-secondary-color);
--app-menu-pane-background-color: $gray-800;
--app-menu-divider-color: $gray-600;
/**
* Background color for badges inside of toolbar buttons.
* Examples of badges are the ahead/behind bubble in the
* push/pull button and the PR badge in the branch drop
* down button.
*/
--toolbar-badge-background-color: $gray-700;
--toolbar-badge-active-background-color: $gray-700;
--tab-bar-active-color: $blue;
--tab-bar-background-color: var(--box-background-color);
/** Count bubble colors when used inside of a tab bar item */
--tab-bar-count-color: var(--text-color);
--tab-bar-count-background-color: $gray-700;
/**
* Badge colors when used inside of list items.
* Example of this is the ahead/behind indicators inside
* of the repository list.
*/
--list-item-badge-color: var(--text-color);
--list-item-badge-background-color: $gray-600;
--list-item-selected-badge-color: $white;
--list-item-selected-badge-background-color: $gray-500;
--list-item-selected-active-badge-color: $gray-900;
--list-item-selected-active-badge-background-color: $white;
/**
* Toast notifications are shown temporarily for things like the zoom
* percentage changing or the app toggling between full screen and normal
* window mode.
*/
--toast-notification-color: var(--text-color);
--toast-notification-background-color: rgba(black, 0.8);
/** The highlight color used for focus rings and focus box shadows */
--focus-color: $blue;
/**
* Variables for form elements
*/
--text-field-focus-shadow-color: rgba($blue, 0.25);
/**
* Diff view
*/
--diff-text-color: var(--text-color);
--diff-border-color: $gray-800;
--diff-gutter-color: $gray-800;
--diff-gutter-background-color: darken($gray-900, 3%);
--diff-line-number-color: var(--text-secondary-color);
--diff-line-number-column-width: 50px;
--diff-selected-background-color: $blue-700;
--diff-selected-border-color: $blue-600;
--diff-selected-gutter-color: $blue-600;
--diff-selected-text-color: var(--text-color);
--diff-add-background-color: darken($green-900, 3%);
--diff-add-border-color: darken($green-900, 2%);
--diff-add-gutter-color: darken($green-900, 2%);
--diff-add-gutter-background-color: darken($green-900, 8%);
--diff-add-inner-background-color: $green-600;
--diff-add-text-color: var(--diff-text-color);
--diff-delete-background-color: darken($red-900, 15%);
--diff-delete-border-color: darken($red-900, 10%);
--diff-delete-gutter-color: darken($red-900, 10%);
--diff-delete-gutter-background-color: darken($red-900, 20%);
--diff-delete-inner-background-color: $red-700;
--diff-delete-text-color: $red-100;
--diff-hunk-background-color: darken($gray-900, 3%);
--diff-hunk-border-color: lighten($gray-900, 3%);
--diff-hunk-gutter-color: lighten($gray-900, 3%);
--diff-hunk-gutter-background-color: darken($gray-900, 6%);
--diff-hunk-text-color: var(--text-secondary-color);
--diff-hover-background-color: $blue-500;
--diff-hover-border-color: $blue-400;
--diff-hover-gutter-color: $blue-400;
--diff-hover-text-color: var(--diff-text-color);
--diff-add-hover-background-color: $green-900;
--diff-add-hover-border-color: $green-700;
--diff-add-hover-gutter-color: $green-700;
--diff-add-hover-text-color: var(--text-color);
--diff-delete-hover-background-color: $red-800;
--diff-delete-hover-border-color: $red-700;
--diff-delete-hover-gutter-color: $red-700;
--diff-delete-hover-text-color: var(--text-color);
// Syntax highlighting text colors
--syntax-variable-color: $purple-300;
--syntax-alt-variable-color: $blue-300;
--syntax-keyword-color: $red-300;
--syntax-atom-color: $blue-300;
--syntax-string-color: $orange-300;
--syntax-qualifier-color: $purple-300;
--syntax-type-color: $red-300;
--syntax-comment-color: $gray-400;
--syntax-tag-color: $green-400;
--syntax-attribute-color: $purple-300;
--syntax-link-color: $blue-300;
--syntax-header-color: $red-300;
// Colors for form errors
--error-color: $red;
--form-error-background: darken($red-900, 3%);
--form-error-border-color: $red-900;
--form-error-text-color: var(--text-color);
/** Overlay is used as a background for both modals and foldouts */
--overlay-background-color: rgba(0, 0, 0, 0.5);
/** Dialog */
--dialog-warning-color: $yellow-600;
--dialog-error-color: $red-600;
/** Inline paths and code */
--path-segment-background: $gray-700;
.blankslate-image {
filter: #{'invert()'} grayscale(1) brightness(8) contrast(0.6);
}
/** Diverging notification banner colors */
--notification-banner-background: $gray-800;
--notification-banner-border-color: $gray-700;
--notification-ref-background: $gray-700;
}

0
src/electron/app-window.ts Normal file
View File

11
src/electron/now.ts Normal file
View File

@ -0,0 +1,11 @@
/**
* Get the time from some arbitrary fixed starting point. The time will not be
* based on clock time.
*
* Ideally we'd just use `performance.now` but that's a browser API and not
* available in our Plain Old Node main process environment.
*/
export function now(): number {
const time = process.hrtime();
return time[0] * 1000 + time[1] / 1000000;
}

5
src/index.html
View File

@ -1,5 +1,6 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>ElectronApp</title> <title>ElectronApp</title>
@ -8,7 +9,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
</head> </head>
<body>
<body class="platform-win32 theme-light">
<of-root></of-root> <of-root></of-root>
</body> </body>
</html> </html>