accrete 0.0.46__py3-none-any.whl → 0.0.48__py3-none-any.whl

accrete/contrib/ui/static/css/accrete.scss

@@ -1,62 +1,55 @@
-@charset "utf-8";
-
-$success: #48c78e;
-$lightgrey: #F5F5F5;
-$darkgrey: #5e636e;
-$link: #0a0a0a;
-$darkwhite: #FCFCFC;
-$form-box-bg: #FCFCFC;
-$table-cell-padding: .2rem .75rem .2rem 0;
-$navbar-height: 2.5rem;
-$column-gap: .2rem;
-$side-panel-width: 320px;
-$size-6: .9rem;
-$body-font-size: $size-6;
-$table-font-size: .85rem;
-$table-background-color: #FCFCFC;
-$border-radius: 4px;
-$input-shadow: none;
-$input-focus-border-color: $success;
-$input-focus-box-shadow-size: 0;
-$input-arrow: $success;
-$button-focus-box-shadow-size: 0;
-$button-active-border-color: $success;
-$button-focus-border-color: $success;
-$body-background-color: #FCFCFC;
-$button-background-color: #FCFCFC;
-$thead-background-color: #FCFCFC;
-
-
-.form-box {
-    background-color: $form-box-bg;
-    padding: 24px;
-    border-radius: 6px;
-    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
-    margin-top: 12px;
+@use "../bulma/sass";
+
+:root {
+    --accrete-black: #14161A;
+    --accrete-white: #ffffff;
+    --accrete-dark: rgb(30, 31, 34);
+    --accrete-grey: #FCFCFC;
+    --accrete-hover-color: #F0F2F4;
+    --accrete-side-panel-width: 320px;
+    --accrete-query-tag-bg-color: #D3D3D3;
+    --accrete-field-bg-color: var(--bulma-scheme-main);
+    --accrete-navbar-link-color: var(--accrete-white);
+    --accrete-navbar-burger-color: var(--accrete-white);
+    --accrete-box-shadow: 0 2px 13px 0 lightgray;
+    --bulma-navbar-height: 2.5rem;
+    --bulma-navbar-item-color: var(--accrete-white);
+    --bulma-body-font-size: 0.9em;
+    --bulma-size-normal: .9rem;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --bulma-scheme-main: var(--accrete-grey);
+        --bulma-link-text: var(--accrete-black);
+        --bulma-link-text-hover: var(--accrete-black);
+        --bulma-link-text-active: var(--accrete-black);
+    }
 }
 
-thead {
-    background: $darkwhite !important;
-}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --hover-color: #1F2229;
+        --bulma-scheme-main: var(--dark);
+        --bulma-link-text: var(--white);
+        --bulma-link-text-hover: var(--white);
+        --bulma-link-text-active: var(--white);
+        --bulma-button-h: var(--dark);
 
-.fade.htmx-swapping {
-    opacity: 0;
-    transition: opacity 400ms ease-out;
+    }
 }
 
-.fade.htmx-added {
-    opacity: 0;
-    transition: opacity 200ms ease-in-out;
+.box {
+    box-shadow: var(--accrete-box-shadow);
+    margin-top: 8px;
 }
 
-form.htmx-request {
-    opacity: 0;
-    transition: opacity 3s linear;
-  }
+thead {
+    background-color: var(--bulma-scheme-main) !important;
+}
 
-#main {
-    padding-top: $navbar-height;
-    height: 100vh;
+tbody > tr:hover {
+    background-color: var(--accrete-hover-color) !important;
 }
 
 td > a {
@@ -64,21 +57,126 @@ td > a {
     width:100%;
 }
 
-td, th {
-    font-size: $table-font-size;
-}
-
 td {
     vertical-align: middle !important;
 }
 
-.columns:not(:last-child) {
+.table {
+    --bulma-table-cell-padding: 0.3em 0.65em;
+}
+
+.navbar-link {
+    color: var(--accrete-navbar-link-color);
+}
+
+.select:not(.is-multiple):not(.is-loading)::after {
+    border-color: var(--bulma-success);
+}
+
+.field {
+    margin-bottom: 0 !important;
+}
+
+.field.has-addons {
     margin-bottom: 0 !important;
 }
 
+.field:not(:last-child) {
+    margin-bottom: 0 !important;
+}
+
+.label.has-field {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    font-weight: 300;
+    word-break: break-word;
+    padding: 12px 12px 12px 0;
+}
+
+.label.has-field * input {
+    border-top: transparent;
+    border-right: transparent;
+    border-left: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    background-color: var(--accrete-field-bg-color);
+}
+
+.label.has-field * select {
+    border-top: transparent;
+    border-right: transparent;
+    border-left: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    background-color: var(--accrete-field-bg-color);
+}
+
+.label.has-field * .button {
+    border-top: transparent;
+    border-right: transparent;
+    border-left: transparent;
+    box-shadow: none;
+    height: 100%;
+    border-radius: 0;
+    background-color: var(--accrete-field-bg-color);
+}
+
+.label.is-required {
+    font-weight: 700;
+}
+
+.label.is-detail {
+    font-weight: 300;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.label.is-detail > div {
+    border-bottom: 1px #ccc solid;
+    font-weight: 400;
+}
+
+.label.is-detail * p {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: .5em;
+    min-height: 2.5em;
+}
+
+.label.is-detail * a.button {
+    border: transparent;
+}
+
+.label.is-detail * a.button:first-child {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.input {
+    background-color: var(--accrete-field-bg-color);
+    box-shadow: none;
+}
+
+.input:focus {
+    box-shadow: none;
+    border-color: var(--bulma-success);
+}
+
+select:focus {
+    box-shadow: none!important;
+    border-color: var(--bulma-success) !important;
+}
+
+.responsive-heading {
+    display: none;
+}
+
 .side-panel {
-    min-width: $side-panel-width;
-    max-width: $side-panel-width;
+    width: var(--accrete-side-panel-width);
     position: sticky;
     top: 0;
     height: 100%;
@@ -115,10 +213,10 @@ td {
 }
 
 .query-param > p:hover, .query-param:focus > p {
-    background: lightgray;
+    background: var(--accrete-hover-color);
     cursor: pointer;
     outline: none;
-    border-radius: 4px;
+    border-radius: var(--bulma-radius);
 }
 
 .query-tag-container {
@@ -133,8 +231,8 @@ td {
     flex-grow: 1;
     justify-content: space-between;
     margin-bottom: 4px;
-    background-color: lightgray;
-    border-radius: 4px;
+    background-color: var(--accrete-query-tag-bg-color);
+    border-radius: var(--bulma-radius);
     cursor: pointer;
 }
 
@@ -161,8 +259,8 @@ td {
 .query-tag-edit {
     background-color: transparent;
     border: none;
-    border-bottom-left-radius: 5px;
-    border-top-left-radius: 5px;
+    border-bottom-left-radius: var(--bulma-radius);
+    border-top-left-radius: var(--bulma-radius);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -172,7 +270,7 @@ td {
 }
 
 .query-tag-edit:hover {
-    background-color: $lightgrey;
+    background-color: var(--accrete-hover-color);
 }
 
 .query-tag-operator {
@@ -182,9 +280,7 @@ td {
 .query-group-operator {
     display: flex;
     flex-direction: row;
-    //width: fit-content;
     align-items: center;
-    //justify-content: center;
 }
 
 .query-group-operator * button {
@@ -192,7 +288,7 @@ td {
     background-color: transparent;
     border: none;
     cursor: pointer;
-    border-radius: $border-radius;
+    border-radius: var(--bulma-radius);
 }
 
 .query-group-selector {
@@ -202,20 +298,20 @@ td {
 }
 
 .selected-query-tag {
-    background-color: $success !important;
+    background-color: var(--bulma-success) !important;
 }
 
 .selected-query-group-selector {
-    outline: 3px solid $success;
+    outline: 3px solid var(--bulma-success);
 }
 
 .selected-query-group:not(:first-child) {
-    border-left: 4px solid $success !important;
+    border-left: var(--bulma-radius) solid var(--bulma-success) !important;
     padding-left: 7px !important;
 }
 
 .selected-query-edit {
-    background-color: $success !important;
+    background-color: var(--bulma-success) !important;
 }
 
 .query-group:not(:first-child) {
@@ -232,130 +328,45 @@ td {
     text-indent: 13px;
 }
 
-.field {
-    margin-bottom: 0 !important;
-}
-
-.field.has-addons {
-    margin-bottom: 0 !important;
-}
-
-.field:not(:last-child) {
-    margin-bottom: 0 !important;
-}
-
-.label.has-field {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: end;
-    font-weight: 300;
-    word-break: break-word;
-    padding: 12px 12px 12px 0;
-}
-
-.label.has-field * input {
-    border-top: transparent;
-    border-right: transparent;
-    border-left: transparent;
-    border-radius: 0;
-    background-color: transparent;
-}
-
-.label.has-field * select {
-    border-top: transparent;
-    border-right: transparent;
-    border-left: transparent;
-    border-radius: 0;
-    background-color: transparent;
-}
-
-.label.has-field * .button {
-    border-top: transparent;
-    border-right: transparent;
-    border-left: transparent;
-    border-radius: 0;
-    background-color: transparent;
-}
-
-.label.is-required {
-    font-weight: 700;
-}
-
-.label.is-detail {
-    font-weight: 300;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.label.is-detail:hover {
-    //font-weight: 400;
+#modal-filter-button.is-active {
+    background-color: var(--bulma-success);
 }
 
-.label.is-detail > div {
-    border-bottom: 1px #ccc solid;
-    font-weight: 400;
-}
-
-.label.is-detail:hover > div {
-    //border-bottom: 1px #1e1f22 solid;
-    //font-weight: 400;
-}
-
-.label.is-detail * p {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding-left: .5em;
-    min-height: 2.5em;
-}
-
-.button {
-    //background-color: transparent !important;
-}
-
-.label.is-detail * a.button {
-    border: transparent;
-}
-
-.label.is-detail * a.button:first-child {
-    padding-left: 0;
-    padding-right: 0;
-}
-
-.responsive-heading {
-    display: none;
+.navbar-brand-dropdown {
+    z-index: 9999;
+    position: absolute;
+    top: var(--bulma-navbar-height);
+    margin-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 0;
 }
 
-.htmx-settling progress {
-    opacity: 0;
+.navbar-brand-dropdown-item:hover {
+    background-color: var(--accrete-hover-color);
 }
 
-progress {
-    transition: opacity 300ms ease-in;
+.navbar-brand:hover {
+    cursor: pointer;
 }
 
-.navbar-brand-dropdown {
-    z-index: 999;
-    position: absolute;
-    top:$navbar-height;
+.navbar-item {
+    color: var(--bulma-navbar-item-color)
 }
 
-.navbar-brand:hover {
-    cursor: pointer;
+.navbar-burger {
+    color: var(--accrete-navbar-burger-color);
 }
 
-.navbar-brand-dropdown-item:hover {
-    background-color: $lightgrey;
+.navbar.is-success {
+    --bulma-navbar-dropdown-item-h: var(--bulma-scheme-h);
+    --bulma-navbar-dropdown-item-s: var(--bulma-scheme-s);
+    --bulma-navbar-dropdown-item-l: var(--bulma-scheme-main-l);
 }
 
 @media screen and (max-width: 768px) {
-    .label.has-field {
-        padding: 12px 0 12px 0;
-    }
 
-    table.hax-box * td {
+    table.has-box * td {
         width: 100%;
         float: left;
         text-align: left !important;
@@ -364,22 +375,25 @@ progress {
         padding-left: 1rem !important;
     }
 
-    table.hax-box * tr {
-        margin-bottom: 10px;
+    table.has-box * tr {
+        margin: 8px 0 8px 0;
         display: inline-block;
         width: 100%;
-        border: 1px #ccc solid;
-        border-radius: 6px;
+        border: none;
+        box-shadow: var(--accrete-box-shadow);
+        border-radius: var(--bulma-radius);
     }
 
-    table.hax-box > thead {
+    table.has-box * tr:hover {
+        background-color: var(--bulma-scheme-main) !important;
+    }
+
+    table.has-box > thead {
         display: none;
     }
 
-    table.hax-box * span.responsive-heading {
+    table.has-box * span.responsive-heading {
         display: inline-block;
     }
 
 }
-
-@import "../bulma/bulma.sass";

accrete/contrib/ui/static/js/filter.js

@@ -253,10 +253,10 @@ function toggleFilterModalButton() {
     const button = document.getElementById('modal-filter-button');
     const query = document.getElementById('query-tags');
     if (query.firstElementChild && query.firstElementChild.childElementCount) {
-        button.classList.add('is-success');
+        button.classList.add('is-active');
     }
     else {
-        button.classList.remove('is-success');
+        button.classList.remove('is-active');
     }
 }
 

accrete/contrib/ui/templates/ui/detail.html

@@ -96,7 +96,7 @@
 
     <div class="columns is-desktop m-0">
         <div class="column p-0 is-8-desktop">
-            <div class="form-box">
+            <div class="box mt-2">
                 {% block detail_content %}{% endblock %}
             </div>
         </div>

accrete/contrib/ui/templates/ui/form.html

@@ -4,7 +4,7 @@
 {% block content %}
     <div class="columns is-desktop m-0">
         <div class="column p-0 is-8-desktop">
-            <div class="form-box">
+            <div class="box mt-2">
                 {% include 'ui/partials/form_errors.html' with show_field_errors=True %}
                 {% block form %}{% endblock %}
             </div>

accrete/contrib/ui/templates/ui/layout.html

@@ -3,7 +3,7 @@
 {% load i18n %}
 {% load accrete_ui %}
 
-<html lang="en" style="overflow: hidden">
+<html lang="en" style="overflow: hidden" data-theme="light">
 
 <head>
 {% block head %}
@@ -30,7 +30,7 @@
                 <div class="navbar-brand">
                     {% block navbar_brand %}
                         <div class="navbar-item is-unselectable"
-                             onclick="document.getElementById('tenant-quick-switch').classList.toggle('is-hidden')"
+                             onclick="document.getElementById('tenant-quick-switch').classList.toggle('is-invisible')"
                         >
                             {{ request.tenant.name }}
                         </div>
@@ -43,6 +43,7 @@
                         <span aria-hidden="true"></span>
                         <span aria-hidden="true"></span>
                         <span aria-hidden="true"></span>
+                        <span aria-hidden="true"></span>
                     </a>
                 </div>
 
@@ -71,11 +72,11 @@
                     </div>
                 </div>
             </nav>
-            <div id="tenant-quick-switch" class="navbar-brand-dropdown is-hidden box py-3 px-0 is-flex is-flex-direction-column" style="min-width: 200px">
+            <div id="tenant-quick-switch" class="navbar-brand-dropdown is-invisible box py-3 px-0 is-flex is-flex-direction-column" style="min-width: 200px">
                 {% for tenant in request.user.all_tenants %}
                     <a class="navbar-brand-dropdown-item px-4 py-1 mb-1" href="?tenant_id={{ tenant.id }}">
                         <span class=""
-                           onclick="document.getElementById('tenant-quick-switch').classList.toggle('is-hidden')"
+                           onclick="document.getElementById('tenant-quick-switch').classList.toggle('is-invisible')"
                         >
                             {{ tenant }}
                         </span>
@@ -84,7 +85,7 @@
             </div>
         {% endblock %}
 
-        <div id="main" class="is-flex is-flex-direction-row">
+        <div id="main" class="is-flex is-flex-direction-row" style="padding-top: var(--bulma-navbar-height); height: 100svh">
             <div class="side-panel is-hidden-touch is-hidden-desktop-only is-hidden-widescreen-only p-0">
                 <nav class="panel is-shadowless pb-5" style="height: 100%; overflow-y: auto; position: sticky; top: 0">
                     {% if list_page.paginator %}
@@ -103,9 +104,9 @@
                                 {% if action.submit %}
                                     <button class="button is-fullwidth {{ action.class_list|join:' ' }}"
                                            type="submit" form={{ action.form_id }} value="{{ action.name }}"
-                                           {{ action.attrs_str }} style="padding-right: 0.7em;"
+                                           {{ action.attrs_str }}
                                     >
-                                        <div class="side-panel-action-content"><span>{{ action.name }}</span>
+                                        <div class="side-panel-action-content level"><span>{{ action.name }}</span>
                                             {% if action.icon %}<i class="{{ action.icon.value }}"></i>{% endif %}
                                         </div>
                                     </button>
@@ -114,9 +115,9 @@
                                         {% if action.url %}
                                             {{ action.method.value }}="{{ action.url }}"
                                         {% endif %}
-                                       {{ action.attrs_str }} style="padding-right: 0.7em;"
+                                       {{ action.attrs_str }}
                                     >
-                                        <div class="side-panel-action-content">
+                                        <div class="side-panel-action-content level">
                                             <span>{{ action.name }}</span>
                                             {% if action.icon %}<i class="{{ action.icon.value }}"></i>{% endif %}
                                         </div>
@@ -150,14 +151,14 @@
                     <div>
                         {% if list_page.paginator %}
                             <div class="level is-hidden-tablet is-align-self-flex-start m-3">
-                                <div class="level-item is-align-content-flex-start">
+                                <div class="level-item is-align-content-flex-start" style="width: 100%">
                                     {% include 'ui/partials/pagination_list.html' %}
                                 </div>
                             </div>
                         {% endif %}
                         {% if detail_page %}
                             <div class="level is-hidden-tablet is-align-self-flex-start m-3">
-                                <div class="level-item is-align-content-flex-start">
+                                <div class="level-item is-align-content-flex-start" style="width: 100%">
                                     {% include 'ui/partials/pagination_detail.html' %}
                                 </div>
                             </div>

accrete/contrib/ui/templates/ui/partials/filter.html

@@ -58,10 +58,10 @@
         <div id="field-selection" class="button mt-1" style="z-index: 10; position: relative" onclick="toggleFieldSelection()">
             {% translate 'Fields' %}
         </div>
-        <div id="field-paths" class="box mt-1 mx-0 p-1 is-hidden" tabindex="-1" style="z-index: 800; outline: none; background: white; word-break: break-word; position: absolute; width: 300px; max-height: 300px; overflow-y: auto">
+        <div id="field-paths" class="box mt-1 mx-0 p-1 is-hidden" tabindex="-1" style="z-index: 800; outline: none; background: white; word-break: break-word; position: absolute; width: 300px; max-height: 300px; overflow-y: auto; border-radius: var(--bulma-radius);">
             <div class="field has-addons mr-1">
                 <p class="control is-expanded">
-                    <input id="field-path-search-input" class="input is-small" type="text" aria-label="Query Input" oninput="filterFieldPaths()">
+                    <input id="field-path-search-input" class="input is-small" type="text" aria-label="Query Input" oninput="filterFieldPaths()" style="height: 100%">
                 </p>
                 <p class="control">
                     <button id="field-path-search-reset" class="button is-small has-icon" onclick="resetFieldPaths()">

accrete/contrib/ui/templates/ui/partials/form_modal.html

@@ -12,8 +12,10 @@
             {% block modal_content %}{% endblock %}
         </section>
         <footer class="modal-card-foot">
-            <input class="button is-success" type="submit" form="{{ form_id }}" value="{% translate 'Save' %}">
-            <button class="button" hx-get="{% url 'ui:form_modal' %}" hx-swap="outerHTML" hx-target="#form-modal">{% translate 'Discard' %}</button>
+            <div class="buttons">
+                <input class="button is-success" type="submit" form="{{ form_id }}" value="{% translate 'Save' %}">
+                <button class="button" hx-get="{% url 'ui:form_modal' %}" hx-swap="outerHTML" hx-target="#form-modal">{% translate 'Discard' %}</button>
+            </div>
         </footer>
     </div>
 </div>