web/notify.moe
Code Issues Pull Requests Activity

Group up existing components into elements

Browse Source
This commit is contained in:
Eduard Urbach
2019-11-19 16:12:52 +09:00
parent dc4fc1410d
commit c542bcdcd6
77 changed files with 291 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
elements/Input/InputBool.pixy Normal file
View File

@ -0,0 +1,11 @@
component InputBool(id string, value bool, label string, title string)
.widget-section
label= label + ":"
if value
button.action(id=id, data-action="disable", data-trigger="click", data-field=id, title=title)
Icon("toggle-on")
span ON
else
button.action(id=id, data-action="enable", data-trigger="click", data-field=id, title=title)
Icon("toggle-off")
span OFF

9
elements/Input/InputColor.pixy Normal file
View File

@ -0,0 +1,9 @@
component InputColor(id string, variable string, label string)
.widget-section
label(for=id)= label
.color-picker-container
.widget-ui-element.color-picker.color-box.action(data-color="var(--" + variable + ")", data-variable=variable, data-action="pickColor", data-trigger="click")
button.tip(aria-label="Reset", disabled)
RawIcon("power-off")

6
elements/Input/InputFileUpload.pixy Normal file
View File

@ -0,0 +1,6 @@
component InputFileUpload(id string, label string, uploadType string, endpoint string)
.widget-section
label= label + ":"
button.action(id=id, data-action="selectFile", data-trigger="click", data-endpoint=endpoint, data-type=uploadType)
Icon("upload")
span Select file

14
elements/Input/InputNumber.pixy Normal file
View File

@ -0,0 +1,14 @@
component InputNumber(id string, value float64, label string, placeholder string, min string, max string, step string)
.widget-section
label(for=id)= label + ":"
input.widget-ui-element.action(id=id, data-field=id, type="number", value=value, min=min, max=max, step=step, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change")
component InputNumberWithButtons(id string, value float64, label string, placeholder string, min string, max string, step string)
.widget-section
label(for=id)= label + ":"
.number-input-container
input.widget-ui-element.action(id=id, data-field=id, type="number", value=value, min=min, max=max, step=step, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change")
button.action.tip(data-action="addNumber", data-trigger="click", data-id=id, data-add="1", aria-label="Increase by 1")
RawIcon("plus")
button.action.tip(data-action="addNumber", data-trigger="click", data-id=id, data-add="-1", aria-label="Decrease by 1")
RawIcon("minus")

6
elements/Input/InputSelection.pixy Normal file
View File

@ -0,0 +1,6 @@
component InputSelection(id string, value string, label string, placeholder string, options []*arn.Option)
.widget-section
label(for=id)= label + ":"
select.widget-ui-element.action(id=id, data-field=id, value=value, title=placeholder, data-action="save", data-trigger="change")
each option in options
option(value=option.Value)= option.Label

13
elements/Input/InputTags.pixy Normal file
View File

@ -0,0 +1,13 @@
component InputTags(id string, value []string, label string, tooltip string)
.widget-section
label(for=id)= label + ":"
.tags(id=id)
for index, tag := range value
.tag.tag-edit.action(contenteditable="true", data-action="save", data-trigger="focusout", data-field=id + "[" + strconv.Itoa(index) + "]")= tag
button.tag-remove.action(data-action="arrayRemove", data-trigger="click", data-field=id, data-index=index)
RawIcon("trash")
button.tag-add.action(data-action="arrayAppend", data-trigger="click", data-field=id, title="Add more")
RawIcon("plus")
p!= tooltip

4
elements/Input/InputText.pixy Normal file
View File

@ -0,0 +1,4 @@
component InputText(id string, value string, label string, placeholder string, maxLength int)
.widget-section
label(for=id)= label + ":"
input.widget-ui-element.action(id=id, data-field=id, type="text", value=value, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change", maxlength=maxLength)

4
elements/Input/InputTextArea.pixy Normal file
View File

@ -0,0 +1,4 @@
component InputTextArea(id string, value string, label string, placeholder string, maxLength int)
.widget-section
label(for=id)= label + ":"
textarea.widget-ui-element.action(id=id, data-field=id, placeholder=placeholder, title=placeholder, data-action="save", data-trigger="change", maxlength=maxLength)= value

87
elements/Input/input.scarlet Normal file
View File

@ -0,0 +1,87 @@
input, textarea, button, .button, select
ui-element
font-family inherit
font-size 1em
line-height 1.25em
color text-color
input, textarea, select
input-focus
width 100%
:disabled
ui-disabled
input, select
padding 0.5rem 1rem
input
height input-height
[pattern]
:focus
:invalid
border-color red !important
:valid
border-color green !important
:active
transform translateY(3px)
.color-picker-container
horizontal
.color-picker
ui-element
flex 1
height input-height
margin-right content-padding-half
:hover
cursor pointer
:active
transform translateY(3px)
button, .button
horizontal
padding 0rem 1rem
color button-color
align-items center
pointer-events all
height input-height
button-hover
:disabled
ui-disabled
select
appearance none
-webkit-appearance none
-moz-appearance none
option
color text-color
background bg-color
label
width 100%
padding 0.5rem 0
text-align left
textarea
padding 0.4em 0.8em
line-height 1.5em
min-height 10rem
transition none
.number-input-container
horizontal
button
justify-content center
margin-left 0.2rem
width input-height
height input-height

45
elements/Input/widgets.scarlet Normal file
View File

@ -0,0 +1,45 @@
.widget
vertical
flex 1
margin content-padding-half
.widget-section
vertical
width 100%
.widget-section-with-preview
horizontal
.widget-section-preview
display flex
justify-content center
align-items center
margin-left 1rem
img
anime-mini-item-image
.widget-title
horizontal
align-items center
padding-bottom 0.5rem
border-bottom 1px solid rgba(0, 0, 0, 0.1)
// We need !important here to overwrite the h3:first-child rule
margin 1rem 0 !important
.widget-ui-element
vertical-wrap
ui-element
transition border transition-speed ease, background transition-speed ease, transform transition-speed ease, color transition-speed ease
margin-bottom 1rem
padding 0.5rem 1rem
width 100%
// max-width 700px
.widget-form
width 100%
max-width 650px
margin 0 auto
.indent
margin-left 1rem