From ceb79a7dc548fa5477b1052a6b99a0709e7c26fc Mon Sep 17 00:00:00 2001 From: "bgashler1@users.noreply.github.com" Date: Mon, 26 Sep 2016 17:05:51 -0700 Subject: [PATCH 1/6] Fixed jagged font and simplified colors --- src/vs/workbench/parts/watermark/watermark.css | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/vs/workbench/parts/watermark/watermark.css b/src/vs/workbench/parts/watermark/watermark.css index 8f70bc4b770..f6cee9b5efb 100644 --- a/src/vs/workbench/parts/watermark/watermark.css +++ b/src/vs/workbench/parts/watermark/watermark.css @@ -33,21 +33,16 @@ .monaco-workbench > .part.editor > .watermark dt, .monaco-workbench > .part.editor > .watermark dd { margin-bottom: 17px; - font-weight: 300; } -.monaco-workbench > .part.editor > .watermark dt { +.monaco-workbench > .part.editor > .watermark dt, +.monaco-workbench > .part.editor > .watermark dl { color: rgba(0,0,0,.68); } -.monaco-workbench > .part.editor > .watermark dl { - color: rgba(0,0,0,.9); -} -.vs-dark .monaco-workbench > .part.editor > .watermark dt { - color: rgba(255,255,255,.6); -} +.vs-dark .monaco-workbench > .part.editor > .watermark dt, .vs-dark .monaco-workbench > .part.editor > .watermark dl { - color: #fff; + color: rgba(255,255,255,.6); } .hc-black .monaco-workbench > .part.editor > .watermark dt { From 0286e78812e80bad6015f418d7e4def25c1dafbe Mon Sep 17 00:00:00 2001 From: "bgashler1@users.noreply.github.com" Date: Mon, 26 Sep 2016 17:34:06 -0700 Subject: [PATCH 2/6] Vertically alignl tips + logo (hardcoded for now) --- src/vs/workbench/parts/watermark/watermark.css | 6 +++++- src/vs/workbench/parts/watermark/watermark.ts | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/vs/workbench/parts/watermark/watermark.css b/src/vs/workbench/parts/watermark/watermark.css index f6cee9b5efb..b4b6f8257a5 100644 --- a/src/vs/workbench/parts/watermark/watermark.css +++ b/src/vs/workbench/parts/watermark/watermark.css @@ -3,10 +3,14 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ +.monaco-workbench .part.editor.empty.watermark-tips { + background-position-y: calc(50% - 100px); +} + .monaco-workbench > .part.editor > .watermark { position: absolute; width: 100%; - bottom: 10%; + top: calc(50% + 55px); } .monaco-workbench > .part.editor > .watermark dl { diff --git a/src/vs/workbench/parts/watermark/watermark.ts b/src/vs/workbench/parts/watermark/watermark.ts index d74831385f0..e6d6f68a146 100644 --- a/src/vs/workbench/parts/watermark/watermark.ts +++ b/src/vs/workbench/parts/watermark/watermark.ts @@ -41,6 +41,7 @@ export function create(container: Builder, keybindingService: IKeybindingService 'class': 'watermark', }); function update() { + container.addClass('watermark-tips'); $(div).clearChildren() .element('dl', { }, dl => entries.map(entry => { From faaa39bd36a207d2035bd3557c4aaa223ec09d42 Mon Sep 17 00:00:00 2001 From: "bgashler1@users.noreply.github.com" Date: Mon, 26 Sep 2016 17:40:57 -0700 Subject: [PATCH 3/6] Bold command name. Seperator now "Or" for tips --- src/vs/workbench/parts/watermark/watermark.css | 1 + src/vs/workbench/parts/watermark/watermark.ts | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/parts/watermark/watermark.css b/src/vs/workbench/parts/watermark/watermark.css index b4b6f8257a5..93da8624ed1 100644 --- a/src/vs/workbench/parts/watermark/watermark.css +++ b/src/vs/workbench/parts/watermark/watermark.css @@ -25,6 +25,7 @@ width: 49%; margin: 0 1% 0 0; text-align: right; + font-weight: bold; } .monaco-workbench > .part.editor > .watermark dd { diff --git a/src/vs/workbench/parts/watermark/watermark.ts b/src/vs/workbench/parts/watermark/watermark.ts index e6d6f68a146..380ae70fe6e 100644 --- a/src/vs/workbench/parts/watermark/watermark.ts +++ b/src/vs/workbench/parts/watermark/watermark.ts @@ -50,8 +50,8 @@ export function create(container: Builder, keybindingService: IKeybindingService entry.ids .map(id => keybindingService.lookupKeybindings(id) .map(k => keybindingService.getLabelFor(k)) - .join(', ') || UNBOUND) - .join(' / ') + .join(' or ') || UNBOUND) + .join(' or ') )); })); } From 0efcf1a0a62c21eff55e1409266ce1516946a161 Mon Sep 17 00:00:00 2001 From: "bgashler1@users.noreply.github.com" Date: Mon, 26 Sep 2016 18:10:09 -0700 Subject: [PATCH 4/6] Fade in watermark tips --- src/vs/workbench/parts/watermark/watermark.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/vs/workbench/parts/watermark/watermark.css b/src/vs/workbench/parts/watermark/watermark.css index 93da8624ed1..6d69217f8e0 100644 --- a/src/vs/workbench/parts/watermark/watermark.css +++ b/src/vs/workbench/parts/watermark/watermark.css @@ -11,6 +11,19 @@ position: absolute; width: 100%; top: calc(50% + 55px); + animation: watermarkfadein 2s; + animation-delay: 1s; + animation-fill-mode: forwards; + opacity: 0; +} + +@keyframes watermarkfadein { + from { + opacity: 0; + } + to { + opacity: 1; + } } .monaco-workbench > .part.editor > .watermark dl { From 405c9f1e27d150e5037b9f599d41ae847eb58e9c Mon Sep 17 00:00:00 2001 From: "bgashler1@users.noreply.github.com" Date: Mon, 26 Sep 2016 18:29:20 -0700 Subject: [PATCH 5/6] Fade in and fade out watermark on window size --- .../workbench/parts/watermark/watermark.css | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/src/vs/workbench/parts/watermark/watermark.css b/src/vs/workbench/parts/watermark/watermark.css index 6d69217f8e0..2395c33ff1e 100644 --- a/src/vs/workbench/parts/watermark/watermark.css +++ b/src/vs/workbench/parts/watermark/watermark.css @@ -11,21 +11,34 @@ position: absolute; width: 100%; top: calc(50% + 55px); - animation: watermarkfadein 2s; - animation-delay: 1s; - animation-fill-mode: forwards; - opacity: 0; } @keyframes watermarkfadein { - from { + 0% { opacity: 0; } - to { + 33% { + opacity: 0; + } + 100% { opacity: 1; } } +@media (min-height: 501px) { + .monaco-workbench > .part.editor > .watermark { + animation: watermarkfadein 2s; + opacity: 1; + transition: opacity 2s; + } +} + +@media (max-height: 500px) { + .monaco-workbench > .part.editor > .watermark { + opacity: 0; + } +} + .monaco-workbench > .part.editor > .watermark dl { width: 100%; opacity: .8; From f78b2232f847105e87364eebf466800c8e3dcc46 Mon Sep 17 00:00:00 2001 From: "bgashler1@users.noreply.github.com" Date: Mon, 26 Sep 2016 18:38:28 -0700 Subject: [PATCH 6/6] Animate in Infinity logo on window size change --- src/vs/workbench/parts/watermark/watermark.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/vs/workbench/parts/watermark/watermark.css b/src/vs/workbench/parts/watermark/watermark.css index 2395c33ff1e..cbafeaad260 100644 --- a/src/vs/workbench/parts/watermark/watermark.css +++ b/src/vs/workbench/parts/watermark/watermark.css @@ -5,6 +5,7 @@ .monaco-workbench .part.editor.empty.watermark-tips { background-position-y: calc(50% - 100px); + transition: background-position-y 1s; } .monaco-workbench > .part.editor > .watermark { @@ -29,7 +30,7 @@ .monaco-workbench > .part.editor > .watermark { animation: watermarkfadein 2s; opacity: 1; - transition: opacity 2s; + transition: opacity 1s; } } @@ -37,6 +38,9 @@ .monaco-workbench > .part.editor > .watermark { opacity: 0; } + .monaco-workbench .part.editor.empty.watermark-tips { + background-position-y: 50%; + } } .monaco-workbench > .part.editor > .watermark dl {