diff --git a/images/snowman.png b/images/snowman.png new file mode 100644 index 0000000..b8ed177 Binary files /dev/null and b/images/snowman.png differ diff --git a/src/webviews/apps/rebase/rebase.html b/src/webviews/apps/rebase/rebase.html index f98e1c6..56fa318 100644 --- a/src/webviews/apps/rebase/rebase.html +++ b/src/webviews/apps/rebase/rebase.html @@ -11,6 +11,9 @@ + + +

GitLens Interactive Rebase

diff --git a/src/webviews/apps/rebase/rebase.ts b/src/webviews/apps/rebase/rebase.ts index 6fdd8e6..18e5346 100644 --- a/src/webviews/apps/rebase/rebase.ts +++ b/src/webviews/apps/rebase/rebase.ts @@ -16,6 +16,7 @@ import { } from '../../protocol'; import { App } from '../shared/appBase'; import { DOM } from '../shared/dom'; +import { Snow } from '../shared/snow'; const rebaseActions = ['pick', 'reword', 'edit', 'squash', 'fixup', 'drop']; const rebaseActionsMap = new Map([ @@ -432,3 +433,4 @@ class RebaseEditor extends App { } new RebaseEditor(); +requestAnimationFrame(() => new Snow(false)); diff --git a/src/webviews/apps/scss/base.scss b/src/webviews/apps/scss/base.scss index 4a7d4aa..50edcf4 100644 --- a/src/webviews/apps/scss/base.scss +++ b/src/webviews/apps/scss/base.scss @@ -13,29 +13,6 @@ body { font-size: 100% !important; } -// canvas.snow { -// max-width: calc(100% - 20px); -// pointer-events: none; -// position: fixed; -// z-index: 2147483646; -// } - -// .snow__trigger { -// cursor: pointer; -// position: fixed; -// right: 10px; -// top: 5px; -// transform: rotate(-20deg); -// width: 22px; -// z-index: 2147483647; - -// & svg:hover { -// & path:first-child { -// fill: #f30000; -// } -// } -// } - a { border: 0; color: var(--color-link-foreground); diff --git a/src/webviews/apps/scss/rebase.scss b/src/webviews/apps/scss/rebase.scss index 071b45c..6d4241a 100644 --- a/src/webviews/apps/scss/rebase.scss +++ b/src/webviews/apps/scss/rebase.scss @@ -353,3 +353,5 @@ $entry-padding: 5px; margin: 0 1px 0 -1px; } } + +@import 'snow'; diff --git a/src/webviews/apps/scss/settings.scss b/src/webviews/apps/scss/settings.scss index fa25ea0..ba4f277 100644 --- a/src/webviews/apps/scss/settings.scss +++ b/src/webviews/apps/scss/settings.scss @@ -678,3 +678,4 @@ section { @import 'utils'; @import 'popup'; +@import 'snow'; diff --git a/src/webviews/apps/scss/snow.scss b/src/webviews/apps/scss/snow.scss new file mode 100644 index 0000000..4b6df5a --- /dev/null +++ b/src/webviews/apps/scss/snow.scss @@ -0,0 +1,43 @@ +canvas.snow { + max-width: calc(100% - 20px); + pointer-events: none; + position: fixed; + z-index: 2147483646; +} + +.snow__trigger { + cursor: pointer; + position: fixed; + left: 7px; + top: 7px; + transform: rotate(-7deg); + width: 36px; + z-index: 2147483647; + opacity: 0.6; + transition: filter 250ms, opacity 250ms, transform 250ms; + + body:not(.snowing) & { + filter: grayscale(100%); + opacity: 0.5; + } + + &:hover { + filter: unset !important; + opacity: 0.9 !important; + transform: rotate(-4deg) scale(1.1); + } +} + +.snow__trigger--right { + right: 15px; + left: unset; + top: 3px; + + transform: rotate(4deg) scaleX(-1); + + &:hover { + filter: unset !important; + opacity: 0.9 !important; + transform: rotate(1deg) scaleX(-1) scale(1.1); + } +} diff --git a/src/webviews/apps/scss/welcome.scss b/src/webviews/apps/scss/welcome.scss index 3b1a3f9..46b90c8 100644 --- a/src/webviews/apps/scss/welcome.scss +++ b/src/webviews/apps/scss/welcome.scss @@ -551,3 +551,4 @@ section { } @import 'utils'; +@import 'snow'; diff --git a/src/webviews/apps/settings/settings.html b/src/webviews/apps/settings/settings.html index b174397..c868c58 100644 --- a/src/webviews/apps/settings/settings.html +++ b/src/webviews/apps/settings/settings.html @@ -156,6 +156,9 @@ + + +
diff --git a/src/webviews/apps/settings/settings.ts b/src/webviews/apps/settings/settings.ts index b90fd0d..a622b8c 100644 --- a/src/webviews/apps/settings/settings.ts +++ b/src/webviews/apps/settings/settings.ts @@ -4,6 +4,7 @@ import '../scss/settings.scss'; import { IpcMessage, onIpcNotification, SettingsDidRequestJumpToNotificationType, SettingsState } from '../../protocol'; import { AppWithConfig } from '../shared/appWithConfigBase'; import { DOM } from '../shared/dom'; +import { Snow } from '../shared/snow'; export class SettingsApp extends AppWithConfig { private _scopes: HTMLSelectElement | null = null; @@ -228,3 +229,4 @@ export class SettingsApp extends AppWithConfig { } new SettingsApp(); +requestAnimationFrame(() => new Snow()); diff --git a/src/webviews/apps/welcome/snow.ts b/src/webviews/apps/shared/snow.ts similarity index 90% rename from src/webviews/apps/welcome/snow.ts rename to src/webviews/apps/shared/snow.ts index 28a5c5c..cbfb4cb 100644 --- a/src/webviews/apps/welcome/snow.ts +++ b/src/webviews/apps/shared/snow.ts @@ -38,8 +38,6 @@ class Snowflake { } export class Snow { - snowing = false; - private readonly _canvas: any; private readonly _ctx: any; private _height: number = 0; @@ -49,7 +47,7 @@ export class Snow { private readonly _clearBound: any; private readonly _updateBound: any; - constructor() { + constructor(public snowing: boolean = true) { this._clearBound = this.clear.bind(this); this._updateBound = this.update.bind(this); @@ -58,17 +56,19 @@ export class Snow { const trigger = document.querySelector('.snow__trigger'); if (trigger != null) { - trigger.addEventListener('click', () => this.onToggle()); + trigger.addEventListener('click', () => this.onToggle(!this.snowing)); } window.addEventListener('resize', () => this.onResize()); this.onResize(); - this.onToggle(); + this.onToggle(snowing); } - onToggle() { - this.snowing = !this.snowing; + onToggle(snowing: boolean) { + this.snowing = snowing; + document.body.classList.toggle('snowing', this.snowing); + if (this.snowing) { this.createSnowflakes(); requestAnimationFrame(this._updateBound); diff --git a/src/webviews/apps/welcome/welcome.html b/src/webviews/apps/welcome/welcome.html index b0a3dd2..80bed8d 100644 --- a/src/webviews/apps/welcome/welcome.html +++ b/src/webviews/apps/welcome/welcome.html @@ -11,20 +11,9 @@ - + + +
diff --git a/src/webviews/apps/welcome/welcome.ts b/src/webviews/apps/welcome/welcome.ts index f1001d3..0759548 100644 --- a/src/webviews/apps/welcome/welcome.ts +++ b/src/webviews/apps/welcome/welcome.ts @@ -2,8 +2,8 @@ /*global window*/ import '../scss/welcome.scss'; import { WelcomeState } from '../../protocol'; -// import { Snow } from './snow'; import { AppWithConfig } from '../shared/appWithConfigBase'; +import { Snow } from '../shared/snow'; export class WelcomeApp extends AppWithConfig { constructor() { @@ -13,4 +13,4 @@ export class WelcomeApp extends AppWithConfig { } new WelcomeApp(); -// requestAnimationFrame(() => new Snow()); +requestAnimationFrame(() => new Snow());