From 336d0779ffe5b3b344d45f081d23e400cc8ec44a Mon Sep 17 00:00:00 2001 From: Bryce Covert Date: Thu, 24 Jan 2019 09:18:47 -0800 Subject: [PATCH] mostly reorganized --- resources/public/index.html | 12 +- src/cljs/auto_ap/views/main.cljs | 335 +++++++++++++----------------- src/cljs/auto_ap/views/utils.cljs | 6 +- 3 files changed, 162 insertions(+), 191 deletions(-) diff --git a/resources/public/index.html b/resources/public/index.html index 6c0f150c..6203ce92 100644 --- a/resources/public/index.html +++ b/resources/public/index.html @@ -130,6 +130,12 @@ .nav.menu .nav-item.is-active .icon-btn .fa { color: #2EB398; } + + +nav.navbar .navbar-item.is-active { + background-color: #f5f5f5; + color: #363636; +} .aside { display:block; background-color: #F9F9F9; @@ -171,12 +177,12 @@ padding: 10px 0; color: #6F7B7E; } -.aside .main .item.active { +.aside .main .item.is-active { background-color: #F1F1F1; margin: 0 -50px; padding-left: 50px; } -.aside .main .item:active,.aside .main .item:hover { +.aside .main .item:is-active,.aside .main .item:hover { background-color: #F2F2F2; margin: 0 -50px; padding-left: 50px; @@ -295,7 +301,7 @@ font-weight: bold; color: #B6C7D1; } -.card.active { +.card.is-active { background-color:#F5F5F5; } .table { table-layout: fixed } diff --git a/src/cljs/auto_ap/views/main.cljs b/src/cljs/auto_ap/views/main.cljs index 16513c51..12d8f75f 100644 --- a/src/cljs/auto_ap/views/main.cljs +++ b/src/cljs/auto_ap/views/main.cljs @@ -5,7 +5,7 @@ [auto-ap.routes :as routes] [auto-ap.subs :as subs] [auto-ap.events :as events] - [auto-ap.views.utils :refer [active-when= login-url dispatch-event]] + [auto-ap.views.utils :refer [active-when active-when= login-url dispatch-event]] [auto-ap.entities.clients :as clients] [auto-ap.views.pages :as pages] [auto-ap.views.components.vendor-dialog :refer [vendor-dialog]])) @@ -34,130 +34,47 @@ (defn login-dropdown [] (let [user (re-frame/subscribe [::subs/user]) menu (re-frame/subscribe [::subs/menu])] - [:div {:id "navMenu", :class "navbar-menu"} - [:div {:class "navbar-end"} - (if @user - [:div {:class (str "navbar-item has-dropdown " (when (get-in @menu [:account :active?]) "is-active"))} - - [:a {:class "navbar-link login" :on-click (fn [e] (re-frame/dispatch [::events/toggle-menu :account]))} (:user/name @user)] - [:div {:class "navbar-dropdown"} - [:a {:class "navbar-item"} "My profile"] - (when (= "admin" (:user/role @user)) - [:a {:class "navbar-item" :href (bidi/path-for routes/routes :admin) - :on-click (fn [e] (re-frame/dispatch [::events/toggle-menu :account]))} "Administration"]) - [:hr {:class "navbar-divider"}] - [:a.navbar-item {:on-click (fn [e] (.preventDefault e) (re-frame/dispatch [::events/logout]))} "Logout"]]] - [:a.navbar-item {:href login-url} "Login"])]])) + (if @user + [:div {:class (str "navbar-item has-dropdown " (when (get-in @menu [:account :active?]) "is-active"))} + + [:a {:class "navbar-link login" :on-click (fn [e] (re-frame/dispatch [::events/toggle-menu :account]))} (:user/name @user)] + [:div {:class "navbar-dropdown"} + [:a {:class "navbar-item"} "My profile"] + (when (= "admin" (:user/role @user)) + [:a {:class "navbar-item" :href (bidi/path-for routes/routes :admin) + :on-click (fn [e] (re-frame/dispatch [::events/toggle-menu :account]))} "Administration"]) + [:hr {:class "navbar-divider"}] + [:a.navbar-item {:on-click (fn [e] (.preventDefault e) (re-frame/dispatch [::events/logout]))} "Logout"]]] + [:a.navbar-item {:href login-url} "Login"]))) -(defmulti layout page->layout) - -(defmethod layout :admin-left-panel [ap] +(defn navbar [ap] (let [client (re-frame/subscribe [::subs/client]) clients (re-frame/subscribe [::subs/clients]) menu (re-frame/subscribe [::subs/menu])] - - [:div - [:nav {:class "navbar has-shadow"} - [:div {:class "container"} - [:div {:class "navbar-brand"} - [:a {:class "navbar-item", :href "../"} - [:img {:src "/img/logo.png"}] - ]] - - [:div {:class "navbar-burger burger", :data-target "navMenu"} - [:span] - [:span] - [:span]] - [login-dropdown]]] - [:div {:class "columns", :id "mail-app"} - [:aside {:class "column is-narrow aside menu hero is-fullheight"} - [:div.main - [:p.menu-label "General"] - [:p.menu-item - [:a {:href (bidi/path-for routes/routes :admin) , :class (str "item" (active-when= ap :admin))} - [:span {:class "icon"} - [:i {:class "fa fa-tachometer"}]] - [:span {:class "name"} "Dashboard"]]] - - [:p.menu-label "Setup"] - [:ul.menu-list - [:li.menu-item - [:a {:href (bidi/path-for routes/routes :admin-clients) , :class (str "item" (active-when= ap :admin-clients))} - [:span {:class "icon"} - [:i {:class "fa fa-star-o"}]] - - [:span {:class "name"} "Clients"]]] - [:li.menu-item - [:a {:href (bidi/path-for routes/routes :admin-vendors) , :class (str "item" (active-when= ap :admin-vendors))} - [:span {:class "icon"} - [:i {:class "fa fa-star-o"}]] - - [:span {:class "name"} "Vendors"]]] - [:li.menu-item - [:a {:href (bidi/path-for routes/routes :admin-users), :class (str "item" (active-when= ap :admin-users))} - [:span {:class "icon"} - [:i {:class "fa fa-envelope-o"}]] - [:span {:class "name"} "Users"]]] - - - [:li.menu-item - [:a {:href (bidi/path-for routes/routes :admin-yodlee), :class (str "item" (active-when= ap :admin-yodlee))} - [:span {:class "icon"} - [:i {:class "fa fa-envelope-o"}]] - [:span {:class "name"} "Yodlee Link"]]] - - [:ul ]] - [:p.menu-label "History"] - [:ul.menu-list - [:li.menu-item - [:a {:href (bidi/path-for routes/routes :admin-reminders) , :class (str "item" (active-when= ap :admin-reminders))} - [:span {:class "icon"} - [:i {:class "fa fa-star-o"}]] - - [:span {:class "name"} "Reminders"]]]] - [:p.menu-label "Import"] - [:ul.menu-list - [:li.menu-item - [:a {:href (bidi/path-for routes/routes :admin-excel-import) , :class (str "item" (active-when= ap :admin-excel-import))} - [:span {:class "icon"} - [:i {:class "fa fa-download"}]] - - [:span {:class "name"} "Excel Invoices"]]]]] - - [:div.left-nav - [:div {:class "compose has-text-centered"} - [:a {:class "button is-danger is-block is-bold" :href (bidi/path-for routes/routes :index)} - [:span {:class "compose"} "Back"]]]]] - [:div {:class "column messages hero is-fullheight", :id "message-feed"} - ^{:key (str "active-page-" (:name @client))} - [:div.inbox-messages - [pages/active-page ap]]]] - [:footer {:class "footer"} - [:div {:class "container"} - [:div {:class "content has-text-centered"} - [:p - [:strong "Integreat"]] - [:p - [:a {:class "icon", :href "https://github.com/dansup/bulma-templates"} - [:i {:class "fa fa-github"}]]]]]] - [:div#dz-hidden]])) - -(defmethod layout :left-panel [ap] - (let [client (re-frame/subscribe [::subs/client]) - clients (re-frame/subscribe [::subs/clients]) - menu (re-frame/subscribe [::subs/menu])] - [:div - [:nav {:class "navbar has-shadow"} + [:nav {:class "navbar has-shadow"} [:div {:class "container"} [:div {:class "navbar-brand"} [:a {:class "navbar-item", :href "../"} [:img {:src "/img/logo.png"}]]] - [:div {:id "navMenu", :class "navbar-menu " - :on-click (fn [] (re-frame/dispatch [::events/toggle-menu :client]))} + [:div.navbar-menu [:div.navbar-start + [:a.navbar-item {:class [(active-when ap #{:unpaid-invoices :paid-invoices})] + :href (bidi/path-for routes/routes :unpaid-invoices)} + "Invoices" ] + [:a.navbar-item {:class [(active-when ap = :checks)] + :href (bidi/path-for routes/routes :checks)} + "Payments" ] + [:a.navbar-item {:class [(active-when ap = :transactions)] + :href (bidi/path-for routes/routes :transactions)} + "Transactions" ]] + [:div {:class "navbar-burger burger", :data-target "navMenu"} + [:span] + [:span] + [:span]] + [:div.navbar-end [:div { :class (str "navbar-item has-dropdown " (when (get-in @menu [:client :active?]) "is-active"))} - [:a {:class "navbar-link login"} "Client: " (if @client (:name @client) - "All")] + [:a {:class "navbar-link login" :on-click (fn [] (re-frame/dispatch [::events/toggle-menu :client]))} "Client: " (if @client (:name @client) + "All")] [:div {:class "navbar-dropdown"} [:a {:class "navbar-item" :on-click (fn [] (re-frame/dispatch [::events/swap-client nil])) @@ -167,81 +84,125 @@ ^{:key id } [:a {:class "navbar-item" :on-click (fn [] (re-frame/dispatch [::events/swap-client client])) - } name])]]]] - [:div {:class "navbar-burger burger", :data-target "navMenu"} - [:span] - [:span] - [:span]] - [login-dropdown]]] - [:div {:class "columns", :id "mail-app"} - [:aside {:class "column is-narrow aside menu hero is-fullheight"} - [:div.main.left-nav - [:p.menu-label "General"] - [:p.menu-item - [:a {:href (bidi/path-for routes/routes :index) , :class (str "item" (active-when= ap :index))} - [:span {:class "icon"} - [:i {:class "fa fa-tachometer"}]] - [:span {:class "name"} "Dashboard"]]] + } name])]]]] + [login-dropdown]]])) - [:p.menu-label "Accounts Payable"] - [:ul.menu-list - #_[:li.menu-item - [:a {:href (bidi/path-for routes/routes :import-invoices) , :class (str "item" (active-when= ap :import-invoices))} - [:span {:class "icon"} - [:i {:class "fa fa-star-o"}]] - - [:span {:class "name"} "Upload Invoices"]]] - [:li.menu-item - [:a {:href (bidi/path-for routes/routes :unpaid-invoices), :class (str "item" (active-when= ap :unpaid-invoices))} - [:span {:class "icon"} - [:i {:class "fa fa-envelope-open-o"}]] - [:span {:class "name"} "Unpaid Invoices"]] - ] - [:li.menu-item - [:a {:href (bidi/path-for routes/routes :paid-invoices), :class (str "item" (active-when= ap :paid-invoices))} - [:span {:class "icon"} - [:i {:class "fa fa-envelope-o"}]] - [:span {:class "name"} "Paid Invoices"]] - ] - [:li.menu-item - [:a {:href (bidi/path-for routes/routes :checks), :class (str "item" (active-when= ap :checks))} - [:span {:class "icon"} - [:i {:class "fa fa-money"}]] - [:span {:class "name"} "Checks"]]] +(defn footer [] + [:footer {:class "footer"} + [:div {:class "container"} + [:div {:class "content has-text-centered"} + [:p + [:strong "Integreat"]] + [:p + [:a {:class "icon", :href "https://github.com/dansup/bulma-templates"} + [:i {:class "fa fa-github"}]]]]]]) - [:li.menu-item - [:a {:href (bidi/path-for routes/routes :transactions), :class (str "item" (active-when= ap :transactions))} - [:span {:class "icon"} - [:i {:class "fa fa-exchange"}]] - [:span {:class "name"} "Transactions"]]] - - - - - - ] - [:div {:class "compose has-text-centered"} - [:a {:class "button is-danger is-block is-bold" :href (bidi/path-for routes/routes :index) - :on-click (dispatch-event [::events/modal-status ::user-editing-vendor {:visible? true}])} - [:span {:class "compose"} "New Vendor"]]]]] +(defn side-bar-layout [{:keys [side-bar main ap bottom]}] + [:div + [navbar ap] + [:div {:class "columns ", :id "mail-app"} + [:aside {:class "column is-narrow aside menu hero is-fullheight"} + [:div.main.left-nav + side-bar - [:div {:class "column messages hero is-fullheight", :id "message-feed"} - ^{:key (str "active-page-" (:name @client))} - [:div.inbox-messages - [pages/active-page ap]]]] - [:footer {:class "footer"} - [:div {:class "container"} - [:div {:class "content has-text-centered"} - [:p - [:strong "Integreat"]] - [:p - [:a {:class "icon", :href "https://github.com/dansup/bulma-templates"} - [:i {:class "fa fa-github"}]]]]]] - [:div#dz-hidden] - [vendor-dialog {:vendor @(re-frame/subscribe [::subs/user-editing-vendor]) - :save-event [::events/save-vendor] - :change-event [::events/change-nested-form-state [:user-editing-vendor]] - :id ::user-editing-vendor}]])) + ]] + [:div {:class "column messages hero is-fullheight", :id "message-feed"} + ^{:key (str "active-page-")} + [:div.inbox-messages + main]]] + [footer] + + bottom + [:div#dz-hidden]]) + +(defmulti layout page->layout) + +(defmethod layout :admin-left-panel [ap] + [side-bar-layout {:side-bar + [:div + [:p.menu-label "General"] + [:p.menu-item + [:a {:href (bidi/path-for routes/routes :admin) , :class (str "item" (active-when ap = :admin))} + [:span {:class "icon"} + [:i {:class "fa fa-tachometer"}]] + [:span {:class "name"} "Dashboard"]]] + + [:p.menu-label "Setup"] + [:ul.menu-list + [:li.menu-item + [:a {:href (bidi/path-for routes/routes :admin-clients) , :class (str "item" (active-when ap = :admin-clients))} + [:span {:class "icon"} + [:i {:class "fa fa-star-o"}]] + + [:span {:class "name"} "Clients"]]] + [:li.menu-item + [:a {:href (bidi/path-for routes/routes :admin-vendors) , :class (str "item" (active-when ap = :admin-vendors))} + [:span {:class "icon"} + [:i {:class "fa fa-star-o"}]] + + [:span {:class "name"} "Vendors"]]] + [:li.menu-item + [:a {:href (bidi/path-for routes/routes :admin-users), :class (str "item" (active-when ap = :admin-users))} + [:span {:class "icon"} + [:i {:class "fa fa-envelope-o"}]] + [:span {:class "name"} "Users"]]] + + + [:li.menu-item + [:a {:href (bidi/path-for routes/routes :admin-yodlee), :class (str "item" (active-when ap = :admin-yodlee))} + [:span {:class "icon"} + [:i {:class "fa fa-envelope-o"}]] + [:span {:class "name"} "Yodlee Link"]]] + + [:ul ]] + [:p.menu-label "History"] + [:ul.menu-list + [:li.menu-item + [:a {:href (bidi/path-for routes/routes :admin-reminders) , :class (str "item" (active-when ap = :admin-reminders))} + [:span {:class "icon"} + [:i {:class "fa fa-star-o"}]] + + [:span {:class "name"} "Reminders"]]]] + [:p.menu-label "Import"] + [:ul.menu-list + [:li.menu-item + [:a {:href (bidi/path-for routes/routes :admin-excel-import) , :class (str "item" (active-when ap = :admin-excel-import))} + [:span {:class "icon"} + [:i {:class "fa fa-download"}]] + + [:span {:class "name"} "Excel Invoices"]]]]] + :main [pages/active-page ap] + :ap ap + :bottom [vendor-dialog {:vendor @(re-frame/subscribe [::subs/user-editing-vendor]) + :save-event [::events/save-vendor] + :change-event [::events/change-nested-form-state [:user-editing-vendor]] + :id ::user-editing-vendor}]}]) + +(defmethod layout :left-panel [ap] + [side-bar-layout {:side-bar [:div [:p.menu-label "Type"] + [:ul.menu-list + [:li.menu-item + [:a.item {:href (bidi/path-for routes/routes :unpaid-invoices) + :class [(active-when ap = :unpaid-invoices)]} + [:span {:class "icon"} + [:i {:class "fa fa-envelope-open-o"}]] + [:span {:class "name"} "Unpaid Invoices"]]] + [:li.menu-item + [:a.item {:href (bidi/path-for routes/routes :paid-invoices) + :class [(active-when ap = :paid-invoices)]} + [:span {:class "icon"} + [:i {:class "fa fa-envelope-o"}]] + [:span {:class "name"} "Paid Invoices"]]]] + [:div {:class "compose has-text-centered"} + [:a {:class "button is-danger is-block is-bold" :href (bidi/path-for routes/routes :index) + :on-click (dispatch-event [::events/modal-status ::user-editing-vendor {:visible? true}])} + [:span {:class "compose"} "New Vendor"]]]] + :main [pages/active-page ap] + :bottom [vendor-dialog {:vendor @(re-frame/subscribe [::subs/user-editing-vendor]) + :save-event [::events/save-vendor] + :change-event [::events/change-nested-form-state [:user-editing-vendor]] + :id ::user-editing-vendor}] + :ap ap}]) (defmethod layout :blank [ap] [:div diff --git a/src/cljs/auto_ap/views/utils.cljs b/src/cljs/auto_ap/views/utils.cljs index 693d2122..8994beb8 100644 --- a/src/cljs/auto_ap/views/utils.cljs +++ b/src/cljs/auto_ap/views/utils.cljs @@ -8,7 +8,11 @@ [cljs-time.format :as format])) (defn active-when= [active-page candidate] - (when (= active-page candidate) " active")) + (when (= active-page candidate) " is-active")) + +(defn active-when [active-page f & rest] + + (when (apply f (into [active-page] rest)) " is-active")) (def login-url (let [client-id "264081895820-0nndcfo3pbtqf30sro82vgq5r27h8736.apps.googleusercontent.com"