Update layout style on pref page (#38)
This commit is contained in:
parent
ae29a6c03b
commit
24f5b5a741
@ -104,7 +104,7 @@ let colorToHex (color : string) =
|
||||
let radio name domId value current =
|
||||
input [ _type "radio"
|
||||
_name name
|
||||
_id domId
|
||||
if domId <> "" then _id domId
|
||||
_value value
|
||||
if value = current then _checked ]
|
||||
|
||||
|
||||
@ -370,6 +370,7 @@ let preferences (model : EditPreferences) ctx viewInfo =
|
||||
|> toHtmlIds
|
||||
let fontsId = $"#{nameof model.Fonts}"
|
||||
$"{numberFields} {{ width: 3rem; }}"
|
||||
$"#{nameof model.EmailFromName} {{ width: 15rem; }}"
|
||||
$"#{nameof model.EmailFromAddress} {{ width: 20rem; }}"
|
||||
$"{fontsId} {{ width: 40rem; }}"
|
||||
$"@media screen and (max-width: 40rem) {{ {fontsId} {{ width: 100%%; }} }}"
|
||||
@ -412,13 +413,16 @@ let preferences (model : EditPreferences) ctx viewInfo =
|
||||
]
|
||||
]
|
||||
]
|
||||
fieldset [] [
|
||||
fieldset [ _fieldRow ] [
|
||||
legend [] [ strong [] [ icon "sort"; rawText " "; locStr s["Request Sorting"] ] ]
|
||||
radio (nameof model.RequestSort) $"{nameof model.RequestSort}_D" "D" model.RequestSort
|
||||
label [ _for $"{nameof model.RequestSort}_D" ] [ locStr s["Sort by Last Updated Date"] ]
|
||||
rawText " "
|
||||
radio (nameof model.RequestSort) $"{nameof model.RequestSort}_R" "R" model.RequestSort
|
||||
label [ _for $"{nameof model.RequestSort}_R" ] [ locStr s["Sort by Requestor Name"] ]
|
||||
label [] [
|
||||
radio (nameof model.RequestSort) "" "D" model.RequestSort
|
||||
locStr s["Sort by Last Updated Date"]
|
||||
]
|
||||
label [] [
|
||||
radio (nameof model.RequestSort) "" "R" model.RequestSort
|
||||
locStr s["Sort by Requestor Name"]
|
||||
]
|
||||
]
|
||||
fieldset [] [
|
||||
legend [] [ strong [] [ icon "mail_outline"; rawText " "; locStr s["E-mail"] ] ]
|
||||
@ -450,45 +454,63 @@ let preferences (model : EditPreferences) ctx viewInfo =
|
||||
legend [] [ strong [] [ icon "color_lens"; rawText " "; locStr s["Colors"] ]; rawText " ***" ]
|
||||
div [ _fieldRow ] [
|
||||
div [ _inputField ] [
|
||||
label [ _class "pt-center-text" ] [ locStr s["Color of Heading Lines"] ]
|
||||
span [] [
|
||||
radio (nameof model.LineColorType) $"{nameof model.LineColorType}_Name" "Name"
|
||||
model.LineColorType
|
||||
label [ _for $"{nameof model.LineColorType}_Name" ] [ locStr s["Named Color"] ]
|
||||
namedColorList (nameof model.LineColor) model.LineColor [
|
||||
_id $"{nameof model.LineColor}_Select"
|
||||
if model.LineColor.StartsWith "#" then _disabled ] s
|
||||
rawText " "; str (s["or"].Value.ToUpper ())
|
||||
radio (nameof model.LineColorType) $"{nameof model.LineColorType}_RGB" "RGB"
|
||||
model.LineColorType
|
||||
label [ _for $"{nameof model.LineColorType}_RGB" ] [ locStr s["Custom Color"] ]
|
||||
input [ _type "color"
|
||||
_name (nameof model.LineColor)
|
||||
_id $"{nameof model.LineColor}_Color"
|
||||
_value (colorToHex model.LineColor)
|
||||
if not (model.LineColor.StartsWith "#") then _disabled ]
|
||||
label [] [ locStr s["Color of Heading Lines"] ]
|
||||
span [ _class "pt-radio-group" ] [
|
||||
span [] [
|
||||
label [] [
|
||||
radio (nameof model.LineColorType) $"{nameof model.LineColorType}_Name" "Name"
|
||||
model.LineColorType
|
||||
locStr s["Named Color"]
|
||||
]
|
||||
space
|
||||
namedColorList (nameof model.LineColor) model.LineColor [
|
||||
_id $"{nameof model.LineColor}_Select"
|
||||
if model.LineColor.StartsWith "#" then _disabled ] s
|
||||
]
|
||||
span [] [
|
||||
label [ _for $"{nameof model.LineColorType}_RGB" ] [
|
||||
radio (nameof model.LineColorType) $"{nameof model.LineColorType}_RGB" "RGB"
|
||||
model.LineColorType
|
||||
locStr s["Custom Color"]
|
||||
]
|
||||
space
|
||||
input [ _type "color"
|
||||
_name (nameof model.LineColor)
|
||||
_id $"{nameof model.LineColor}_Color"
|
||||
_value (colorToHex model.LineColor)
|
||||
if not (model.LineColor.StartsWith "#") then _disabled ]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
div [ _fieldRow ] [
|
||||
div [ _inputField ] [
|
||||
label [ _class "pt-center-text" ] [ locStr s["Color of Heading Text"] ]
|
||||
span [] [
|
||||
radio (nameof model.HeadingColorType) $"{nameof model.HeadingColorType}_Name" "Name"
|
||||
model.HeadingColorType
|
||||
label [ _for $"{nameof model.HeadingColorType}_Name" ] [ locStr s["Named Color"] ]
|
||||
namedColorList (nameof model.HeadingColor) model.HeadingColor [
|
||||
_id $"{nameof model.HeadingColor}_Select"
|
||||
if model.HeadingColor.StartsWith "#" then _disabled ] s
|
||||
rawText " "; str (s["or"].Value.ToUpper ())
|
||||
radio (nameof model.HeadingColorType) $"{nameof model.HeadingColorType}_RGB" "RGB"
|
||||
model.HeadingColorType
|
||||
label [ _for $"{nameof model.HeadingColorType}_RGB" ] [ locStr s["Custom Color"] ]
|
||||
input [ _type "color"
|
||||
_name (nameof model.HeadingColor)
|
||||
_id $"{nameof model.HeadingColor}_Color"
|
||||
_value (colorToHex model.HeadingColor)
|
||||
if not (model.HeadingColor.StartsWith "#") then _disabled ]
|
||||
label [] [ locStr s["Color of Heading Text"] ]
|
||||
span [ _class "pt-radio-group" ] [
|
||||
span [] [
|
||||
label [] [
|
||||
radio (nameof model.HeadingColorType) $"{nameof model.HeadingColorType}_Name" "Name"
|
||||
model.HeadingColorType
|
||||
locStr s["Named Color"]
|
||||
]
|
||||
space
|
||||
namedColorList (nameof model.HeadingColor) model.HeadingColor [
|
||||
_id $"{nameof model.HeadingColor}_Select"
|
||||
if model.HeadingColor.StartsWith "#" then _disabled ] s
|
||||
]
|
||||
span [] [
|
||||
label [] [
|
||||
radio (nameof model.HeadingColorType) $"{nameof model.HeadingColorType}_RGB" "RGB"
|
||||
model.HeadingColorType
|
||||
locStr s["Custom Color"]
|
||||
]
|
||||
space
|
||||
input [ _type "color"
|
||||
_name (nameof model.HeadingColor)
|
||||
_id $"{nameof model.HeadingColor}_Color"
|
||||
_value (colorToHex model.HeadingColor)
|
||||
if not (model.HeadingColor.StartsWith "#") then _disabled ]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
@ -518,29 +540,23 @@ let preferences (model : EditPreferences) ctx viewInfo =
|
||||
legend [] [ strong [] [ icon "settings"; rawText " "; locStr s["Other Settings"] ] ]
|
||||
div [ _fieldRow ] [
|
||||
div [ _inputField ] [
|
||||
label [ _for (nameof model.TimeZone) ] [ locStr s["Time Zone"] ]
|
||||
seq {
|
||||
"", selectDefault s["Select"].Value
|
||||
yield!
|
||||
TimeZones.all
|
||||
|> List.map (fun tz -> TimeZoneId.toString tz, (TimeZones.name tz s).Value)
|
||||
}
|
||||
|> selectList (nameof model.TimeZone) model.TimeZone [ _required ]
|
||||
]
|
||||
]
|
||||
div [ _inputField ] [
|
||||
label [] [ locStr s["Request List Visibility"] ]
|
||||
span [] [
|
||||
let name = nameof model.Visibility
|
||||
let value = string model.Visibility
|
||||
radio name $"{name}_Public" (string GroupVisibility.PublicList) value
|
||||
label [ _for $"{name}_Public" ] [ locStr s["Public"] ]
|
||||
rawText " "
|
||||
radio name $"{name}_Private" (string GroupVisibility.PrivateList) value
|
||||
label [ _for $"{name}_Private" ] [ locStr s["Private"] ]
|
||||
rawText " "
|
||||
radio name $"{name}_Password" (string GroupVisibility.HasPassword) value
|
||||
label [ _for $"{name}_Password" ] [ locStr s["Password Protected"] ]
|
||||
label [] [ locStr s["Request List Visibility"] ]
|
||||
span [ _class "pt-radio-group" ] [
|
||||
let name = nameof model.Visibility
|
||||
let value = string model.Visibility
|
||||
label [] [
|
||||
radio name $"{name}_Public" (string GroupVisibility.PublicList) value
|
||||
locStr s["Public"]
|
||||
]
|
||||
label [] [
|
||||
radio name $"{name}_Private" (string GroupVisibility.PrivateList) value
|
||||
locStr s["Private"]
|
||||
]
|
||||
label [] [
|
||||
radio name $"{name}_Password" (string GroupVisibility.HasPassword) value
|
||||
locStr s["Password Protected"]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
let classSuffix = if model.Visibility = GroupVisibility.HasPassword then [ "pt-show" ] else []
|
||||
@ -551,6 +567,16 @@ let preferences (model : EditPreferences) ctx viewInfo =
|
||||
]
|
||||
]
|
||||
div [ _fieldRow ] [
|
||||
div [ _inputField ] [
|
||||
label [ _for (nameof model.TimeZone) ] [ locStr s["Time Zone"] ]
|
||||
seq {
|
||||
"", selectDefault s["Select"].Value
|
||||
yield!
|
||||
TimeZones.all
|
||||
|> List.map (fun tz -> TimeZoneId.toString tz, (TimeZones.name tz s).Value)
|
||||
}
|
||||
|> selectList (nameof model.TimeZone) model.TimeZone [ _required ]
|
||||
]
|
||||
div [ _inputField ] [
|
||||
label [ _for (nameof model.PageSize) ] [ locStr s["Page Size"] ]
|
||||
inputField "number" (nameof model.PageSize) (string model.PageSize) [
|
||||
|
||||
@ -165,9 +165,6 @@ select {
|
||||
font-family: var(--native-fonts);
|
||||
border-width: 1px;
|
||||
}
|
||||
input:nth-of-type(2) {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
button[type=submit] {
|
||||
border-radius: .6rem;
|
||||
padding: .2rem 1rem;
|
||||
@ -257,6 +254,11 @@ footer a:hover {
|
||||
text-transform: uppercase;
|
||||
color: #777;
|
||||
}
|
||||
.pt-radio-group {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 2rem;
|
||||
}
|
||||
.pt-center-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user