From 9e95d4cee670595c9527ca6ae5a0e8d4d0a9ba01 Mon Sep 17 00:00:00 2001 From: crusader Date: Wed, 15 Aug 2018 04:10:02 +0900 Subject: [PATCH] ing --- package.json | 1 + src/app/app.component.html | 9 +- src/app/app.module.ts | 4 + src/app/pages/home/home-page.component.html | 2 +- src/app/pages/pages.component.html | 24 +- src/assets/scss/styles/_variables.scss | 198 ++++++------ .../scss/styles/{_app.scss => app.scss} | 0 src/assets/scss/styles/component/_app.scss | 2 +- src/assets/scss/styles/themes/_dark.scss | 306 ------------------ src/electron/app-window.ts | 0 src/electron/now.ts | 11 + src/index.html | 7 +- 12 files changed, 131 insertions(+), 433 deletions(-) rename src/assets/scss/styles/{_app.scss => app.scss} (100%) delete mode 100644 src/assets/scss/styles/themes/_dark.scss create mode 100644 src/electron/app-window.ts create mode 100644 src/electron/now.ts diff --git a/package.json b/package.json index beda4c4..b1bf4b6 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app/app.component.html b/src/app/app.component.html index 90c6b64..2101fd3 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1 +1,8 @@ - \ No newline at end of file +
+
+ +
+ +
+
+
\ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 057e875..715185a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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] diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html index 62e1f62..01ecb09 100644 --- a/src/app/pages/home/home-page.component.html +++ b/src/app/pages/home/home-page.component.html @@ -2,7 +2,7 @@
-

Home works!!

+

Home works!!!!

diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index 90e1a39..9ae6ded 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -1,23 +1 @@ -
- -
- - - -
- -
- -
- -
- -
-
-
\ No newline at end of file + \ No newline at end of file diff --git a/src/assets/scss/styles/_variables.scss b/src/assets/scss/styles/_variables.scss index 6c89a52..775e66a 100644 --- a/src/assets/scss/styles/_variables.scss +++ b/src/assets/scss/styles/_variables.scss @@ -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}; } diff --git a/src/assets/scss/styles/_app.scss b/src/assets/scss/styles/app.scss similarity index 100% rename from src/assets/scss/styles/_app.scss rename to src/assets/scss/styles/app.scss diff --git a/src/assets/scss/styles/component/_app.scss b/src/assets/scss/styles/component/_app.scss index e063ffb..d3b0747 100644 --- a/src/assets/scss/styles/component/_app.scss +++ b/src/assets/scss/styles/component/_app.scss @@ -1,6 +1,6 @@ @import '../mixins'; -#desktop-app { +#app { // This is just a dummy wrapper needed because react doesn't like // being installed into , see https://github.com/facebook/react/issues/3207 &-container { diff --git a/src/assets/scss/styles/themes/_dark.scss b/src/assets/scss/styles/themes/_dark.scss deleted file mode 100644 index 663d5cb..0000000 --- a/src/assets/scss/styles/themes/_dark.scss +++ /dev/null @@ -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; -} diff --git a/src/electron/app-window.ts b/src/electron/app-window.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/electron/now.ts b/src/electron/now.ts new file mode 100644 index 0000000..4f4145f --- /dev/null +++ b/src/electron/now.ts @@ -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; +} diff --git a/src/index.html b/src/index.html index f979f22..34616e9 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,6 @@ + ElectronApp @@ -8,7 +9,9 @@ - + + - + + \ No newline at end of file