Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix and improve fast templates #6023

Merged
merged 9 commits into from
Dec 11, 2023
Merged

Fix and improve fast templates #6023

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8a9af2b
remove outline
MarcSkovMadsen Dec 5, 2023
14a20f0
fix sidebar padding
MarcSkovMadsen Dec 5, 2023
09a3350
fix button_type primary
MarcSkovMadsen Dec 5, 2023
4172e8e
fix primary button
MarcSkovMadsen Dec 5, 2023
6d76dce
fix button primary outline
MarcSkovMadsen Dec 5, 2023
8775af0
fix outline radioboxgroup
MarcSkovMadsen Dec 5, 2023
3ce008e
fix fast buttons and link
MarcSkovMadsen Dec 9, 2023
ec88708
improve template
MarcSkovMadsen Dec 9, 2023
81410cd
support sizing_mode="stretch_both"
MarcSkovMadsen Dec 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion panel/template/fast/fast.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ img.app-logo {
transform-origin: center left;
height: calc(100vh - 76px);
overflow-y: auto;
padding: 15px 10px 5px 0;
padding: 15px 10px 5px 5px;
}

#sidebar.hidden {
Expand Down Expand Up @@ -214,6 +214,10 @@ img.app-logo {
margin-block-end: 0;
}

div.pn-wrapper {
height: 100%;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we sure about this one?

}

.pn-modal-close {
position: absolute;
right: 10%;
Expand Down
3 changes: 3 additions & 0 deletions panel/template/fast/grid/fast_grid_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,9 @@
#sidebar {
min-width: var(--sidebar-width);
max-width: var(--sidebar-width);
{% if not main_layout %}
background-color: var(--panel-surface-color);
{% endif %}
}
</style>

Expand Down
3 changes: 3 additions & 0 deletions panel/template/fast/list/fast_list_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@
#sidebar {
min-width: var(--sidebar-width);
max-width: var(--sidebar-width);
{% if not main_layout %}
background-color: var(--panel-surface-color);
{% endif %}
Comment on lines +56 to +58
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{% if not main_layout %}
background-color: var(--panel-surface-color);
{% endif %}
{% if not main_layout %}
background-color: var(--panel-surface-color);
{% endif %}

}
</style>

Expand Down
120 changes: 98 additions & 22 deletions panel/theme/css/fast.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,16 @@
--switch-size: 12px;
--container-background: var(--panel-surface-color);
color: var(--neutral-foreground-rest);

--panel-primary-color: var(--accent-foreground-rest);
--panel-on-primary-color: var(--foreground-on-accent-rest);
}
/* Anchor */
a {
color: var(--accent-fill-rest);
}
a:hover {
color: var(--accent-fill-hover);
}

/* Track */
Expand Down Expand Up @@ -472,7 +482,32 @@ input[type='file']:active {
(var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px
);
}
.bk-btn-default:focus,
.bk-btn-default:active,
.bk-btn-primary:focus,
.bk-btn-primary:active,
.bk-btn-success:focus,
.bk-btn-success:active,
.bk-btn-warning:focus,
.bk-btn-warning:active,
.bk-btn-danger:focus,
.bk-btn-danger:active,
.bk-btn-light:focus,
.bk-btn-light:active {
outline: none;
}
.bk-btn:active {
transform: none;
}

:host(.solid) .bk-btn-group .bk-btn.bk-btn-default.bk-active,
:host(.solid) .bk-btn-group .bk-btn.bk-btn-primary.bk-active,
.bk-btn:active,
::file-selector-button:active,
.bk-active.bk-btn,
.bk-active::file-selector-button {
box-shadow: none;
}
.bk-btn a {
text-decoration: none;
color: inherit;
Expand All @@ -491,51 +526,88 @@ input[type='file']:active {

:host(.solid) .bk-btn.bk-btn-default:hover {
background-color: var(--neutral-fill-hover);
color: var(--neutral-foreground-hover);
}

:host(.solid) .bk-btn.bk-btn-default:active,
:host(.solid) .bk-btn.bk-btn-default.bk-active {
background-color: var(--neutral-fill-active);
color: var(--neutral-foreground-active);
}

:host(.outline) .bk-btn.bk-btn-default {
background-color: transparent;
border: 1px solid var(--neutral-fill-strong-rest);
border: 1px solid var(--neutral-stroke-rest);
color: var(--neutral-fill-strong-rest);
}

:host(.outline) .bk-btn.bk-btn-default:hover {
background-color: var(--neutral-fill-hover);
color: var(--neutral-foreground-rest);
border-color: var(--neutral-stroke-hover);
color: var(--neutral-fill-strong-hover);
}

:host(.outline) .bk-btn.bk-btn-default:active {
border-color: var(--neutral-stroke-active);
color: var(--neutral-fill-strong-active);
}

:host(.outline) .bk-btn.bk-btn-default.bk-active {
color: var(--foreground-on-accent-rest);
box-shadow: inset 0px 3px 5px rgb(0 0 0 / 25%);
color: var(--neutral-foreground-rest);
box-shadow: none;
}

:host(.outline) .bk-btn-group .bk-btn-default.bk-active {
background-color: var(--neutral-fill-active);
color: var(--foreground-on-accent-active);
color: var(--neutral-foreground-rest);
}

:host(.solid) .bk-btn.bk-btn-primary {
:host(.outline) .bk-btn-group .bk-btn-primary.bk-active,
:host(.solid) .bk-btn.bk-btn-primary,
:host(.solid) .bk-btn.bk-btn-primary[disabled],
:host(.solid) .bk-btn.bk-btn-primary[disabled]:hover {
background-color: var(--accent-fill-rest);
border-color: var(--accent-fill-rest);
color: var(--foreground-on-accent-rest);
}

:host(.solid) .bk-btn.bk-btn-primary.bk-active {
:host(.solid) .bk-btn.bk-btn-primary:hover {
background-color: var(--accent-fill-hover);
border-color: var(--accent-fill-hover);
color: var(--foreground-on-accent-hover);
}
:host(.solid) .bk-btn.bk-btn-primary.bk-active,
:host(.solid) .bk-btn.bk-btn-primary:active,
:host(.solid) .bk-btn.bk-btn-primary.bk-active[disabled],
:host(.solid) .bk-btn.bk-btn-primary.bk-active[disabled]:hover {
background-color: var(--accent-fill-active);
box-shadow: inset 0px 3px 5px rgb(0 0 0 / 25%);
border-color: var(--accent-fill-active);
color: var(--foreground-on-accent-active);
}

:host(.outline) .bk-btn-primary {
background-color: transparent;
color: var(--neutral-foreground-rest);
:host(.outline) .bk-btn-group .bk-btn-primary.bk-active:hover,
:host(.solid) .bk-btn.bk-btn-primary.bk-active:hover {
background-color: var(--accent-fill-hover);
color: var(--foreground-on-accent-hover);
}

:host(.outline) .bk-btn-primary.bk-active,
:host(.outline) .bk-btn-primary:hover {
color: var(--neutral-foreground-rest);
:host(.solid) .bk-btn.bk-btn-primary[disabled],
:host(.solid) .bk-btn.bk-btn-primary[disabled]:hover,
:host(.solid) .bk-btn.bk-btn-primary[disabled]:focus,
:host(.solid) .bk-btn.bk-btn-primary[disabled].bk-active {
pointer-events: none !important;
cursor: not-allowed;
opacity: var(--disabled-opacity);
}

:host(.outline) .bk-btn-group .bk-btn-primary.bk-active {
background-color: var(--accent-fill-rest);
color: var(--foreground-on-accent-active);
:host(.outline) .bk-btn.bk-btn-primary.bk-active:hover,
:host(.outline) .bk-btn.bk-btn-primary:hover {
border-color: var(--accent-fill-hover);
color: var(--neutral-foreground-hover);
}
:host(.outline) .bk-btn.bk-btn-primary.bk-active,
:host(.outline) .bk-btn.bk-btn-primary:active {
border-color: var(--accent-fill-active);
color: var(--neutral-foreground-active);
}
:host(.outline) .bk-btn.bk-btn-primary {
border-color: var(--accent-fill-rest);
color: var(--neutral-foreground-rest);
}

:host(.outline) .bk-btn-success.bk-active,
Expand Down Expand Up @@ -589,6 +661,10 @@ input[type='file']:active {
select:not([type='file']).bk-input {
margin: 0;
}
select:not([multiple]).bk-input,
select:not([size]).bk-input {
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" viewBox="0 0 25 20" xmlns="http://www.w3.org/2000/svg"><path d="M 0,0 25,0 12.5,20 Z" fill="darkgrey"/></svg>');
}

/* Checkbox/Radio */

Expand Down