jdormit/looped-in
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make comments indicator clickable instead of whole card

Browse Source
This commit is contained in:
Jeremy Dormitzer 2018-01-20 16:33:55 -05:00
parent 93e407d32b
commit 7c68c36feb
No known key found for this signature in database
GPG Key ID: 04F17C0F5A32C320
4 changed files with 76 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ext/css/sidebar.css
View File

@ -285,6 +285,19 @@ html, body {
justify-content: center;
}
.commentsIndicator span {
padding: 4px;
padding-bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.commentsIndicator.clickable:hover span {
background-color: #d7d7db;
cursor: default;
}
.commentHeader {
display: flex;
align-items: center;

2
ext/icons/arrowhead-down-16.svg
View File

@ -2,5 +2,5 @@
- 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="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8 9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"></path>
<path fill="#737373" d="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8 9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"></path>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 459 B

After

Width:  |  Height:  |  Size: 454 B

38
src/looped_in/components.cljs
View File

@ -20,15 +20,41 @@
(defn caption30 [text]
(dom/createDom "span" "caption30" text))
(defn with-append [el child]
(dom/appendChild el child)
el)
(defn comments-indicator [num-comments]
(dom/createDom "div"
"commentsIndicator"
(caption30 (str num-comments " comment" (when (not= num-comments 1) "s")))))
(let [text (caption30 (str num-comments " comment" (when (not= num-comments 1) "s")))]
(dom/createDom "div"
"commentsIndicator"
(if (> num-comments 0)
(with-append
text
(dom/createDom
"img"
(clj->js
{:src "icons/arrowhead-down-16.svg"
:height "16px"
:width "16px"
:class "clickableArrowIcon"})))
text))))
(defn replies-indicator [num-replies]
(dom/createDom "div"
"commentsIndicator"
(caption30 (str num-replies " " (if (not= num-replies 1) "replies" "reply")))))
(let [text (caption30 (str num-replies " " (if (not= num-replies 1) "replies" "reply")))]
(dom/createDom "div"
"commentsIndicator"
(if (> num-replies 0)
(with-append
text
(dom/createDom
"img"
(clj->js
{:src "icons/arrowhead-down-16.svg"
:height "16px"
:width "16px"
:class "clickableArrowIcon"})))
text))))
(defn with-listener [el type listener]
(events/listen el type listener)

52
src/looped_in/sidebar.cljs
View File

@ -100,18 +100,22 @@
(* (:created_at_i child) 1000))
(components/item-link (:id child)))
(components/comment-text (:text child))
(components/replies-indicator (count (:children child))))
(-> (components/replies-indicator (count (:children child)))
((fn [indicator]
(if (> (count (:children child)) 0)
(-> indicator
(components/with-classes "clickable")
(components/with-listener
"click"
(fn [e]
(dispatch-message
{:type :enq-depth
:index index}))))
indicator)))))
(components/with-classes "child")
((fn [card]
(if (> (count (:children child)) 0)
(-> card
(components/with-classes "clickable")
(components/with-listener
"click"
(fn [e]
(dispatch-message
{:type :enq-depth
:index index}))))
(components/with-classes card "clickable")
card)))))
(->> (:children current-item)
(filter #(contains? % :text))
@ -126,21 +130,25 @@
(components/story-caption (:points hit)
(:author hit)
(* (:created_at_i hit) 1000))
(components/comments-indicator (:num_comments hit)))
(-> (components/comments-indicator (:num_comments hit))
((fn [indicator]
(if (> (:num_comments hit) 0)
(-> indicator
(components/with-classes "clickable")
(components/with-listener
"click"
(fn [e]
(dispatch-message {:type :loading :loading true})
(go
(-> (fetch-item (:objectID hit))
(<!)
((fn [item]
(dispatch-message
{:type :got-item :item item}))))))))
indicator)))))
((fn [card]
(if (> (:num_comments hit) 0)
(-> card
(components/with-classes "clickable")
(components/with-listener
"click"
(fn [e]
(dispatch-message {:type :loading :loading true})
(go
(-> (fetch-item (:objectID hit))
(<!)
((fn [item]
(dispatch-message
{:type :got-item :item item}))))))))
(components/with-classes card "clickable")
card)))))
(:hits state))
#_(let [current-item (get-in-items (:items state) (:depth state))]