From 6fc8702a3422d5adbeecd870f1a9108ae7bb64fc Mon Sep 17 00:00:00 2001 From: Teemu Patja Date: Sat, 11 Feb 2017 14:53:32 +0200 Subject: [PATCH] Move inline SVG hiccup to separate module --- resources/public/cards.html | 13 +++ resources/public/img/logo.svg | 16 ++++ src/cljs/commiteth/core.cljs | 56 +++--------- src/cljs/commiteth/svg.cljs | 41 +++++++++ test/cljs/commiteth/cards.cljs | 162 +++++++++++++++++++++++++++++++++ 5 files changed, 243 insertions(+), 45 deletions(-) create mode 100644 resources/public/cards.html create mode 100644 resources/public/img/logo.svg create mode 100644 src/cljs/commiteth/svg.cljs create mode 100644 test/cljs/commiteth/cards.cljs diff --git a/resources/public/cards.html b/resources/public/cards.html new file mode 100644 index 0000000..4da97a1 --- /dev/null +++ b/resources/public/cards.html @@ -0,0 +1,13 @@ + + + + + + + + + +
+ + + diff --git a/resources/public/img/logo.svg b/resources/public/img/logo.svg new file mode 100644 index 0000000..7c3d1af --- /dev/null +++ b/resources/public/img/logo.svg @@ -0,0 +1,16 @@ + + + + 07EE722E-6139-44AF-90DC-0B37676CEE51 + Created with sketchtool. + + + + + + + + + \ No newline at end of file diff --git a/src/cljs/commiteth/core.cljs b/src/cljs/commiteth/core.cljs index e9709c2..53fa2bf 100644 --- a/src/cljs/commiteth/core.cljs +++ b/src/cljs/commiteth/core.cljs @@ -14,6 +14,7 @@ [commiteth.common :refer [input checkbox]] [commiteth.subscriptions :refer [user-address-path]] [commiteth.config :as config] + [commiteth.svg :as svg] [clojure.set :refer [rename-keys]] [re-frisk.core :refer [enable-re-frisk!]]) (:import goog.History)) @@ -63,22 +64,7 @@ :size 55 :type "text" :value-path user-address-path})] - [:svg.octicon.octicon-broadcast - {:aria-hidden "true", - :height "16", - :version "1.1", - :viewBox "0 0 16 16", - :width "16"} - [:path - {:d "M9 9H8c.55 0 1-.45 1-1V7c0-.55-.45-1-1-1H7c-.55 - 0-1 .45-1 1v1c0 .55.45 1 1 1H6c-.55 0-1 .45-1 - 1v2h1v3c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-3h1v-2c0-.55-.45-1-1-1zM7 - 7h1v1H7V7zm2 4H8v4H7v-4H6v-1h3v1zm2.09-3.5c0-1.98-1.61-3.59-3.59-3.59A3.593 - 3.593 0 0 0 4 8.31v1.98c-.61-.77-1-1.73-1-2.8 0-2.48 2.02-4.5 - 4.5-4.5S12 5.01 12 7.49c0 1.06-.39 2.03-1 2.8V8.31c.06-.27.09-.53.09-.81zm3.91 - 0c0 2.88-1.63 5.38-4 6.63v-1.05a6.553 6.553 0 0 0 3.09-5.58A6.59 6.59 0 0 0 - 7.5.91 6.59 6.59 0 0 0 .91 7.5c0 2.36 1.23 4.42 3.09 5.58v1.05A7.497 - 7.497 0 0 1 7.5 0C11.64 0 15 3.36 15 7.5z"}]]]]]))) + [svg/octicon-broadcast]]]]))) (defn header [] (let [page (rf/subscribe [:page]) @@ -87,14 +73,17 @@ [:header.main-header [:div.container [:div.flex-table.mt-4.mb-4 - [:a - {:href "/"} - [:img {:src "img/logo.png", :alt "commiteth", :width "100"}]] + [:header.logo] + [:a {:href "/"} + [:img {:src "/img/logo.svg"} + + ;;[:img {:src "img/logo.png", :alt "commiteth", :width "100"}] + ]] [:div.flex-table-item.flex-table-item-primary [:a {:href "/"}] [:h1.main-title.lh-condensed "commiteth"] [:span.main-link - "earn ETH for commits"]] + "Earn ETH by committing to open source projects"]] [:div.flex-table-item.flex-table-item-primary [login-link]]] [:div.tabnav @@ -103,28 +92,12 @@ [:a.tabnav-tab {:href "#" :class (when (= :issues @page) "selected")} - [:svg.octicon.octicon-repo - {:aria-hidden "true", - :height "16", - :version "1.1", - :viewBox "0 0 12 16", - :width "12"} - [:path - {:d - "M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"}]] + [svg/octicon-repo] "Open Bounties"] (when @user [:a.tabnav-tab {:href "#/manage" :class (when (= :manage @page) "selected")} - [:svg.octicon.octicon-organization - {:aria-hidden "true", - :height "16", - :version "1.1", - :viewBox "0 0 16 16", - :width "16"} - [:path - {:d - "M16 12.999c0 .439-.45 1-1 1H7.995c-.539 0-.994-.447-.995-.999H1c-.54 0-1-.561-1-1 0-2.634 3-4 3-4s.229-.409 0-1c-.841-.621-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.442.58 2.5 3c.058 2.41-.159 2.379-1 3-.229.59 0 1 0 1s1.549.711 2.42 2.088C9.196 9.369 10 8.999 10 8.999s.229-.409 0-1c-.841-.62-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.437.581 2.495 3c.059 2.41-.158 2.38-1 3-.229.59 0 1 0 1s3.005 1.366 3.005 4"}]] + [svg/octicon-organization] "Manage Transactions"])]]]]))) (def pages @@ -139,8 +112,6 @@ [error-pane] [(pages @(rf/subscribe [:page]))]])) -;; ------------------------- -;; Routes (secretary/set-config! :prefix "#") (secretary/defroute "/" [] @@ -151,9 +122,6 @@ (rf/dispatch [:set-active-page :manage]) (secretary/dispatch! "/"))) -;; ------------------------- -;; History -;; must be called after routes have been defined (defn hook-browser-navigation! [] (doto (History.) (events/listen @@ -162,8 +130,6 @@ (secretary/dispatch! (.-token event)))) (.setEnabled true))) -;; ------------------------- -;; Initialize app (defn mount-components [] (r/render [#'page] (.getElementById js/document "app"))) diff --git a/src/cljs/commiteth/svg.cljs b/src/cljs/commiteth/svg.cljs new file mode 100644 index 0000000..6305d66 --- /dev/null +++ b/src/cljs/commiteth/svg.cljs @@ -0,0 +1,41 @@ +(ns .commiteth.svg) + +(defn octicon-broadcast [] + [:svg.octicon.octicon-broadcast + {:aria-hidden "true", + :height "16", + :version "1.1", + :viewBox "0 0 16 16", + :width "16"} + [:path + {:d "M9 9H8c.55 0 1-.45 1-1V7c0-.55-.45-1-1-1H7c-.55 + 0-1 .45-1 1v1c0 .55.45 1 1 1H6c-.55 0-1 .45-1 + 1v2h1v3c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-3h1v-2c0-.55-.45-1-1-1zM7 + 7h1v1H7V7zm2 4H8v4H7v-4H6v-1h3v1zm2.09-3.5c0-1.98-1.61-3.59-3.59-3.59A3.593 + 3.593 0 0 0 4 8.31v1.98c-.61-.77-1-1.73-1-2.8 0-2.48 2.02-4.5 + 4.5-4.5S12 5.01 12 7.49c0 1.06-.39 2.03-1 2.8V8.31c.06-.27.09-.53.09-.81zm3.91 + 0c0 2.88-1.63 5.38-4 6.63v-1.05a6.553 6.553 0 0 0 3.09-5.58A6.59 6.59 0 0 0 + 7.5.91 6.59 6.59 0 0 0 .91 7.5c0 2.36 1.23 4.42 3.09 5.58v1.05A7.497 + 7.497 0 0 1 7.5 0C11.64 0 15 3.36 15 7.5z"}]]) + +(defn octicon-repo [] + [:svg.octicon.octicon-repo + {:aria-hidden "true", + :height "16", + :version "1.1", + :viewBox "0 0 12 16", + :width "12"} + [:path + {:d + "M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"}]]) + +(defn octicon-organization [] + [:svg.octicon.octicon-organization + {:aria-hidden "true", + :height "16", + :version "1.1", + :viewBox "0 0 16 16", + :width "16"} + [:path + {:d + "M16 12.999c0 .439-.45 1-1 1H7.995c-.539 0-.994-.447-.995-.999H1c-.54 0-1-.561-1-1 0-2.634 3-4 3-4s.229-.409 0-1c-.841-.621-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.442.58 2.5 3c.058 2.41-.159 2.379-1 3-.229.59 0 1 0 1s1.549.711 2.42 2.088C9.196 9.369 10 8.999 10 8.999s.229-.409 0-1c-.841-.62-1.058-.59-1-3 .058-2.419 1.367-3 2.5-3s2.437.581 2.495 3c.059 2.41-.158 2.38-1 3-.229.59 0 1 0 1s3.005 1.366 3.005 4"}]]) diff --git a/test/cljs/commiteth/cards.cljs b/test/cljs/commiteth/cards.cljs new file mode 100644 index 0000000..d0c2c8c --- /dev/null +++ b/test/cljs/commiteth/cards.cljs @@ -0,0 +1,162 @@ +(ns commiteth.cards + (:require [reagent.core :as r] + [devcards.core] + [commiteth.core-test] + [cljs.test :refer-macros [is testing]] + [devcards.core :refer-macros [defcard-rg + deftest + start-devcard-ui!]])) + + +(enable-console-print!) + + +(def app-state (r/atom {:repo-state :disabled + :active-tab :activity})) + + +(deftest tests-can-be-done-here + (is (= 0 0))) + +(defn fake-toggle-action [app-state] + (let [repo-state (:repo-state @app-state)] + (when-not (= repo-state :busy) + (swap! app-state assoc :repo-state :busy) + (let [to-state (if (= repo-state :enabled) + :disabled + :enabled)] + (.setTimeout js/window + #(swap! app-state assoc :repo-state to-state) + 1000))))) + + +(defn repo-toggle-button [button-state on-click] + (case button-state + :enabled [:div.ui.two.column.container + [:div.ui.button.small.repo-added-button + [:i.icon.check] + "Added"] + [:a.ui.item.remove-link {:on-click on-click} "Remove"]] + :disabled [:div.ui.button.small {:on-click on-click} "Add"] + :busy [:div.ui.button.small.disabled.loading "Busy..."])) + +(defn repo-dynamic [state-ratom] + [:div.ui.card + [:div.content + [:div.repo-label "here-be-dragons"] + [:div.repo-description "Here is a description for the repository."] + [:div.ui.floated.center + [repo-toggle-button + (:repo-state @app-state) + #(fake-toggle-action app-state)]]]]) + +(defcard-rg repo-card-dynamic + [repo-dynamic app-state] + app-state) + + +(defn top-hunters-dynamic [state-ratom] + [:div "TODO"]) + + +(defn activate-tab! [tab] + (swap! app-state assoc :active-tab tab)) + +(defn tabs [app-state] + (let [active-tab (:active-tab app-state)] + [:div.ui.attached.tabular.menu.tiny + (for [[tab caption] [[:activity "Activity"] + [:manage "Repositories"] + [:bounties "Bounties"]]] + (let [props {:class (str "ui item" + (when (= active-tab tab) " active")) + :on-click #(activate-tab! tab)}] + ^{:key tab} [:div props caption]))])) + + +(defn page-header-dynamic [state-ratom] + [:div.ui.grid.container.commiteth-header + [:div.ui.grid.four.column.container + [:div.column + [:img {:src "/img/logo.svg"}]] + ^{:key 1} [:div.column] + ^{:key 2} [:div.column] + [:div.column + [:div.ui.button.tiny "Sign in"]]] + [:div.ui.text.content.justified + [:div.ui.divider.hidden] + [:h2.ui.header "Commit ETH"] + [:h3.ui.subheader "Earn ETH by committing to open source projects"] + [:div.ui.divider.hidden]] + [tabs @state-ratom]]) + +(defcard-rg page-header + [page-header-dynamic app-state] + app-state + {}) + +#_{:activity-item {:type :bounty-created + :issue-id 1 + :foo 42}} + +(defcard-rg feeditem-bounty-created + "An activity feed item with a bounty-created event" + [:div.ui.segment + [:div.ui.grid + [:div.six.column.row + [:div.column + [:img.ui.tiny.circular.image {:src "https://randomuser.me/api/portraits/men/4.jpg"}]] + [:div.five.wide.column + [:div.ui.grid + [:div.row + [:h3 "Random User"]] + [:div.row + [:div.content + "ETH 15 bounty for " [:a {:href "#"} "Fix crash"]]] + [:div.row + [:div.ui.label.tiny "ETH 15"] + [:div.time "2h ago"]]]]]]]) + + +(defcard-rg feeditem-claim-submitted + "An activity feed item with a claim event" + [:div.ui.segment + [:div.ui.grid + [:div.six.column.row + [:div.column + [:img.ui.tiny.circular.image {:src "https://randomuser.me/api/portraits/men/5.jpg"}]] + [:div.five.wide.column + [:div.ui.grid + [:div.row + [:h3 "Pseudo-random User"]] + [:div.row + [:div.content + "Submitted a claim for " [:a {:href "#"} "Fix crash"]]] + [:div.row + [:div.time "2h ago"]]]]]]]) + + +(defn dropdown-component [state-ratom] + (let [menu (if (:dropdown-open? @state-ratom) + [:div.ui.menu.transition.visible] + [:div.ui.menu])] + [:div.ui.right.dropdown.item + {:on-click #(swap! state-ratom update-in [:dropdown-open?] not)} + (:name @state-ratom) + [:i.dropdown.icon] + (into menu + (for [item (:items @state-ratom)] + ^{:key item} [:div.item item]))])) + + +(defcard-rg user-menu + "Top right user menu component" + (fn [state _] + [:div.ui.text.menu + [:div.ui.item + [:img.ui.mini.circular.image {:src "https://randomuser.me/api/portraits/men/4.jpg"}]] + [dropdown-component state]]) + (r/atom {:dropdown-open? false + :name "Random User" + :items ["foo" "bar"]}) + {:inspect-data true})