Move inline SVG hiccup to separate module
This commit is contained in:
Teemu Patja
parent
5fb66d551e
commit
6fc8702a34
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset='utf-8'>
|
||||||
|
<style id="com-rigsomelight-devcards-addons-css"></style>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
|
||||||
|
<link href="css/style.css" rel="stylesheet" type="text/css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script src="js/compiled/devcards.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: sketchtool 42 (36781) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>07EE722E-6139-44AF-90DC-0B37676CEE51</title>
|
||||||
|
<desc>Created with sketchtool.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="commiteth-desktop--not-logged-in" transform="translate(-160.000000, -35.000000)" fill-rule="nonzero" fill="#B0F1EE">
|
||||||
|
<g id="header">
|
||||||
|
<g id="logo" transform="translate(160.000000, 35.000000)">
|
||||||
|
<path d="M5.97918472,32.0208153 C-0.65972824,25.3819023 -0.65972824,12.6180977 5.97918472,5.97918472 C9.29958963,2.65877981 13.6518068,0.999051701 18.0037292,1.00000041 L33.9948134,1 C35.3783898,1 36.5,2.10966206 36.5,3.5 C36.5,4.88071187 35.3906622,6 33.9948134,6 L18.5,6 C15.264488,5.87626016 11.9850564,7.04438088 9.51471863,9.51471863 C4.82842712,14.2010101 4.82842712,23.7989899 9.51471863,28.4852814 C11.9850564,30.9556191 15.264488,32.1237398 18.5,31.9896435 L33.9948134,32 C35.3783898,32 36.5,33.1096621 36.5,34.5 C36.5,35.8807119 35.3906622,37 33.9948134,37 L18.0051866,37 C13.65181,37.0009495 9.29959083,35.3412214 5.97918472,32.0208153 Z M17.5,19 C17.5,17.6192881 18.6176026,16.5 20.0034561,16.5 L33.9965439,16.5 C35.3791645,16.5 36.5,17.6096621 36.5,19 C36.5,20.3807119 35.3823974,21.5 33.9965439,21.5 L20.0034561,21.5 C18.6208355,21.5 17.5,20.3903379 17.5,19 Z" id="shape"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -14,6 +14,7 @@
|
||||||
[commiteth.common :refer [input checkbox]]
|
[commiteth.common :refer [input checkbox]]
|
||||||
[commiteth.subscriptions :refer [user-address-path]]
|
[commiteth.subscriptions :refer [user-address-path]]
|
||||||
[commiteth.config :as config]
|
[commiteth.config :as config]
|
||||||
|
[commiteth.svg :as svg]
|
||||||
[clojure.set :refer [rename-keys]]
|
[clojure.set :refer [rename-keys]]
|
||||||
[re-frisk.core :refer [enable-re-frisk!]])
|
[re-frisk.core :refer [enable-re-frisk!]])
|
||||||
(:import goog.History))
|
(:import goog.History))
|
||||||
|
|
@ -63,22 +64,7 @@
|
||||||
:size 55
|
:size 55
|
||||||
:type "text"
|
:type "text"
|
||||||
:value-path user-address-path})]
|
:value-path user-address-path})]
|
||||||
[:svg.octicon.octicon-broadcast
|
[svg/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 header []
|
(defn header []
|
||||||
(let [page (rf/subscribe [:page])
|
(let [page (rf/subscribe [:page])
|
||||||
|
|
@ -87,14 +73,17 @@
|
||||||
[:header.main-header
|
[:header.main-header
|
||||||
[:div.container
|
[:div.container
|
||||||
[:div.flex-table.mt-4.mb-4
|
[:div.flex-table.mt-4.mb-4
|
||||||
[:a
|
[:header.logo]
|
||||||
{:href "/"}
|
[:a {:href "/"}
|
||||||
[:img {:src "img/logo.png", :alt "commiteth", :width "100"}]]
|
[:img {:src "/img/logo.svg"}
|
||||||
|
|
||||||
|
;;[:img {:src "img/logo.png", :alt "commiteth", :width "100"}]
|
||||||
|
]]
|
||||||
[:div.flex-table-item.flex-table-item-primary
|
[:div.flex-table-item.flex-table-item-primary
|
||||||
[:a {:href "/"}]
|
[:a {:href "/"}]
|
||||||
[:h1.main-title.lh-condensed "commiteth"]
|
[:h1.main-title.lh-condensed "commiteth"]
|
||||||
[:span.main-link
|
[:span.main-link
|
||||||
"earn ETH for commits"]]
|
"Earn ETH by committing to open source projects"]]
|
||||||
[:div.flex-table-item.flex-table-item-primary
|
[:div.flex-table-item.flex-table-item-primary
|
||||||
[login-link]]]
|
[login-link]]]
|
||||||
[:div.tabnav
|
[:div.tabnav
|
||||||
|
|
@ -103,28 +92,12 @@
|
||||||
[:a.tabnav-tab
|
[:a.tabnav-tab
|
||||||
{:href "#"
|
{:href "#"
|
||||||
:class (when (= :issues @page) "selected")}
|
:class (when (= :issues @page) "selected")}
|
||||||
[:svg.octicon.octicon-repo
|
[svg/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"}]]
|
|
||||||
"Open Bounties"]
|
"Open Bounties"]
|
||||||
(when @user [:a.tabnav-tab
|
(when @user [:a.tabnav-tab
|
||||||
{:href "#/manage"
|
{:href "#/manage"
|
||||||
:class (when (= :manage @page) "selected")}
|
:class (when (= :manage @page) "selected")}
|
||||||
[:svg.octicon.octicon-organization
|
[svg/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"}]]
|
|
||||||
"Manage Transactions"])]]]])))
|
"Manage Transactions"])]]]])))
|
||||||
|
|
||||||
(def pages
|
(def pages
|
||||||
|
|
@ -139,8 +112,6 @@
|
||||||
[error-pane]
|
[error-pane]
|
||||||
[(pages @(rf/subscribe [:page]))]]))
|
[(pages @(rf/subscribe [:page]))]]))
|
||||||
|
|
||||||
;; -------------------------
|
|
||||||
;; Routes
|
|
||||||
(secretary/set-config! :prefix "#")
|
(secretary/set-config! :prefix "#")
|
||||||
|
|
||||||
(secretary/defroute "/" []
|
(secretary/defroute "/" []
|
||||||
|
|
@ -151,9 +122,6 @@
|
||||||
(rf/dispatch [:set-active-page :manage])
|
(rf/dispatch [:set-active-page :manage])
|
||||||
(secretary/dispatch! "/")))
|
(secretary/dispatch! "/")))
|
||||||
|
|
||||||
;; -------------------------
|
|
||||||
;; History
|
|
||||||
;; must be called after routes have been defined
|
|
||||||
(defn hook-browser-navigation! []
|
(defn hook-browser-navigation! []
|
||||||
(doto (History.)
|
(doto (History.)
|
||||||
(events/listen
|
(events/listen
|
||||||
|
|
@ -162,8 +130,6 @@
|
||||||
(secretary/dispatch! (.-token event))))
|
(secretary/dispatch! (.-token event))))
|
||||||
(.setEnabled true)))
|
(.setEnabled true)))
|
||||||
|
|
||||||
;; -------------------------
|
|
||||||
;; Initialize app
|
|
||||||
(defn mount-components []
|
(defn mount-components []
|
||||||
(r/render [#'page] (.getElementById js/document "app")))
|
(r/render [#'page] (.getElementById js/document "app")))
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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"}]])
|
||||||
|
|
@ -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})
|
||||||
Loading…
Reference in New Issue