Result block stylesheet improvements

[dustinrb]

Currently, block results uses the Atom UI theme for color information.

This changes the stylesheet to use the Atom Syntax colors instead. It also styles block results to look more like inline results.

[pfitzseb]

What would you think about

 styles/ink.less | 46 +++++++++++++++++++---------------------------
 1 file changed, 19 insertions(+), 27 deletions(-)

diff --git a/styles/ink.less b/styles/ink.less
index 586600c..afaa33c 100644
--- a/styles/ink.less
+++ b/styles/ink.less
@@ -66,31 +66,8 @@ atom-text-editor::shadow {
   }
 }

-// TODO: more CSS sharing
-
-.ink.under {
-  font-family: @font-family;
-  color: @text-color;
-
-  cursor: default;
-
-  &.error {
-    color: @text-color-error;
-  }
-
-  background-color: @inset-panel-background-color;
-
-  border-top: 1px solid @syntax-wrap-guide-color;
-  border-bottom: 1px solid @syntax-wrap-guide-color;
-  padding-left: 5px;
-}
-
-
-.ink.inline {
+.result-mixin() {
   color: @syntax-text-color;
-  position: relative;
-  left: 1em;
-
   pointer-events: auto;

   &.error {
@@ -101,8 +78,8 @@ atom-text-editor::shadow {
   background: @syntax-background-color;
   border-left: 2px solid @background-color-info;
   border-right: 2px solid contrast(@syntax-background-color,
-                             darken(@syntax-background-color, 4%),
-                             lighten(@syntax-background-color, 4%));
+                                   darken(@syntax-background-color, 4%),
+                                   lighten(@syntax-background-color, 4%));

   border-radius: 3px;

@@ -111,7 +88,6 @@ atom-text-editor::shadow {
   opacity: 1;
   cursor: default;

-  max-width: 400px;
   overflow: hidden;
   white-space: pre;

@@ -170,6 +146,22 @@ atom-text-editor::shadow {
   }
 }

+.ink.inline {
+  .result-mixin;
+  position: relative;
+  left: 1em;
+  max-width: 400px;
+}
+
+.ink.under {
+  .result-mixin;
+  max-width: 100%;
+  white-space: pre-line;
+  padding: .5em;
+  border-top: 1px solid @syntax-wrap-guide-color;
+  border-bottom: 1px solid @syntax-wrap-guide-color;
+}
+
 .ink.stepper {
   .ink.inline();
   max-width: initial;

That way we get rid of all the duplication, and it looks kinda nice imo.

[dustinrb]

Good point about code reuse. As for block element's readability, I find the horizontal lines and full font-size make it visually difficult to scan through the document. I would prefer a shaded background, a smaller font size, and a slightly larger right indent (see commit 86f8ba3).

I also made tree elements in blocks not limit themselves to 250px to prevent scrollbars within scrollbars. By default, trees are collapsed so the user shouldn't be inundated with multiple lines of output after evaluation.

[dustinrb]

For your convenience, the diff between master and my latest version:

diff --git a/styles/ink.less b/styles/ink.less
index 586600c..57a5ae3 100644
--- a/styles/ink.less
+++ b/styles/ink.less
@@ -66,31 +66,8 @@ atom-text-editor::shadow {
   }
 }

-// TODO: more CSS sharing
-
-.ink.under {
-  font-family: @font-family;
-  color: @text-color;
-
-  cursor: default;
-
-  &.error {
-    color: @text-color-error;
-  }
-
-  background-color: @inset-panel-background-color;
-
-  border-top: 1px solid @syntax-wrap-guide-color;
-  border-bottom: 1px solid @syntax-wrap-guide-color;
-  padding-left: 5px;
-}
-
-
-.ink.inline {
+.result-mixin() {
   color: @syntax-text-color;
-  position: relative;
-  left: 1em;
-
   pointer-events: auto;

   &.error {
@@ -98,11 +75,10 @@ atom-text-editor::shadow {
     border-left: 2px solid @background-color-error;
   }

-  background: @syntax-background-color;
   border-left: 2px solid @background-color-info;
   border-right: 2px solid contrast(@syntax-background-color,
-                             darken(@syntax-background-color, 4%),
-                             lighten(@syntax-background-color, 4%));
+                                   darken(@syntax-background-color, 4%),
+                                   lighten(@syntax-background-color, 4%));

   border-radius: 3px;

@@ -111,7 +87,6 @@ atom-text-editor::shadow {
   opacity: 1;
   cursor: default;

-  max-width: 400px;
   overflow: hidden;
   white-space: pre;

@@ -119,6 +94,11 @@ atom-text-editor::shadow {
     vertical-align: top;
   }

+  a {
+    color: @syntax-text-color;
+    opacity: 0.65;
+  }
+
   p {
     margin: 0;
     padding: 0;
@@ -157,9 +137,7 @@ atom-text-editor::shadow {
       opacity: 1;
     }
   }
-  > .tree > .body {
-    max-height: 250px;
-  }
+

   .editor.editor-colors {
     color: @syntax-text-color;
@@ -170,6 +148,29 @@ atom-text-editor::shadow {
   }
 }

+.ink.inline {
+  .result-mixin;
+  background: @syntax-background-color;
+  position: relative;
+  left: 1em;
+  max-width: 400px;
+
+  > .tree > .body {
+    max-height: 250px;
+  }
+}
+
+.ink.under {
+  .result-mixin;
+  background: contrast(@syntax-background-color,
+                       darken(@syntax-background-color, 3%),
+                       lighten(@syntax-background-color, 3%));
+  font-size: 0.9em;
+  max-width: 100%;
+  white-space: pre-line;
+  padding: 0.5em 0.5em 0.5em 1em;
+}
+
 .ink.stepper {
   .ink.inline();
   max-width: initial;

[pfitzseb]

Alright, let's try this for now. Thanks for the contribution!