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"