diff --git a/phono-server/src/permissions.rs b/phono-server/src/permissions.rs index ebc7f7b..526036d 100644 --- a/phono-server/src/permissions.rs +++ b/phono-server/src/permissions.rs @@ -46,7 +46,7 @@ pub enum RelPermissionKind { } #[derive(Clone, Debug, Eq, Hash, PartialEq, Template)] -#[template(path = "rel_permission.html")] +#[template(path = "includes/rel_permission.html")] pub(crate) struct RelPermission { pub(crate) kind: RelPermissionKind, pub(crate) rel_oid: Oid, @@ -150,7 +150,7 @@ impl TryFrom for User { /// an "Edit" button which opens a dialog with a form allowing permissions to be /// assigned across multiple tables within a workspace. #[derive(Clone, Debug, Template)] -#[template(path = "workspaces_single/permissions_editor.html")] +#[template(path = "includes/permissions_editor.html")] pub(crate) struct PermissionsEditor { /// User, invite, or service credential being granted permissions. pub(crate) target: Grantee, diff --git a/phono-server/src/routes/relations_single/portal_handler.rs b/phono-server/src/routes/relations_single/portal_handler.rs index 14030a5..0339f48 100644 --- a/phono-server/src/routes/relations_single/portal_handler.rs +++ b/phono-server/src/routes/relations_single/portal_handler.rs @@ -94,7 +94,7 @@ pub(super) async fn get( .await?; #[derive(Template)] - #[template(path = "portal_table.html")] + #[template(path = "relations_single/portal_table.html")] struct ResponseTemplate { columns: Vec, attr_names: Vec, diff --git a/phono-server/src/workspace_nav.rs b/phono-server/src/workspace_nav.rs index 14980de..897a551 100644 --- a/phono-server/src/workspace_nav.rs +++ b/phono-server/src/workspace_nav.rs @@ -12,7 +12,7 @@ use crate::{ }; #[derive(Builder, Clone, Debug, Template)] -#[template(path = "workspace_nav.html")] +#[template(path = "includes/workspace_nav.html")] pub(crate) struct WorkspaceNav { workspace: Workspace, relations: Vec, diff --git a/phono-server/templates/workspaces_single/permissions_editor.html b/phono-server/templates/includes/permissions_editor.html similarity index 100% rename from phono-server/templates/workspaces_single/permissions_editor.html rename to phono-server/templates/includes/permissions_editor.html diff --git a/phono-server/templates/rel_permission.html b/phono-server/templates/includes/rel_permission.html similarity index 100% rename from phono-server/templates/rel_permission.html rename to phono-server/templates/includes/rel_permission.html diff --git a/phono-server/templates/includes/toolbar_user.html b/phono-server/templates/includes/toolbar_user.html new file mode 100644 index 0000000..1442fbe --- /dev/null +++ b/phono-server/templates/includes/toolbar_user.html @@ -0,0 +1,12 @@ + + + + + +
  • + + Log out + +
    • +     +     diff --git a/phono-server/templates/workspace_nav.html b/phono-server/templates/includes/workspace_nav.html similarity index 100% rename from phono-server/templates/workspace_nav.html rename to phono-server/templates/includes/workspace_nav.html diff --git a/phono-server/templates/base.html b/phono-server/templates/layouts/base.html similarity index 58% rename from phono-server/templates/base.html rename to phono-server/templates/layouts/base.html index 00b1b9a..a6151e9 100644 --- a/phono-server/templates/base.html +++ b/phono-server/templates/layouts/base.html @@ -1,15 +1,19 @@ + + + + {% block title %}Phonograph{% endblock %} - {% include "meta_tags.html" %} - - {%- block head_extras %}{% endblock -%} + {%- block head %}{% endblock -%} - {% block main %}{% endblock %} + {%- block body %}{% endblock -%} + + {%- block scripts %}{% endblock -%} diff --git a/phono-server/templates/layouts/with_sidebar.html b/phono-server/templates/layouts/with_sidebar.html new file mode 100644 index 0000000..a1ae487 --- /dev/null +++ b/phono-server/templates/layouts/with_sidebar.html @@ -0,0 +1,29 @@ +{% extends "layouts/base.html" %} + +{% block body %} +
    + + +
    + {%- block sidebar %}{% endblock -%} +
    +
    + {%- block main %}{% endblock -%} +
    +
    +{% endblock %} diff --git a/phono-server/templates/layouts/with_toolbar.html b/phono-server/templates/layouts/with_toolbar.html new file mode 100644 index 0000000..4fdeeb9 --- /dev/null +++ b/phono-server/templates/layouts/with_toolbar.html @@ -0,0 +1,26 @@ +{% extends "layouts/base.html" %} + +{% block body %} +
    + + +
    + {%- block main %}{% endblock -%} +
    +
    +{% endblock %} diff --git a/phono-server/templates/meta_tags.html b/phono-server/templates/meta_tags.html deleted file mode 100644 index cec5c5e..0000000 --- a/phono-server/templates/meta_tags.html +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/phono-server/templates/portal_table.html b/phono-server/templates/portal_table.html deleted file mode 100644 index f933c5d..0000000 --- a/phono-server/templates/portal_table.html +++ /dev/null @@ -1,37 +0,0 @@ -{% extends "base.html" %} - -{% block head_extras %} - - - -{% endblock %} - -{% block main %} -
    -
    -
    - - Portal Settings - - -
    - {% include "toolbar_user.html" %} -
    -
    -
    - {{ navbar | safe }} -
    -
    -
    - -
    -
    -{% endblock %} diff --git a/phono-server/templates/relations_single/portal_settings.html b/phono-server/templates/relations_single/portal_settings.html index 05a6559..bfdbf56 100644 --- a/phono-server/templates/relations_single/portal_settings.html +++ b/phono-server/templates/relations_single/portal_settings.html @@ -1,49 +1,44 @@ -{% extends "base.html" %} +{% extends "layouts/with_sidebar.html" %} + +{% block toolbar_page_actions %} + + Back + +{% endblock %} + +{% block sidebar %} +{{ workspace_nav | safe }} +{% endblock %} {% block main %} -
    -
    -
    - +
    +
    +

    Portal Name

    + - Back -     -
    - {% include "toolbar_user.html" %} -
    -
    -
    - {{ workspace_nav | safe }} -
    -
    -
    - -
    -

    Portal Name

    - -
    - -
    -
    - -
    +
    + +
    + +
    {% endblock %} diff --git a/phono-server/templates/relations_single/portal_table.html b/phono-server/templates/relations_single/portal_table.html new file mode 100644 index 0000000..74a0775 --- /dev/null +++ b/phono-server/templates/relations_single/portal_table.html @@ -0,0 +1,33 @@ +{% extends "layouts/with_sidebar.html" %} + +{% block head %} + +{% endblock %} + +{% block toolbar_page_actions %} + + Portal Settings + + +{% endblock %} + +{% block sidebar %} +{{ navbar | safe }} +{% endblock %} + +{% block main %} + +{% endblock %} + +{% block scripts %} + + +{% endblock %} diff --git a/phono-server/templates/relations_single/settings.html b/phono-server/templates/relations_single/settings.html index 02fe4f3..bd56fc0 100644 --- a/phono-server/templates/relations_single/settings.html +++ b/phono-server/templates/relations_single/settings.html @@ -1,35 +1,29 @@ -{% extends "base.html" %} +{% extends "layouts/with_sidebar.html" %} + +{% block sidebar %} +{{ workspace_nav | safe }} +{% endblock %} {% block main %} -
    -
    - {% include "toolbar_user.html" %} -
    -
    -
    - {{ workspace_nav | safe }} -
    -
    -
    -
    -
    -

    Table Name

    - -
    - -
    -
    -
    -
    +
    +
    +
    +

    Table Name

    + +
    + +
    +
    +
    {% endblock %} diff --git a/phono-server/templates/toolbar_user.html b/phono-server/templates/toolbar_user.html deleted file mode 100644 index 1980e1e..0000000 --- a/phono-server/templates/toolbar_user.html +++ /dev/null @@ -1,14 +0,0 @@ -
    - - - - - -
  • - - Log out - -
    • -     -     -
    diff --git a/phono-server/templates/workspaces_multi/list.html b/phono-server/templates/workspaces_multi/list.html index e5ac3f7..879138a 100644 --- a/phono-server/templates/workspaces_multi/list.html +++ b/phono-server/templates/workspaces_multi/list.html @@ -1,52 +1,42 @@ -{% extends "base.html" %} - -{% block head_extras %} -{% endblock %} +{% extends "layouts/with_toolbar.html" %} {% block main %} -
    -
    - {% include "toolbar_user.html" %} -
    -
    -
    -
    + + {% endfor %} + + +
    +
    +

    Shared With Me

    +
    +
    + {% endblock %} diff --git a/phono-server/templates/workspaces_single/nav.html b/phono-server/templates/workspaces_single/nav.html index a726850..c64b876 100644 --- a/phono-server/templates/workspaces_single/nav.html +++ b/phono-server/templates/workspaces_single/nav.html @@ -1,16 +1,5 @@ -{% extends "base.html" %} +{% extends "layouts/with_sidebar.html" %} -{% block main %} -
    -
    - {% include "toolbar_user.html" %} -
    -
    -
    - {{ workspace_nav | safe }} -
    -
    -
    -
    -
    +{% block sidebar %} +{{ workspace_nav | safe }} {% endblock %} diff --git a/phono-server/templates/workspaces_single/service_credentials.html b/phono-server/templates/workspaces_single/service_credentials.html index fa9ff72..fc5a33c 100644 --- a/phono-server/templates/workspaces_single/service_credentials.html +++ b/phono-server/templates/workspaces_single/service_credentials.html @@ -1,63 +1,58 @@ -{% extends "base.html" %} +{% extends "layouts/with_sidebar.html" %} -{% block head_extras %} - +{% block toolbar_page_actions %} + + New Credential +
    +
    + +
    +
    +     +{% endblock %} + +{% block sidebar %} +{{ workspace_nav | safe }} {% endblock %} {% block main %} -
    -
    -
    - - New Credential -
    -
    - -
    -
    -     -
    - {% include "toolbar_user.html" %} -
    -
    -
    - {{ workspace_nav | safe }} -
    -
    -
    - - - - - - - - - - {% if service_cred_info.is_empty() %} - - - - {% endif %} - {% for cred in service_cred_info %} - - - - - - {% endfor %} - -
    Connection StringPermissionsActions
    No data
    - - - {{ cred.conn_string_redacted }} - - - {{ cred.conn_string.expose_secret() }} - - - {{ cred.permissions_editor | safe }} -
    - +
    +
    + + + + + + + + + {% if service_cred_info.is_empty() %} + + + + {% endif %} + {% for cred in service_cred_info %} + + + + + + {% endfor %} + +
    Connection StringPermissionsActions
    No data
    + + + {{ cred.conn_string_redacted }} + + + {{ cred.conn_string.expose_secret() }} + + + {{ cred.permissions_editor | safe }} +
    {% endblock %} + +{% block scripts %} + +{% endblock %} diff --git a/phono-server/templates/workspaces_single/settings.html b/phono-server/templates/workspaces_single/settings.html index 4f2e0bb..473ceb6 100644 --- a/phono-server/templates/workspaces_single/settings.html +++ b/phono-server/templates/workspaces_single/settings.html @@ -1,103 +1,93 @@ -{% extends "base.html" %} +{% extends "layouts/with_sidebar.html" %} {% block main %} -
    -
    - {% include "toolbar_user.html" %} -
    -
    -
    - {{ workspace_nav | safe }} -
    -
    -
    -
    -
    -

    Workspace Name

    - -
    - -
    -
    - +
    +
    -

    Sharing

    -
    - -
    - Workspace Name + - -
    -
    - - -
    - - -
    - -     -
    - - - - - - - - - {% for permissions_editor in collaborators %} - - {% let collaborator = User::try_from(permissions_editor.target.clone())? %} - - - - - {% endfor %} - -
    EmailPermissionsActions
    {{ collaborator.email }} - {{ permissions_editor | safe }} - -
    - - - -
    -
    -
    + +
    +

    Sharing

    +
    + +
    + +
    +
    +
    + + +
    + + +
    +
    +     + + + + + + + + + + {% for permissions_editor in collaborators %} + + {% let collaborator = User::try_from(permissions_editor.target.clone())? %} + + + + + {% endfor %} + +
    EmailPermissionsActions
    {{ collaborator.email }} + {{ permissions_editor | safe }} + +
    + + + +
    +
    +
    + +
    +
    {% endblock %} diff --git a/static/main.css b/static/main.css index 593376e..4928b0c 100644 --- a/static/main.css +++ b/static/main.css @@ -34,7 +34,7 @@ --default-padding--sm: 8px; --default-padding--lg: 32px; - --a-color: #069; + --a-color: oklch(from var(--accent-color) 0.5 0.15 calc(h + 135)); --button-background--primary: var(--accent-color); --button-background--secondary: #fff; @@ -51,8 +51,6 @@ --button-padding: var(--button-padding--default); --button-shadow: 0 2px 2px #3331; - --notice-color--info: #39d; - --popover-border-color: var(--default-border-color); --popover-shadow: 0 8px 8px #3333; } @@ -251,19 +249,6 @@ a { padding: 1rem 2rem; } -.notice { - border-radius: var(--default-border-radius--rounded); - margin: 1rem 0rem; - padding: 1rem; - max-width: 40rem; - - &.notice--info { - border: solid 1px globals.$notice-color-info; - background: oklch(from var(--notice-color--info) calc(l * 0.9) c h); - color: oklch(from var(--notice-color--info) calc(l * 0.2) c h); - } -} - .permissions-list { display: flex; flex-wrap: wrap; @@ -343,27 +328,63 @@ a { /* ======== Layout ======== */ -.page-grid { +.layout-with-sidebar, .layout-with-toolbar { height: 100vh; width: 100vw; display: grid; grid-template: - 'sidebar toolbar' 4rem + 'banner banner' max-content + 'sidebar toolbar' 64px 'sidebar main' 1fr / max-content 1fr; - .page-grid__toolbar { - align-items: center; - border-bottom: solid 1px var(--default-border-color); - display: grid; - grid-area: toolbar; - grid-template: 'utilities user' 1fr / 1fr max-content; - - .toolbar-item { - flex: 0; - } + .banner { + grid-area: banner; } - .page-grid__toolbar-utilities { + .toolbar { + grid-area: toolbar; + } + + .sidebar { + grid-area: sidebar; + } + + main { + grid-area: main; + overflow: auto; + } +} + +.banner { + background: oklch(from var(--accent-color) 0.5 0.08 calc(h + 135)); + color: #fff; + padding: 8px; + text-align: center; + + a { + color: oklch(from var(--a-color) 0.9 calc(c * 0.3) h); + } + + .ti { + position: relative; + top: 0.05rem; + } +} + +.sidebar { + width: 15rem; + max-height: 100vh; + overflow: auto; + border-right: solid 1px var(--default-border-color); +} + +.toolbar { + align-items: center; + border-bottom: solid 1px var(--default-border-color); + display: grid; + grid-template: 'utilities user' 1fr / 1fr max-content; + + .toolbar__page-actions { align-items: center; display: flex; gap: 12px; @@ -372,7 +393,7 @@ a { padding: 0 12px; } - .page-grid__toolbar-user { + .toolbar__user { align-items: center; display: flex; gap: 12px; @@ -386,24 +407,13 @@ a { --button-color: var(--button-color--secondary); } } - - .page-grid__sidebar { - grid-area: sidebar; - width: 15rem; - max-height: 100vh; - overflow: auto; - border-right: solid 1px var(--default-border-color); - } - - .page-grid__main { - grid-area: main; - overflow: auto; - } } /* ======== Workspace Nav ======== */ .workspace-nav { + padding: 16px; + h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; diff --git a/static/portal-table.css b/static/portal-table.css index 83a43fb..3668097 100644 --- a/static/portal-table.css +++ b/static/portal-table.css @@ -3,6 +3,9 @@ :root { --table-header-border-color: var(--default-border-color); --table-cell-border-color: oklch(from var(--default-border-color) calc(l * 1.15) c h); + + --cursor-outline-color: oklch(from var(--accent-color) 0.7 0.45 calc(h + 165)); + --selection-background-color: oklch(from var(--accent-color) 0.94 0.05 calc(h + 165)); } /* ======== Toolbar ======== */ @@ -205,11 +208,11 @@ width: 100%; &.table-viewer__cell-container--selected { - background: #07f3; + background: var(--selection-background-color); } &.table-viewer__cell-container--cursor { - outline: 3px solid #37f; + outline: 3px solid var(--cursor-outline-color); outline-offset: -2px; } } @@ -314,10 +317,10 @@ .table-viewer__inserter-submit { align-items: center; - border: dashed 1px var(--button-background--primary); + border: dashed 1px var(--a-color); border-bottom-right-radius: var(--default-border-radius--rounded-sm); border-top-right-radius: var(--default-border-radius--rounded-sm); - color: var(--button-background--primary); + color: var(--a-color); display: flex; justify-content: center; padding: 0 var(--default-padding);