From 93e407d32bdcf0041b9e26fd910de11b1007f974 Mon Sep 17 00:00:00 2001 From: Jeremy Dormitzer Date: Sat, 20 Jan 2018 15:53:26 -0500 Subject: [PATCH] Add links back to HN --- ext/css/sidebar.css | 12 ++++++++++++ ext/icons/back-16.svg | 6 ++++++ ext/icons/link-16.svg | 7 +++++++ ext/icons/open-in-new-16.svg | 7 +++++++ ext/icons/refresh-16.svg | 6 ++++++ src/looped_in/components.cljs | 20 ++++++++++++++++---- src/looped_in/sidebar.cljs | 29 +++++++++++++++++++++++------ 7 files changed, 77 insertions(+), 10 deletions(-) create mode 100644 ext/icons/back-16.svg create mode 100644 ext/icons/link-16.svg create mode 100644 ext/icons/open-in-new-16.svg create mode 100644 ext/icons/refresh-16.svg diff --git a/ext/css/sidebar.css b/ext/css/sidebar.css index 2fbf964..806c8d8 100644 --- a/ext/css/sidebar.css +++ b/ext/css/sidebar.css @@ -285,6 +285,18 @@ html, body { justify-content: center; } +.commentHeader { + display: flex; + align-items: center; + justify-content: space-between; +} + +.storyHeader { + display: flex; + align-items: flex-start; + justify-content: space-between; +} + .title30 { font-size: 22px; font-weight: 300; diff --git a/ext/icons/back-16.svg b/ext/icons/back-16.svg new file mode 100644 index 0000000..c4b51aa --- /dev/null +++ b/ext/icons/back-16.svg @@ -0,0 +1,6 @@ + + + + diff --git a/ext/icons/link-16.svg b/ext/icons/link-16.svg new file mode 100644 index 0000000..be75068 --- /dev/null +++ b/ext/icons/link-16.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/ext/icons/open-in-new-16.svg b/ext/icons/open-in-new-16.svg new file mode 100644 index 0000000..727f74a --- /dev/null +++ b/ext/icons/open-in-new-16.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/ext/icons/refresh-16.svg b/ext/icons/refresh-16.svg new file mode 100644 index 0000000..6056af7 --- /dev/null +++ b/ext/icons/refresh-16.svg @@ -0,0 +1,6 @@ + + + + diff --git a/src/looped_in/components.cljs b/src/looped_in/components.cljs index 836747c..5682d29 100644 --- a/src/looped_in/components.cljs +++ b/src/looped_in/components.cljs @@ -30,6 +30,22 @@ "commentsIndicator" (caption30 (str num-replies " " (if (not= num-replies 1) "replies" "reply"))))) +(defn with-listener [el type listener] + (events/listen el type listener) + el) + +(defn item-link [id] + (with-listener + (dom/createDom "a" + (clj->js {:href (str "https://news.ycombinator.com/item?id=" id) + :target "_blank"}) + (dom/createDom "img" + (clj->js {:src "icons/open-in-new-16.svg" + :width 12 + :height 12}))) + "click" + #(.stopPropagation %))) + (defn get-time-ago-str "Returns the string ' ' based on how long ago `timestamp` was, for example '3 days' or '5 hours'" @@ -62,10 +78,6 @@ (for [i (range 1 6)] (dom/createDom "div" (str "rect" i))))) -(defn with-listener [el type listener] - (events/listen el type listener) - el) - (defn with-classes [el & classes] (doseq [class (filter #(not (string/blank? %)) classes)] (classes/add el class)) diff --git a/src/looped_in/sidebar.cljs b/src/looped_in/sidebar.cljs index e5e99bc..a96dbda 100644 --- a/src/looped_in/sidebar.cljs +++ b/src/looped_in/sidebar.cljs @@ -74,18 +74,31 @@ (cons (case (:type current-item) "story" (components/card - (components/body30 (:title current-item)) + (dom/createDom + "div" + "storyHeader" + (components/body30 (:title current-item)) + (components/item-link (:id current-item))) (components/story-caption (:points current-item) (:author current-item) (* (:created_at_i current-item) 1000))) "comment" (components/card - (components/comment-caption (:author current-item) - (* (:created_at_i current-item) 1000)) + (dom/createDom + "div" + "commentHeader" + (components/comment-caption (:author current-item) + (* (:created_at_i current-item) 1000)) + (components/item-link (:id current-item))) (components/comment-text (:text current-item)))) (map-indexed (fn [index child] (-> (components/card - (components/comment-caption (:author child) - (* (:created_at_i child) 1000)) + (dom/createDom + "div" + "commentHeader" + (components/comment-caption + (:author child) + (* (:created_at_i child) 1000)) + (components/item-link (:id child))) (components/comment-text (:text child)) (components/replies-indicator (count (:children child)))) (components/with-classes "child") @@ -105,7 +118,11 @@ (sort-by #(count (:children %)) #(compare %2 %1)))))) (:hits state) (map (fn [hit] (-> (components/card - (components/body30 (:title hit)) + (dom/createDom + "div" + "storyHeader" + (components/body30 (:title hit)) + (components/item-link (:objectID hit))) (components/story-caption (:points hit) (:author hit) (* (:created_at_i hit) 1000))