Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Added a custom Option type and extended the select and added a few new classes for typography#1060

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.

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

Already on GitHub?Sign in to your account

Merged
SilasMarvin merged 3 commits intomasterfromsilas-new-home
Oct 10, 2023
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
20 changes: 17 additions & 3 deletionspgml-dashboard/src/components/inputs/select/mod.rs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
use crate::components::stimulus::stimulus_action::{StimulusAction, StimulusEvents};
use crate::components::stimulus::stimulus_target::StimulusTarget;
use pgml_components::component;
use pgml_components::Component;
use sailfish::TemplateOnce;
use crate::types::CustomOption;

#[derive(TemplateOnce, Default)]
#[template(path = "inputs/select/template.html")]
Expand All@@ -14,6 +16,8 @@ pub struct Select {
menu_position: String,
expandable: bool,
name: String,
value_target: StimulusTarget,
action: CustomOption<StimulusAction>,
}

impl Select {
Expand All@@ -34,13 +38,13 @@ impl Select {
])
}

pub fn options(mut self, values: Vec<String>) -> Self {
pub fn options<S: ToString>(mut self, values: Vec<S>) -> Self {
let mut options = Vec::new();
self.value = values.first().unwrap().to_owned();
self.value = values.first().unwrap().to_string();

for value in values {
let item = Option::new(
value,
value.to_string(),
StimulusAction::new()
.controller("inputs-select")
.method("choose")
Expand DownExpand Up@@ -92,6 +96,16 @@ impl Select {
self.expandable = true;
self
}

pub fn value_target(mut self, value_target: StimulusTarget) -> Self {
self.value_target = value_target;
self
}

pub fn action(mut self, action: StimulusAction) -> Self {
self.action = action.into();
self
}
}

#[derive(TemplateOnce)]
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,6 @@ export default class extends Controller {
choose(e) {
this.inputTarget.value = e.target.innerHTML
this.valueTarget.innerHTML = e.target.innerHTML
this.inputTarget.dispatchEvent(new Event('change'))
}

}
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -29,5 +29,5 @@

<%+ dropdown %>

<input type="hidden" name="<%= name %>" value="<%= value %>" data-inputs-select-target="input">
<input type="hidden" name="<%= name %>" value="<%= value %>" data-inputs-select-target="input" <%- value_target %> data-action="<%- action %>" />
</div>
1 change: 1 addition & 0 deletionspgml-dashboard/src/lib.rs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,6 +13,7 @@ use sailfish::TemplateOnce;
use sqlx::PgPool;
use std::collections::HashMap;

pub mod types;
pub mod api;
pub mod components;
pub mod fairings;
Expand Down
46 changes: 46 additions & 0 deletionspgml-dashboard/src/types.rs
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
use sailfish::runtime::{Buffer, Render};
use std::ops::{Deref, DerefMut};

// This is a custom wrapper around Option so we can implement render for it
pub struct CustomOption<T>(Option<T>);

impl<T> Default for CustomOption<T> {
fn default() -> Self {
Self(None)
}
}

impl<T> CustomOption<T> {
pub fn new(value: T) -> Self {
Self(Some(value))
}
}

impl<T> From<T> for CustomOption<T> {
fn from(value: T) -> Self {
Self(Some(value))
}
}

impl<T> Deref for CustomOption<T> {
type Target = Option<T>;

fn deref(&self) -> &Self::Target {
&self.0
}
}

impl<T> DerefMut for CustomOption<T> {
fn deref_mut(&mut self) -> &mut Self::Target {
&mut self.0
}
}

impl<T: Render> Render for CustomOption<T> {
fn render(&self, b: &mut Buffer) -> Result<(), sailfish::RenderError> {
match &self.0 {
Some(value) => value.render(b),
None => Ok(()),
}
}
}
58 changes: 49 additions & 9 deletionspgml-dashboard/static/css/scss/base/_typography.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@


// all other displays are default bootstrap styling
.display-2 {font-weight: 700; font-size: 4rem; line-height: 80px;}
.display-2 {
font-weight: 700;
font-size: 4rem;
line-height: 80px;
}

// TODO: Go through html and ensure headers use appropriate header class, header and class do not need to match.
// .h1 {font-weight: 700; font-size: 64px; line-height: 72px;}
Expand All@@ -11,10 +13,48 @@
// .h5 {font-weight: 700; font-size: 28px; line-height: 34px;}
// .h6 {font-weight: 700; font-size: 24px; line-height: 30px;}

.subcopy-text {font-size: 18px; line-height: 22px}
.body-text {font-size: 16px; line-height: 20px}
.legal-text {font-size: 12px; line-height: 16px;}
.subcopy-text {
font-size: 18px;
line-height: 22px;
}
.body-text {
font-size: 16px;
line-height: 20px;
}
.legal-text {
font-size: 12px;
line-height: 16px;
}

.text-black {
color: #{$gray-900} !important;
}
.text-white {
color: #{$gray-100} !important;
}
.text-soft-white {
color: #{$gray-200} !important;
}

.text-black {color: #{$gray-900} !important;}
.text-white {color: #{$gray-100} !important;}
.text-soft-white { color: #{$gray-200} !important; }
@mixin text-gradient($gradient) {
background: #{$gradient};
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.text-gradient-blue {
@include text-gradient($gradient-blue);
}
.text-gradient-green {
@include text-gradient($gradient-green);
}
.text-gradient-orange {
@include text-gradient($gradient-orange);
}
.text-gradient-pink {
@include text-gradient($gradient-pink);
}
.text-gradient-purple {
@include text-gradient($gradient-purple);
}
58 changes: 33 additions & 25 deletionspgml-dashboard/static/css/scss/components/_buttons.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,8 @@
text-align: center;
gap: 8px;

&[disabled], &:disabled {
&[disabled],
&:disabled {
cursor: not-allowed;
}
}
Expand DownExpand Up@@ -52,20 +53,20 @@
--bs-btn-font-size: 18px;

// the attached canvas for border in secondary-btn.js
&> .secondary-btn-canvas {
&> .secondary-btn-canvas {
position: absolute;
border: None;
display: None;
}

&:hover {
&> .secondary-btn-canvas {
&> .secondary-btn-canvas {
display: block;
}
}

&:active {
&> .secondary-btn-canvas {
&> .secondary-btn-canvas {
filter: brightness(65%);
display: block;
}
Expand All@@ -80,7 +81,7 @@
--bs-btn-hover-bg: transparent;
--bs-btn-hover-color: #{$gray-100};
--bs-btn-hover-border-color: transparent;

--bs-btn-active-bg: transparent;
--bs-btn-active-color: #{$gray-100};
--bs-btn-active-border-color: transparent;
Expand DownExpand Up@@ -115,18 +116,22 @@

border: 0px;

&:disabled, &.disabled {
&:disabled,
&.disabled {
color: #{$neon-shade-400};
background-color: #{$neon-shade-700};
}

&:hover, &:active {
&:hover,
&:active {
@include bold_by_shadow(var(--bs-btn-hover-color));
}
&:active {
@include bold_by_shadow(var(--bs-btn-active-color));
}
&:focus, &:focus-visible, &:focus-within {
&:focus,
&:focus-visible,
&:focus-within {
@include bold_by_shadow(var(--bs-btn-focus-color));
}
}
Expand All@@ -153,7 +158,9 @@
&:active {
@include bold_by_shadow(var(--bs-btn-active-color));
}
&:focus, &:focus-visible, &:focus-within {
&:focus,
&:focus-visible,
&:focus-within {
@include bold_by_shadow(var(--bs-btn-focus-color));
}
}
Expand DownExpand Up@@ -182,14 +189,14 @@

&.with-icon {
&::after {
content: ">"
content: ">";
}
}
}

.btn-code-toolbar {
@extend .btn;
@extend .btn-tertiary;
@extend .btn;
@extend .btn-tertiary;
@extend .noselect;

@extend .z-1;
Expand All@@ -202,14 +209,15 @@
text-shadow: none;
}

&:disabled, &[disabled] {
&:disabled,
&[disabled] {
color: #{$slate-shade-700} !important;
}
}

.btn-copy {
@extend .btn-code-toolbar;
position: absolute;
position: absolute;
top: 4px;
right: 4px;
}
Expand All@@ -221,7 +229,7 @@
border-bottom: 2px solid #{$gray-300};
color: #{$gray-100};
padding: 0 0 calc($spacer / 2) 0;

&:hover {
border-bottom-color: #{$neon-shade-100};
}
Expand All@@ -231,7 +239,7 @@
border-bottom: #{$gray-500};
}

&> span {
&> span {
color: #{$neon-shade-100};
}
}
Expand All@@ -258,15 +266,15 @@
border-left: 0px;
border-right: 0px;
border-bottom: 1px solid #{$gray-100} !important;

--bs-btn-active-color: #{$gray-100};
--bs-btn-hover-color: #{$gray-100};
}

.left-nav-toggle-icon {
margin-left: calc($left-nav-w - 9rem);
margin-right: 0px;

&.expanding {
animation-name: expand-margin;
animation-duration: $animation-timer;
Expand All@@ -279,7 +287,7 @@
}

&.expanded {
margin-left: calc($left-nav-w - 9rem);
margin-left: calc($left-nav-w - 9rem);
margin-right: 0px;
}

Expand All@@ -296,21 +304,21 @@

@keyframes collapse-margin {
from {
margin-left: calc($left-nav-w - 9rem);
margin-left: calc($left-nav-w - 9rem);
margin-right: 0px;
}
to {
margin-left: calc($left-nav-w-collapsed/2 - 32px);
margin-right: calc($left-nav-w-collapsed/2 - 32px);
margin-left: calc($left-nav-w-collapsed/2 - 32px);
margin-right: calc($left-nav-w-collapsed/2 - 32px);
}
}
@keyframes expand-margin {
from {
margin-left: calc($left-nav-w-collapsed/2 - 32px);
margin-left: calc($left-nav-w-collapsed/2 - 32px);
margin-right: calc($left-nav-w-collapsed/2 - 32px);
}
to {
margin-left: calc($left-nav-w - 9rem);
margin-left: calc($left-nav-w - 9rem);
margin-right: 0px;
}
}
[8]ページ先頭
©2009-2025 Movatter.jp