notid/integreat
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

ui improvements.

Browse Source
This commit is contained in:
Bryce Covert
2019-01-25 13:16:21 -08:00
parent 09f30e19cf
commit fb4191059f
7 changed files with 384 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
resources/public/css/main.css Normal file
View File

@@ -0,0 +1,355 @@
form.dz { border: 2px dashed lightgray;}
html,body {
font-family: 'Open Sans', serif;
font-size: 14px;
line-height: 1.5;
height: 100%;
background-color: #fff;
}
@keyframes scaleUp {
from { opacity: 0; transform: translateY(10px); transform-origin: top center; }
}
@keyframes appear {
from { opacity: 0; }
}
@keyframes slideIn {
from {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
}
}
@keyframes slideInFromBelow {
from {
-webkit-transform: translateY(25%);
transform: translateY(25%);
opacity: 0;
}
}
@keyframes moveToTop {
from { }
to { -webkit-transform: translateY(-100%); transform:
translateY(-100%); }
}
@keyframes flashWarning {
from {
background-color: #00d1b2;
}
to {
background-color: inherit;
}
}
@keyframes flashPrimary {
from {
background-color: #00d1b2;
}
to {
background-color: inherit;
}
}
tbody tr.live-removed {
animation: flashWarning 1.0s ease both;
animation-fill-mode: forwards;
}
tbody tr.live-added {
animation: flashPrimary 1.0s ease both;
animation-fill-mode: forwards;
}
.left-nav {
width: 300px;
}
.nav.is-dark {
background-color: #232B2D;
color: #F6F7F7;
}
.nav.is-dark .nav-item a, .nav.is-dark a.nav-item {
color: #F6F7F7;
}
.nav.is-dark .nav-item a.button.is-default {
color: #F6F7F7;
background-color: transparent;
border-width: 2px;
}
.nav.menu {
border-bottom: 1px solid #e1e1e1;
}
.nav.menu .nav-item .icon-btn {
border: 3px solid #B7C6C9;
border-radius: 90px;
padding: 5px 7px;
color: #B7C6C9;
}
.nav.menu .nav-item.is-active .icon-btn {
color: #2EB398;
border: 3px solid #2EB398;
}
.slideInFromBelow {
animation: slideInFromBelow 1.5s ease both;
}
.modal {
animation: appear .7s ease both;
}
.inbox-messages {
animation: scaleUp .3s ease both;
}
.nav.menu .nav-item .icon-btn .fa {
font-size: 20px;
color: #B7C6C9;
}
.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;
border-right: 1px solid #DEDEDE;
}
.messages {
display:block;
background-color: #fff;
border-right: 1px solid #DEDEDE;
}
.message {
display:block;
background-color: #fff;
}
.aside .compose {
height: 95px;
margin:0 -10px;
padding: 25px 30px;
}
.aside .compose .button {
color: #F6F7F7;
}
.aside .compose .button .compose {
font-size: 14px;
font-weight: 700;
}
.aside .main {
padding: 40px;
color: #6F7B7E;
}
.aside .title {
color: #6F7B7E;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.aside .main .item {
display: block;
padding: 10px 0;
color: #6F7B7E;
}
.aside .main .item.is-active {
background-color: #F1F1F1;
margin: 0 -50px;
padding-left: 50px;
}
.aside .main .item:is-active,.aside .main .item:hover {
background-color: #F2F2F2;
margin: 0 -50px;
padding-left: 50px;
}
.aside .main .icon {
font-size: 19px;
padding-right: 30px;
color: #A0A0A0;
}
.aside .main .name {
font-size: 15px;
color: #5D5D5D;
font-weight: 500;
}
.messages {
padding: 40px 20px;
}
.message {
padding: 40px 20px;
}
.messages .action-buttons {
padding: 0;
margin-top: -20px;
}
.message .action-buttons {
padding: 0;
margin-top: -5px;
}
.action-buttons .control.is-grouped {
display: inline-block;
margin-right: 30px;
}
.action-buttons .control.is-grouped:last-child {
margin-right: 0;
}
.action-buttons .control.is-grouped .button:first-child {
border-radius: 5px 0 0 5px;
}
.action-buttons .control.is-grouped .button:last-child {
border-radius: 0 5px 5px 0;
}
.action-buttons .control.is-grouped .button {
margin-right: -5px;
border-radius: 0;
}
.pg {
display: inline-block;
top:10px;
}
.action-buttons .pg .title {
display: block;
margin-top: 0;
padding-top: 0;
margin-bottom: 3px;
font-size:12px;
color: #AAAAA;
}
.action-buttons .pg a{
font-size:12px;
color: #AAAAAA;
text-decoration: none;
}
.is-grouped .button {
background-image: linear-gradient(#F8F8F8, #F1F1F1);
}
.is-grouped .button .fa {
font-size: 15px;
color: #AAAAAA;
}
.inbox-messages .card {
width: 100%;
}
.inbox-messages strong {
color: #5D5D5D;
}
.inbox-messages .msg-check {
padding: 0 20px;
}
.inbox-messages .msg-subject {
padding: 10px 0;
color: #5D5D5D;
}
.inbox-messages .msg-attachment {
float:right;
}
.inbox-messages .msg-snippet {
padding: 5px 20px 0px 5px;
}
.inbox-messages .msg-subject .fa {
font-size: 14px;
padding:3px 0;
}
.inbox-messages .msg-timestamp {
float: right;
padding: 0 20px;
color: #5D5D5D;
}
.message-preview .avatar {
display: inline-block;
}
.message-preview .top .address {
display: inline-block;
padding: 0 20px;
}
.avatar img {
width: 40px;
border-radius: 50px;
border: 2px solid #999;
padding: 2px;
}
.address .name {
font-size: 16px;
font-weight: bold;
}
.address .email {
font-weight: bold;
color: #B6C7D1;
}
.card.is-active {
background-color:#F5F5F5;
}
.table { table-layout: fixed }
.table td {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 9px; }
.table td.expandable {text-overflow: ellipsis; overflow: visible; white-space: nowrap; padding: 9px; }
.typeahead {
position:relative;
overflow:visible;
}
.modal {
overflow: visible;
}
.modal-card-body {
overflow: visible;
}
.typeahead-menu {
position:absolute;
display: inline-block;
width: 100%;
top: 100%;
left: 0;
z-index: 10000;
overflow: auto;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
text-align: left;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
/* background-clip: padding-box; */
}
.modal-card {
overflow: auto;
}
.typeahead-suggestion {
display: block;
overflow: visible;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
}
.typeahead-suggestion:hover,
.typeahead-suggestion:focus,
.typeahead-menu:not(:hover) .typeahead-highlighted
{
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #00d1b2;
cursor: pointer;
}

360
resources/public/index.html
View File

@@ -11,365 +11,7 @@
<link rel="stylesheet" href="/css/bulma-calendar.min.css" /> <link rel="stylesheet" href="/css/bulma-calendar.min.css" />
<link rel="stylesheet" href="/css/bulma-badge.min.css" /> <link rel="stylesheet" href="/css/bulma-badge.min.css" />
<link rel="stylesheet" href="/finance-font/style.css" /> <link rel="stylesheet" href="/finance-font/style.css" />
<link rel="stylesheet" href="/css/main.css" />
<style>
form.dz { border: 2px dashed lightgray;}
html,body {
font-family: 'Open Sans', serif;
font-size: 14px;
line-height: 1.5;
height: 100%;
background-color: #fff;
}
@keyframes scaleUp {
from { opacity: 0; transform: translateY(10px); transform-origin: top center; }
}
@keyframes appear {
from { opacity: 0; }
}
@keyframes slideIn {
from {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
}
}
@keyframes slideInFromBelow {
from {
-webkit-transform: translateY(25%);
transform: translateY(25%);
opacity: 0;
}
}
@keyframes moveToTop {
from { }
to { -webkit-transform: translateY(-100%); transform:
translateY(-100%); }
}
@keyframes flashWarning {
from {
background-color: #00d1b2;
}
to {
background-color: inherit;
}
}
@keyframes flashPrimary {
from {
background-color: #00d1b2;
}
to {
background-color: inherit;
}
}
tbody tr.live-removed {
animation: flashWarning 1.0s ease both;
animation-fill-mode: forwards;
}
tbody tr.live-added {
animation: flashPrimary 1.0s ease both;
animation-fill-mode: forwards;
}
.left-nav {
width: 300px;
}
.nav.is-dark {
background-color: #232B2D;
color: #F6F7F7;
}
.nav.is-dark .nav-item a, .nav.is-dark a.nav-item {
color: #F6F7F7;
}
.nav.is-dark .nav-item a.button.is-default {
color: #F6F7F7;
background-color: transparent;
border-width: 2px;
}
.nav.menu {
border-bottom: 1px solid #e1e1e1;
}
.nav.menu .nav-item .icon-btn {
border: 3px solid #B7C6C9;
border-radius: 90px;
padding: 5px 7px;
color: #B7C6C9;
}
.nav.menu .nav-item.is-active .icon-btn {
color: #2EB398;
border: 3px solid #2EB398;
}
.slideInFromBelow {
animation: slideInFromBelow 1.5s ease both;
}
.modal {
animation: appear .7s ease both;
}
.inbox-messages {
animation: scaleUp .3s ease both;
}
.nav.menu .nav-item .icon-btn .fa {
font-size: 20px;
color: #B7C6C9;
}
.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;
border-right: 1px solid #DEDEDE;
}
.messages {
display:block;
background-color: #fff;
border-right: 1px solid #DEDEDE;
}
.message {
display:block;
background-color: #fff;
}
.aside .compose {
height: 95px;
margin:0 -10px;
padding: 25px 30px;
}
.aside .compose .button {
color: #F6F7F7;
}
.aside .compose .button .compose {
font-size: 14px;
font-weight: 700;
}
.aside .main {
padding: 40px;
color: #6F7B7E;
}
.aside .title {
color: #6F7B7E;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.aside .main .item {
display: block;
padding: 10px 0;
color: #6F7B7E;
}
.aside .main .item.is-active {
background-color: #F1F1F1;
margin: 0 -50px;
padding-left: 50px;
}
.aside .main .item:is-active,.aside .main .item:hover {
background-color: #F2F2F2;
margin: 0 -50px;
padding-left: 50px;
}
.aside .main .icon {
font-size: 19px;
padding-right: 30px;
color: #A0A0A0;
}
.aside .main .name {
font-size: 15px;
color: #5D5D5D;
font-weight: 500;
}
.messages {
padding: 40px 20px;
}
.message {
padding: 40px 20px;
}
.messages .action-buttons {
padding: 0;
margin-top: -20px;
}
.message .action-buttons {
padding: 0;
margin-top: -5px;
}
.action-buttons .control.is-grouped {
display: inline-block;
margin-right: 30px;
}
.action-buttons .control.is-grouped:last-child {
margin-right: 0;
}
.action-buttons .control.is-grouped .button:first-child {
border-radius: 5px 0 0 5px;
}
.action-buttons .control.is-grouped .button:last-child {
border-radius: 0 5px 5px 0;
}
.action-buttons .control.is-grouped .button {
margin-right: -5px;
border-radius: 0;
}
.pg {
display: inline-block;
top:10px;
}
.action-buttons .pg .title {
display: block;
margin-top: 0;
padding-top: 0;
margin-bottom: 3px;
font-size:12px;
color: #AAAAA;
}
.action-buttons .pg a{
font-size:12px;
color: #AAAAAA;
text-decoration: none;
}
.is-grouped .button {
background-image: linear-gradient(#F8F8F8, #F1F1F1);
}
.is-grouped .button .fa {
font-size: 15px;
color: #AAAAAA;
}
.inbox-messages .card {
width: 100%;
}
.inbox-messages strong {
color: #5D5D5D;
}
.inbox-messages .msg-check {
padding: 0 20px;
}
.inbox-messages .msg-subject {
padding: 10px 0;
color: #5D5D5D;
}
.inbox-messages .msg-attachment {
float:right;
}
.inbox-messages .msg-snippet {
padding: 5px 20px 0px 5px;
}
.inbox-messages .msg-subject .fa {
font-size: 14px;
padding:3px 0;
}
.inbox-messages .msg-timestamp {
float: right;
padding: 0 20px;
color: #5D5D5D;
}
.message-preview .avatar {
display: inline-block;
}
.message-preview .top .address {
display: inline-block;
padding: 0 20px;
}
.avatar img {
width: 40px;
border-radius: 50px;
border: 2px solid #999;
padding: 2px;
}
.address .name {
font-size: 16px;
font-weight: bold;
}
.address .email {
font-weight: bold;
color: #B6C7D1;
}
.card.is-active {
background-color:#F5F5F5;
}
.table { table-layout: fixed }
.table td {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 9px; }
.table td.expandable {text-overflow: ellipsis; overflow: visible; white-space: nowrap; padding: 9px; }
.typeahead {
position:relative;
overflow:visible;
}
.modal {
overflow: visible;
}
.modal-card-body {
overflow: visible;
}
.typeahead-menu {
position:absolute;
display: inline-block;
width: 100%;
top: 100%;
left: 0;
z-index: 10000;
overflow: visible;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
text-align: left;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
/* background-clip: padding-box; */
}
.modal-card {
overflow: auto;
}
.typeahead-suggestion {
display: block;
overflow: visible;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
}
.typeahead-suggestion:hover,
.typeahead-suggestion:focus,
.typeahead-menu:not(:hover) .typeahead-highlighted
{
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #00d1b2;
cursor: pointer;
}
</style>
</head> </head>
<body> <body>

3
src/cljs/auto_ap/views/components/expense_accounts_dialog.cljs
View File

@@ -31,6 +31,7 @@
(re-frame/reg-event-fx (re-frame/reg-event-fx
::change-expense-accounts-saving ::change-expense-accounts-saving
(fn [{:keys [db]} [_ on-success id ]] (fn [{:keys [db]} [_ on-success id ]]
(let [{:keys [id expense-accounts]} (get-in db [::change-expense-accounts :invoice])] (let [{:keys [id expense-accounts]} (get-in db [::change-expense-accounts :invoice])]
{:graphql {:graphql
{:token (-> db :user) {:token (-> db :user)
@@ -49,7 +50,7 @@
[:expense_accounts [:amount :id :location :expense_account_id [:expense_accounts [:amount :id :location :expense_account_id
[:expense_account [:id :name [:parent [:id :name]]]]]] [:expense_account [:id :name [:parent [:id :name]]]]]]
[:client [:name :id :locations]] [:client [:name :id :locations]]
[:payments [:amount [:payment [:amount :s3_url :check_number ]]]] [:payments [:amount :id [:payment [:amount :s3_url :check_number ]]]]
]]}]} ]]}]}
:on-success on-success}}))) :on-success on-success}})))

7
src/cljs/auto_ap/views/components/invoices/side_bar.cljs
View File

@@ -19,16 +19,15 @@
[:li.menu-item [:li.menu-item
[:a.item {:href (bidi/path-for routes/routes :unpaid-invoices) [:a.item {:href (bidi/path-for routes/routes :unpaid-invoices)
:class [(active-when ap = :unpaid-invoices)]} :class [(active-when ap = :unpaid-invoices)]}
[:span {:class "icon icon-accounting-document" :style {"font-size" "25px"}}] [:span {:class "icon icon-accounting-document" :style {:font-size "25px"}}]
[:span {:class "name"} "Unpaid Invoices"]]] [:span {:class "name"} "Unpaid Invoices"]]]
[:li.menu-item [:li.menu-item
[:a.item {:href (bidi/path-for routes/routes :paid-invoices) [:a.item {:href (bidi/path-for routes/routes :paid-invoices)
:class [(active-when ap = :paid-invoices)]} :class [(active-when ap = :paid-invoices)]}
[:span {:class "icon icon-accounting-invoice-mail" :style {"font-size" "25px"}}] [:span {:class "icon icon-accounting-invoice-mail" :style {:font-size "25px"}}]
[:span {:class "name"} "Paid Invoices"]]]] [:span {:class "name"} "Paid Invoices"]]]]]
]
[:div [:div
rest] rest]
[:div {:class "compose has-text-centered"} [:div {:class "compose has-text-centered"}

24
src/cljs/auto_ap/views/components/typeahead.cljs
View File

@@ -30,7 +30,7 @@
valid-matches (get-valid-matches matches not-found-description not-found-value text)] valid-matches (get-valid-matches matches not-found-description not-found-value text)]
[:div.typeahead [:div.typeahead
(if @selected (if @selected
[:div.input {:class class ^{:key "typeahead"} [:div.input {:class class
:tab-index "0" :tab-index "0"
:on-key-up (fn [e] :on-key-up (fn [e]
(if (= 8 (.-keyCode e)) (if (= 8 (.-keyCode e))
@@ -42,9 +42,8 @@
[:div.tags.has-addons [:div.tags.has-addons
[:span.tag text] [:span.tag text]
[:a.tag.is-delete {:on-click (fn [] (select [nil "" nil]))}]]]] [:a.tag.is-delete {:on-click (fn [] (select [nil "" nil]))}]]]]
[:input.input {:type "text" ^{:key "typeahead"} [:input.input {:type "text"
:class class :class class
:field field
:value text :value text
:auto-focus auto-focus :auto-focus auto-focus
:on-blur (fn [e] :on-blur (fn [e]
@@ -54,35 +53,36 @@
(#{"" nil} text) (#{"" nil} text)
nil nil
(seq valid-matches) @highlighted
(do (select (first valid-matches)) (do (select @highlighted)
true) true)
:else :else
(do (select [nil ""]) (do (select [nil ""])
true))) true)))
:on-key-up (fn [e] :on-key-down (fn [e]
(condp = (.-keyCode e) (condp = (.-keyCode e)
; up ; up
38 (do 38 (do
(when-let [new-match (->> valid-matches (when-let [new-match (->> valid-matches
(take-while #(not= (first %) @highlighted)) (take-while #(not= % @highlighted))
(last))] (last))]
(reset! highlighted new-match)) (reset! highlighted new-match))
true) true)
;; dwon ;; dwon
40 (do 40 (do
(when-let [new-match (->> valid-matches (when-let [new-match (->> valid-matches
(drop-while #(not= (first %) @highlighted)) (drop-while #(not= % @highlighted))
(drop 1) (drop 1)
(first))] (first))]
(reset! highlighted new-match)) (reset! highlighted new-match))
true) true)
13 (when @highlighted 13 (do (.preventDefault e)
(when @highlighted
(select @highlighted) (select @highlighted)
false) false))
true) true))
)
:on-change (fn [e] :on-change (fn [e]
(let [new-matches (get-valid-matches matches not-found-description not-found-value (.. e -target -value))] (let [new-matches (get-valid-matches matches not-found-description not-found-value (.. e -target -value))]
(reset! highlighted (first new-matches))) (reset! highlighted (first new-matches)))

7
src/cljs/auto_ap/views/pages/unpaid_invoices.cljs
View File

@@ -170,7 +170,6 @@
(re-frame/reg-event-fx (re-frame/reg-event-fx
::print-checks ::print-checks
(fn [{:keys [db]} [_ bank-account-id type]] (fn [{:keys [db]} [_ bank-account-id type]]
(println type)
(let [invoice-amounts (by :id :outstanding-balance (get-in db [::invoice-page :invoices]))] (let [invoice-amounts (by :id :outstanding-balance (get-in db [::invoice-page :invoices]))]
{:db (-> db {:db (-> db
@@ -786,13 +785,15 @@
(defn unpaid-invoices-page [] (defn unpaid-invoices-page []
[side-bar-layout {:side-bar [invoices-side-bar {} [side-bar-layout {:side-bar [invoices-side-bar {}
[:p.menu-label "Vendor"] ^{:key "extra-filter"}
[:div [:div
[vendor-filter]] [:p.menu-label "Vendor"]
[:div [vendor-filter]]
[:p.menu-label "Invoice #"] [:p.menu-label "Invoice #"]
[:div [:div
[invoice-number-filter] [invoice-number-filter]
]] ]]
]
:main [unpaid-invoices-content] :main [unpaid-invoices-content]
:bottom [vendor-dialog {:vendor @(re-frame/subscribe [::subs/user-editing-vendor]) :bottom [vendor-dialog {:vendor @(re-frame/subscribe [::subs/user-editing-vendor])
:save-event [::events/save-vendor] :save-event [::events/save-vendor]