From 483d1f5a16b24e2501198e6803ba11d0318aeb69 Mon Sep 17 00:00:00 2001
From: "chris (daiyi)" <daiyitastic@gmail.com>
Date: Fri, 25 Aug 2017 16:34:10 +0200
Subject: [PATCH] Use slurp macro to read styles from .css file

closes #24
---
 src/day8/re_frame/css/main.css      | 100 ++++++++++++++++++++++++++
 src/day8/re_frame/trace/macros.clj  |   7 ++
 src/day8/re_frame/trace/styles.cljs | 108 +---------------------------
 3 files changed, 110 insertions(+), 105 deletions(-)
 create mode 100644 src/day8/re_frame/css/main.css
 create mode 100644 src/day8/re_frame/trace/macros.clj

diff --git a/src/day8/re_frame/css/main.css b/src/day8/re_frame/css/main.css
new file mode 100644
index 0000000..4346c30
--- /dev/null
+++ b/src/day8/re_frame/css/main.css
@@ -0,0 +1,100 @@
+#--re-frame-trace-- {
+  background: white;
+  color: black;
+  font-family: 'courier new', monospace;
+}
+#--re-frame-trace-- tbody {
+  color: #aaa;
+}
+#--re-frame-trace-- tr:hover {
+  transition: all 0.1s ease-out;
+  background: aliceblue;
+  filter: brightness(90%);
+}
+#--re-frame-trace-- tr:nth-child(even) {
+  background: aliceblue;
+}
+#--re-frame-trace-- .button {
+  padding: 5px 5px 3px;
+  margin: 5px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+#--re-frame-trace-- .text-button {
+  border-bottom: 1px dotted #888;
+  font-weight: normal;
+}
+#--re-frame-trace-- .button:focus,
+#--re-frame-trace-- .text-button:focus {
+  border-radius: 2px 2px 0 0;
+  -webkit-box-shadow: inset 0px -5px 0px 0px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: inset 0px -5px 0px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0px -5px 0px 0px rgba(0, 0, 0, 0.3);
+}
+#--re-frame-trace-- .icon-button {
+  font-size: 10px;
+}
+#--re-frame-trace-- .tab {
+  background: transparent;
+  border-radius: 0;
+  text-transform: uppercase;
+  font-family: monospace;
+  letter-spacing: 2px;
+  margin-bottom: 0;
+  padding-bottom: 4px;
+  vertical-align: bottom;
+}
+#--re-frame-trace-- .tab.active {
+  background: transparent;
+  border-bottom: 3px solid lightblue;
+  border-radius: 0;
+  padding-bottom: 1px;
+}
+#--re-frame-trace-- ul.filter-items {
+  list-style-type: none;
+  padding: 0;
+  margin: 0 -5px;
+  margin-top: 10px;
+}
+#--re-frame-trace-- .filter-items li {
+  color: #333;
+  background: #efefef;
+  display: inline-block;
+  font-size: 0.9em;
+  margin: 5px;
+}
+#--re-frame-trace-- .filter-items li .filter-item-string {
+  color: #616cdb;
+}
+#--re-frame-trace-- .icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+}
+#--re-frame-trace-- .icon-remove {
+  margin-left: 10px;
+}
+#--re-frame-trace-- select {
+  background: white;
+  font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+#--re-frame-trace-- .nav {
+  background: #efeef1;
+  color: #222;
+}
+#--re-frame-trace-- .panel-content-top {
+  flex: 1;
+}
+#--re-frame-trace-- .panel-content-scrollable {
+  margin: 10px 0 0 10px;
+  flex: 1 0 auto;
+  height: 100%;
+  overflow: auto;
+}
+#--re-frame-trace-- .filter-control {
+  margin: 10px 0 0 10px;
+}
diff --git a/src/day8/re_frame/trace/macros.clj b/src/day8/re_frame/trace/macros.clj
new file mode 100644
index 0000000..b3b2542
--- /dev/null
+++ b/src/day8/re_frame/trace/macros.clj
@@ -0,0 +1,7 @@
+(ns day8.re-frame.trace.macros
+  (:require [clojure.java.io :as io]))
+
+(defmacro slurp-macro
+  "Reads a file as a string. Slurp is wrapped in a macro so it can interact with local files before clojurescript compilation."
+  [path]
+  (slurp (io/resource path)))
diff --git a/src/day8/re_frame/trace/styles.cljs b/src/day8/re_frame/trace/styles.cljs
index b17a848..a20b42e 100644
--- a/src/day8/re_frame/trace/styles.cljs
+++ b/src/day8/re_frame/trace/styles.cljs
@@ -1,106 +1,4 @@
-(ns day8.re-frame.trace.styles)
+(ns day8.re-frame.trace.styles
+  (:require-macros [day8.re-frame.trace.macros :as macros]))
 
-(defonce panel-styles "
-#--re-frame-trace-- {
-  background: white;
-  color: black;
-  font-family: 'courier new', monospace;
-}
-#--re-frame-trace-- tbody {
-  color: #aaa;
-}
-#--re-frame-trace-- tr:hover {
-  transition: all 0.1s ease-out;
-  background: aliceblue;
-  filter: brightness(90%);
-}
-#--re-frame-trace-- tr:nth-child(even) {
-  background: aliceblue;
-}
-#--re-frame-trace-- .button {
-  padding: 5px 5px 3px;
-  margin: 5px;
-  border-radius: 2px;
-  cursor: pointer;
-}
-#--re-frame-trace-- .text-button {
-  border-bottom: 1px dotted #888;
-  font-weight: normal;
-}
-#--re-frame-trace-- .button:focus, .text-button:focus {
-  border-radius: 2px 2px 0 0;
-  -webkit-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
-  -moz-box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
-  box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
-}
-#--re-frame-trace-- .icon-button {
-  font-size: 10px;
-}
-#--re-frame-trace-- button.tab {
-
-}
-#--re-frame-trace-- .tab {
-  background: transparent;
-  border-radius: 0;
-  text-transform: uppercase;
-  font-family: monospace;
-  letter-spacing: 2px;
-  margin-bottom: 0;
-  padding-bottom: 4px;
-  vertical-align: bottom;
-}
-#--re-frame-trace-- .tab.active {
-  background: transparent;
-  border-bottom: 3px solid lightblue;
-  border-radius: 0;
-  padding-bottom: 1px;
-}
-#--re-frame-trace-- ul.filter-items {
-  list-style-type: none;
-  padding: 0;
-  margin: 0 -5px;
-  margin-top: 10px;
-}
-#--re-frame-trace-- .filter-items li {
-  color: #333;
-  background: #efefef;
-  display: inline-block;
-  font-size: 0.9em;
-  margin:  5px;
-}
-#--re-frame-trace-- .filter-items li .filter-item-string {
-  color: #616cdb;
-}
-#--re-frame-trace-- .icon {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  stroke-width: 0;
-  stroke: currentColor;
-  fill: currentColor;
-}
-#--re-frame-trace-- .icon-remove {
-  margin-left: 10px;
-}
-#--re-frame-trace-- select {
-  background: white;
-  font-family: 'courier new', monospace;
-  font-size: 1em;
-}
-#--re-frame-trace-- .nav {
-  background: #efeef1;
-  color: #222;
-}
-#--re-frame-trace-- .panel-content-top {
-  flex: 1;
-}
-#--re-frame-trace-- .panel-content-scrollable {
-  margin: 0 0 10px 5px;
-  overflow: auto;
-  flex: 1 1 auto;
-}
-#--re-frame-trace-- .filter-control {
-  margin: 10px 0 0 10px;
-  flex: none;
-}
-")
+(def panel-styles (macros/slurp-macro "day8/re_frame/css/main.css"))