Make the sidebar go and look good
This commit is contained in:
Jeremy Dormitzer
parent
6652b4141e
commit
a6fa68fd34
@ -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;
|
||||
}
|
||||
|
||||
6
ext/icons/stop-16.svg
Normal file
6
ext/icons/stop-16.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="context-fill" d="M9.414 8l5.293-5.293a1 1 0 0 0-1.414-1.414L8 6.586 2.707 1.293a1 1 0 0 0-1.414 1.414L6.586 8l-5.293 5.293a1 1 0 1 0 1.414 1.414L8 9.414l5.293 5.293a1 1 0 0 0 1.414-1.414z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 514 B |
@ -5,12 +5,17 @@
|
||||
<link rel="stylesheet" href="css/sidebar.css">
|
||||
<script src="js/browser-polyfill.min.js"></script>
|
||||
<script src="js/generated/out/cljs_base.js"></script>
|
||||
<script src="js/generated/sidebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidebar">
|
||||
<div class="card title30">Hacker News Conversation</div>
|
||||
<div class="storiesContainer" id="storiesContainer"></div>
|
||||
<div id="sidebar">
|
||||
<div class="sidebarHeader">
|
||||
<span class="body30 headerTitle">Looped In</span>
|
||||
<button class="iconButton" id="closeSidebar">
|
||||
<img src="icons/stop-16.svg" width="16px" height="16px">
|
||||
</button>
|
||||
</div>
|
||||
<div id="sidebarContent"></div>
|
||||
</div>
|
||||
<script src="js/generated/sidebar.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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 <!]]
|
||||
[looped-in.hackernews :as hn]
|
||||
@ -59,12 +60,15 @@
|
||||
$comments)))
|
||||
|
||||
(defn render-items [items]
|
||||
(dom/removeChildren (dom/getElement "storiesContainer"))
|
||||
(let [stories (filter #(= "story" (.-type %)) items)
|
||||
#_(dom/removeChildren (dom/getElement "sidebarContent"))
|
||||
#_(let [stories (filter #(= "story" (.-type %)) items)
|
||||
$stories (clj->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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user