From a6fa68fd34da2a974f2ef037b655963ef6d97b1c Mon Sep 17 00:00:00 2001 From: Jeremy Dormitzer Date: Wed, 17 Jan 2018 20:16:37 -0500 Subject: [PATCH] Make the sidebar go and look good --- ext/css/sidebar.css | 42 ++++++++++++++++++++++++++++++++++++++ ext/icons/stop-16.svg | 6 ++++++ ext/sidebar.html | 13 ++++++++---- src/looped_in/content.cljs | 36 +++++++++++++++++++++++++++----- src/looped_in/sidebar.cljs | 12 ++++++++--- 5 files changed, 97 insertions(+), 12 deletions(-) create mode 100644 ext/icons/stop-16.svg diff --git a/ext/css/sidebar.css b/ext/css/sidebar.css index 7fa9fca..8ec96ce 100644 --- a/ext/css/sidebar.css +++ b/ext/css/sidebar.css @@ -224,6 +224,29 @@ color: #0c0c0d; } +html, body { + height: 100%; + margin: 0; + padding: 0; +} + +#sidebar { + height: 100%; + background-color: #ededf0; + box-sizing: border-box; +} + +.sidebarHeader { + display: flex; + align-items: center; + padding: 8px; + border-bottom: 2px solid #d7d7db; +} + +.headerTitle { + flex: 1 0 auto; +} + .card { padding: 8px; border-bottom: 1px solid #d7d7db; @@ -245,3 +268,22 @@ font-size: 15px; font-weight: 400; } + +.body30 { + font-size: 17px; + font-weight: 400; +} + +.iconButton { + background-color: inherit; + border: none; + display: flex; + align-items: center; + justify-content: center; + padding: 4px; + margin: 0; +} + +.iconButton:hover { + background-color: #d7d7db; +} diff --git a/ext/icons/stop-16.svg b/ext/icons/stop-16.svg new file mode 100644 index 0000000..721149b --- /dev/null +++ b/ext/icons/stop-16.svg @@ -0,0 +1,6 @@ + + + + diff --git a/ext/sidebar.html b/ext/sidebar.html index 4c54e14..a3b844d 100644 --- a/ext/sidebar.html +++ b/ext/sidebar.html @@ -5,12 +5,17 @@ - -
-
Hacker News Conversation
-
+ + diff --git a/src/looped_in/content.cljs b/src/looped_in/content.cljs index 6f9849a..f8787af 100644 --- a/src/looped_in/content.cljs +++ b/src/looped_in/content.cljs @@ -1,27 +1,53 @@ (ns looped-in.content (:require [goog.dom :as dom] + [goog.events :as events] [goog.style :as style] [looped-in.logging :as log])) +(def sidebar-width 300) + (defn sidebar-dom [] (let [sidebar-url (-> js/browser (.-extension) (.getURL "sidebar.html"))] (dom/createDom "iframe" #js {:src sidebar-url + :id "loopedInSidebar" :style (style/toStyleAttribute #js {:position "fixed" :height "100%" - :width "300px" + :border 0 + :borderRight "2px solid #d7d7db" + :width (str sidebar-width "px") :top 0 :left 0})}))) -(defn open-sidebar [] - (dom/appendChild js/document.body (sidebar-dom))) +(def old-html-padding (atom "")) -(defn handle-message [msg] +(defn open-sidebar [] + (let [$html (.-documentElement js/document) + $body js/document.body + $sidebar (sidebar-dom)] + (reset! old-html-padding (-> $html (.-style) (.-paddingLeft))) + (set! (-> $html (.-style) (.-paddingLeft)) (str sidebar-width "px")) + (dom/appendChild $body $sidebar))) + +(defn close-sidebar [] + (let [$html (.-documentElement js/document) + $sidebar (dom/getElement "loopedInSidebar")] + (dom/removeNode $sidebar) + (set! (-> $html (.-style) (.-paddingLeft)) @old-html-padding))) + +(defn handle-runtime-message [msg] (case (.-type msg) "openSidebar" (open-sidebar))) +(defn handle-window-message [e] + (let [msg (.-data (.getBrowserEvent e))] + (case (.-type msg) + "closeSidebar" (close-sidebar)))) + (-> js/browser (.-runtime) (.-onMessage) - (.addListener handle-message)) + (.addListener handle-runtime-message)) + +(events/listen js/window "message" handle-window-message) diff --git a/src/looped_in/sidebar.cljs b/src/looped_in/sidebar.cljs index bee07e2..d946da6 100644 --- a/src/looped_in/sidebar.cljs +++ b/src/looped_in/sidebar.cljs @@ -1,5 +1,6 @@ (ns looped-in.sidebar (:require [goog.dom :as dom] + [goog.events :as events] [goog.html.sanitizer.HtmlSanitizer :as Sanitizer] [cljs.core.async :refer [go js (map story-dom stories)) - $storiesContainer (dom/getElement "storiesContainer")] + $storiesContainer (dom/getElement "sidebarContent")] (dom/append $storiesContainer $stories))) +(defn handle-close-button [e] + (.postMessage js/window.parent (clj->js {:type "closeSidebar"}) "*")) + (go (-> js/browser (.-runtime) (.sendMessage (clj->js {:type "fetchItems"})) @@ -73,3 +77,5 @@ (array-seq) ((fn [items] (filter #(not (nil? %)) items))) (render-items))) + +(events/listen (dom/getElement "closeSidebar") "click" handle-close-button)