ing
This commit is contained in:
crusader
parent
a7b40a8742
commit
9e95d4cee6
|
|
@ -46,6 +46,7 @@
|
|||
"electron-connect-webpack-plugin": "^0.1.1",
|
||||
"electron-connect": "^0.6.3",
|
||||
"electron-debug": "^2.0.0",
|
||||
"electron-window-state": "^4.1.1",
|
||||
"fs-extra": "^7.0.0",
|
||||
"jasmine-core": "~2.99.1",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,6 +2,8 @@ import { BrowserModule } from '@angular/platform-browser';
|
|||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { CommonsUIModule } from '@overflow/commons/ui/commons-ui.module';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
|
|
@ -13,6 +15,8 @@ import { AppComponent } from './app.component';
|
|||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
BrowserAnimationsModule,
|
||||
|
||||
CommonsUIModule,
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="ui-g">
|
||||
<div class="ui-g-12 ui-nopad">
|
||||
<div class="card">
|
||||
<h1>Home works!!</h1>
|
||||
<h1>Home works!!!!</h1>
|
||||
<p-panel #content [showHeader]="false" class="block-panel">
|
||||
<div class="ui-g" dir="rtl">
|
||||
<button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton></button>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layout-mask"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -12,32 +12,32 @@
|
|||
$overlay-background-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
:root {
|
||||
--color-new: $green;
|
||||
--color-deleted: $red;
|
||||
--color-modified: $yellow-700;
|
||||
--color-renamed: $blue;
|
||||
--color-conflicted: $orange;
|
||||
--color-new: #{$green};
|
||||
--color-deleted: #{$red};
|
||||
--color-modified: #{$yellow-700};
|
||||
--color-renamed: #{$blue};
|
||||
--color-conflicted: #{$orange};
|
||||
|
||||
--text-color: $gray-900;
|
||||
--text-secondary-color: $gray-500;
|
||||
--background-color: $white;
|
||||
--text-color: #{$gray-900};
|
||||
--text-secondary-color: #{$gray-500};
|
||||
--background-color: #{$white};
|
||||
|
||||
--button-height: 25px;
|
||||
|
||||
--button-background: $blue;
|
||||
--button-background: #{$blue};
|
||||
--button-border-radius: 2px;
|
||||
--button-hover-background: lighten($blue, 5%);
|
||||
--button-text-color: $white;
|
||||
--button-focus-border-color: $blue-600;
|
||||
--button-hover-background: lighten(#{$blue}, 5%);
|
||||
--button-text-color: #{$white};
|
||||
--button-focus-border-color: #{$blue-600};
|
||||
|
||||
--link-button-color: $blue;
|
||||
--link-button-hover-color: $blue-600;
|
||||
--link-button-color: #{$blue};
|
||||
--link-button-hover-color: #{$blue-600};
|
||||
|
||||
--secondary-button-background: $gray-000;
|
||||
--secondary-button-hover-background: $white;
|
||||
--secondary-button-background: #{$gray-000};
|
||||
--secondary-button-hover-background: #{$white};
|
||||
--secondary-button-text-color: var(--text-color);
|
||||
--secondary-button-focus-shadow-color: rgba($gray-200, 0.75);
|
||||
--secondary-button-focus-border-color: $gray-300;
|
||||
--secondary-button-focus-shadow-color: rgba(#{$gray-200}, 0.75);
|
||||
--secondary-button-focus-border-color: #{$gray-300};
|
||||
|
||||
// Typography
|
||||
//
|
||||
|
|
@ -90,19 +90,19 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
|
|||
// to decide what states to support (active selection, selection, etc).
|
||||
|
||||
--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
|
||||
*/
|
||||
--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%);
|
||||
|
||||
/**
|
||||
* Border color for boxes.
|
||||
*/
|
||||
--box-border-color: $gray-200;
|
||||
--box-border-accent-color: $blue;
|
||||
--box-border-color: #{$gray-200};
|
||||
--box-border-accent-color: #{$blue};
|
||||
|
||||
/**
|
||||
* 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
|
||||
* 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
|
||||
|
|
@ -127,47 +127,47 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
|
|||
/**
|
||||
* 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
|
||||
*/
|
||||
--box-selected-border-color: $gray-400;
|
||||
--box-selected-border-color: #{$gray-400};
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
--box-selected-active-text-color: $white;
|
||||
--box-selected-active-text-color: #{$white};
|
||||
|
||||
/**
|
||||
* 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
|
||||
* for use when content can be expanded through other means than
|
||||
* 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)
|
||||
*/
|
||||
--co-author-tag-background-color: $blue-000;
|
||||
--co-author-tag-border-color: $blue-200;
|
||||
--co-author-tag-background-color: #{$blue-000};
|
||||
--co-author-tag-border-color: #{$blue-200};
|
||||
|
||||
/**
|
||||
* The height of the title bar area on Win32 platforms
|
||||
* If changed, update titleBarHeight in 'app/src/ui/dialog/dialog.tsx'
|
||||
*/
|
||||
--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
|
||||
|
|
@ -190,30 +190,30 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
|
|||
|
||||
--toolbar-height: 50px;
|
||||
|
||||
--toolbar-background-color: $gray-900;
|
||||
--toolbar-border-color: $gray-900;
|
||||
--toolbar-text-color: $white;
|
||||
--toolbar-text-secondary-color: $gray-300;
|
||||
--toolbar-background-color: #{$gray-900};
|
||||
--toolbar-border-color: #{$gray-900};
|
||||
--toolbar-text-color: #{$white};
|
||||
--toolbar-text-secondary-color: #{$gray-300};
|
||||
|
||||
--toolbar-button-color: var(--toolbar-text-color);
|
||||
--toolbar-button-background-color: transparent;
|
||||
--toolbar-button-border-color: black;
|
||||
--toolbar-button-secondary-color: var(--toolbar-text-secondary-color);
|
||||
|
||||
--toolbar-button-hover-color: $white;
|
||||
--toolbar-button-hover-background-color: $gray-800;
|
||||
--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-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(--background-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;
|
||||
--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)
|
||||
|
|
@ -234,28 +234,28 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
|
|||
* push/pull button and the PR badge in the branch drop
|
||||
* down button.
|
||||
*/
|
||||
--toolbar-badge-background-color: $gray-600;
|
||||
--toolbar-badge-active-background-color: $gray-200;
|
||||
--toolbar-badge-background-color: #{$gray-600};
|
||||
--toolbar-badge-active-background-color: #{$gray-200};
|
||||
|
||||
--tab-bar-height: 29px;
|
||||
--tab-bar-active-color: $blue;
|
||||
--tab-bar-background-color: $white;
|
||||
--tab-bar-active-color: #{$blue};
|
||||
--tab-bar-background-color: #{$white};
|
||||
|
||||
/** Count bubble colors when used inside of a tab bar item */
|
||||
--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.
|
||||
* Example of this is the change indicators inside
|
||||
* of the repository list.
|
||||
*/
|
||||
--list-item-badge-color: $gray-800;
|
||||
--list-item-badge-background-color: $gray-200;
|
||||
--list-item-selected-badge-color: $gray-900;
|
||||
--list-item-selected-badge-background-color: $gray-300;
|
||||
--list-item-selected-active-badge-color: $gray-900;
|
||||
--list-item-selected-active-badge-background-color: $white;
|
||||
--list-item-badge-color: #{$gray-800};
|
||||
--list-item-badge-background-color: #{$gray-200};
|
||||
--list-item-selected-badge-color: #{$gray-900};
|
||||
--list-item-selected-badge-background-color: #{$gray-300};
|
||||
--list-item-selected-active-badge-color: #{$gray-900};
|
||||
--list-item-selected-active-badge-background-color: #{$white};
|
||||
|
||||
/** Win32 has custom scrol bars, see _scroll.scss */
|
||||
--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
|
||||
* window mode.
|
||||
*/
|
||||
--toast-notification-color: $gray-000;
|
||||
--toast-notification-background-color: rgba($gray-900, 0.6);
|
||||
--toast-notification-color: #{$gray-000};
|
||||
--toast-notification-background-color: rgba(#{$gray-900}, 0.6);
|
||||
|
||||
/** The highlight color used for focus rings and focus box shadows */
|
||||
--focus-color: $blue;
|
||||
--focus-color: #{$blue};
|
||||
|
||||
/**
|
||||
* Variables for form elements
|
||||
*/
|
||||
--text-field-height: 25px;
|
||||
--text-field-focus-shadow-color: rgba($blue, 0.25);
|
||||
--text-field-focus-shadow-color: rgba(#{$blue}, 0.25);
|
||||
|
||||
/**
|
||||
* Diff view
|
||||
|
|
@ -295,52 +295,52 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
|
|||
|
||||
--diff-line-padding-y: 2px;
|
||||
|
||||
--diff-text-color: $gray-900;
|
||||
--diff-border-color: $gray-200;
|
||||
--diff-gutter-color: $gray-200;
|
||||
--diff-text-color: #{$gray-900};
|
||||
--diff-border-color: #{$gray-200};
|
||||
--diff-gutter-color: #{$gray-200};
|
||||
--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-selected-background-color: $blue-400;
|
||||
--diff-selected-border-color: $blue-600;
|
||||
--diff-selected-gutter-color: $blue-600;
|
||||
--diff-selected-background-color: #{$blue-400};
|
||||
--diff-selected-border-color: #{$blue-600};
|
||||
--diff-selected-gutter-color: #{$blue-600};
|
||||
--diff-selected-text-color: var(--background-color);
|
||||
|
||||
--diff-add-background-color: darken($green-000, 2%);
|
||||
--diff-add-border-color: $green-300;
|
||||
--diff-add-gutter-color: $green-300;
|
||||
--diff-add-gutter-background-color: darken($green-100, 3%);
|
||||
--diff-add-background-color: darken(#{$green-000}, 2%);
|
||||
--diff-add-border-color: #{$green-300};
|
||||
--diff-add-gutter-color: #{$green-300};
|
||||
--diff-add-gutter-background-color: darken(#{$green-100}, 3%);
|
||||
--diff-add-inner-background-color: #acf2bd;
|
||||
--diff-add-text-color: var(--diff-text-color);
|
||||
|
||||
--diff-delete-background-color: $red-000;
|
||||
--diff-delete-border-color: $red-200;
|
||||
--diff-delete-gutter-color: $red-200;
|
||||
--diff-delete-gutter-background-color: $red-100;
|
||||
--diff-delete-background-color: #{$red-000};
|
||||
--diff-delete-border-color: #{$red-200};
|
||||
--diff-delete-gutter-color: #{$red-200};
|
||||
--diff-delete-gutter-background-color: #{$red-100};
|
||||
--diff-delete-inner-background-color: #fdb8c0;
|
||||
--diff-delete-text-color: var(--diff-text-color);
|
||||
|
||||
--diff-hunk-background-color: $blue-000;
|
||||
--diff-hunk-border-color: $blue-200;
|
||||
--diff-hunk-gutter-color: darken($blue-200, 5%);
|
||||
--diff-hunk-gutter-background-color: $blue-100;
|
||||
--diff-hunk-text-color: $gray;
|
||||
--diff-hunk-background-color: #{$blue-000};
|
||||
--diff-hunk-border-color: #{$blue-200};
|
||||
--diff-hunk-gutter-color: darken(#{$blue-200}, 5%);
|
||||
--diff-hunk-gutter-background-color: #{$blue-100};
|
||||
--diff-hunk-text-color: #{$gray};
|
||||
|
||||
--diff-hover-background-color: $blue-300;
|
||||
--diff-hover-border-color: $blue-400;
|
||||
--diff-hover-gutter-color: $blue-400;
|
||||
--diff-hover-background-color: #{$blue-300};
|
||||
--diff-hover-border-color: #{$blue-400};
|
||||
--diff-hover-gutter-color: #{$blue-400};
|
||||
--diff-hover-text-color: var(--background-color);
|
||||
|
||||
--diff-add-hover-background-color: $green-300;
|
||||
--diff-add-hover-border-color: $green-400;
|
||||
--diff-add-hover-gutter-color: $green-400;
|
||||
--diff-add-hover-background-color: #{$green-300};
|
||||
--diff-add-hover-border-color: #{$green-400};
|
||||
--diff-add-hover-gutter-color: #{$green-400};
|
||||
--diff-add-hover-text-color: var(--text-color);
|
||||
|
||||
--diff-delete-hover-background-color: $red-200;
|
||||
--diff-delete-hover-border-color: $red-300;
|
||||
--diff-delete-hover-gutter-color: $red-300;
|
||||
--diff-delete-hover-background-color: #{$red-200};
|
||||
--diff-delete-hover-border-color: #{$red-300};
|
||||
--diff-delete-hover-gutter-color: #{$red-300};
|
||||
--diff-delete-hover-text-color: var(--text-color);
|
||||
|
||||
// Syntax highlighting text colors
|
||||
|
|
@ -351,7 +351,7 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
|
|||
--syntax-string-color: #032f62;
|
||||
--syntax-qualifier-color: #6f42c1;
|
||||
--syntax-type-color: #d73a49;
|
||||
--syntax-comment-color: $gray-500;
|
||||
--syntax-comment-color: #{$gray-500};
|
||||
--syntax-tag-color: #22863a;
|
||||
--syntax-attribute-color: #6f42c1;
|
||||
--syntax-link-color: #032f62;
|
||||
|
|
@ -362,25 +362,25 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
|
|||
--undo-animation-duration: 500ms;
|
||||
|
||||
// Colors for form errors
|
||||
--error-color: $red;
|
||||
--form-error-background: $red-100;
|
||||
--form-error-border-color: $red-200;
|
||||
--form-error-text-color: $red-800;
|
||||
--error-color: #{$red};
|
||||
--form-error-background: #{$red-100};
|
||||
--form-error-border-color: #{$red-200};
|
||||
--form-error-text-color: #{$red-800};
|
||||
|
||||
/** 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-warning-color: $yellow-600;
|
||||
--dialog-error-color: $red;
|
||||
--dialog-warning-color: #{$yellow-600};
|
||||
--dialog-error-color: #{$red};
|
||||
|
||||
/** Inline paths and code */
|
||||
--path-segment-background: $blue-000;
|
||||
--path-segment-background: #{$blue-000};
|
||||
--path-segment-padding: var(--spacing-third);
|
||||
|
||||
/** Diverging notification banner colors */
|
||||
--notification-banner-background: $blue-000;
|
||||
--notification-banner-border-color: $blue-200;
|
||||
--notification-banner-background: #{$blue-000};
|
||||
--notification-banner-border-color: #{$blue-200};
|
||||
--notification-ref-background: rgba(255, 255, 255, 0.75);
|
||||
|
||||
// http://easings.net/#easeOutBack
|
||||
|
|
@ -394,5 +394,5 @@ $overlay-background-color: rgba(0, 0, 0, 0.4);
|
|||
}
|
||||
|
||||
::backdrop {
|
||||
--overlay-background-color: $overlay-background-color;
|
||||
--overlay-background-color: #{$overlay-background-color};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../mixins';
|
||||
|
||||
#desktop-app {
|
||||
#app {
|
||||
// This is just a dummy wrapper needed because react doesn't like
|
||||
// being installed into <body>, see https://github.com/facebook/react/issues/3207
|
||||
&-container {
|
||||
|
|
|
|||
|
|
@ -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
0
src/electron/app-window.ts
Normal file
11
src/electron/now.ts
Normal file
11
src/electron/now.ts
Normal 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;
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>ElectronApp</title>
|
||||
|
|
@ -8,7 +9,9 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<body class="platform-win32 theme-light">
|
||||
<of-root></of-root>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user