Skip to content

Commit 279c680

Browse files
functorafunctora
committed
better more compact field ui layout
1 parent 4722d34 commit 279c680

File tree

10 files changed

+147
-97
lines changed

10 files changed

+147
-97
lines changed

‎ghcjs/delivery-calculator/delivery-calculator.cabal‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
cabal-version: 2.2
22
name: delivery-calculator
3-
version: 0.1.0.5
3+
version: 0.1.0.6
44
synopsis: Delivery Calculator
55
category: Web
66
build-type: Simple

‎ghcjs/delivery-calculator/src/App/Widgets/Main.hs‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,15 @@ mainWidget st =
4040
$ screenWidget st
4141
]
4242
<> [ keyed "main-footer"
43-
. footer_
44-
[ style_
45-
[ ("text-align", "center"),
46-
("margin-bottom", "1rem")
43+
. Flex.flexRowCenter
44+
footer_
45+
( <>
46+
[ style_
47+
[ ("text-align", "center"),
48+
("margin-bottom", "1rem")
49+
]
4750
]
48-
]
51+
)
4952
$ tosWidget
5053
: br_ mempty
5154
: Menu.qrButton st
@@ -113,8 +116,8 @@ screenWidget st@Model {modelState = St {stScreen = Main}} =
113116
buttons :: [View Action]
114117
buttons =
115118
singleton
116-
$ Flex.flexRow
117-
p_
119+
$ Flex.flexRowCenter
120+
section_
118121
( mappend
119122
[ style_
120123
[ ("margin-left", "0"),
@@ -183,7 +186,8 @@ totalViewer st =
183186
tosWidget :: View Action
184187
tosWidget =
185188
small_
186-
mempty
189+
[ style_ [("width", "100%")]
190+
]
187191
[ Miso.text "\169 2024 ",
188192
BrowserLink.browserLink
189193
BrowserLink.Args

‎ghcjs/delivery-calculator/src/App/Widgets/Menu.hs‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,12 @@ menu st =
139139
( inspectExchangeRate $ modelState st
140140
)
141141
& ( if disabled
142-
then #optsTrailingWidget .~ Nothing
142+
then
143+
(#optsTrailingWidget .~ Nothing)
144+
. ( #optsLeadingWidget .~ Nothing ::
145+
Field.Opts Model Action ->
146+
Field.Opts Model Action
147+
)
143148
else id
144149
)
145150
)

‎ghcjs/delivery-calculator/trapeze.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
platforms:
22
android:
33
appName: Delivery Calculator
4-
versionCode: 5
5-
versionName: 0.1.0.5
4+
versionCode: 6
5+
versionName: 0.1.0.6
66
packageName: com.functora.delivery_calculator
77
manifest:
88
- file: AndroidManifest.xml

‎ghcjs/miso-functora/dist/miso-functora/post-theme.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ghcjs/miso-functora/lib/miso-functora/post-theme.css‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,26 @@ nav {
2424
position: initial !important;
2525
}
2626

27+
nav:before,
28+
nav:after {
29+
content: initial !important;
30+
}
31+
32+
img,
2733
input,
34+
label,
2835
select,
29-
button {
30-
margin: 0.25rem 0.125rem;
36+
button,
37+
textarea {
38+
min-width: 0 !important;
39+
max-width: 100% !important;
40+
margin: 0.25rem 0.125rem !important;
3141
}
3242

3343
button {
3444
padding-left: 1rem;
3545
padding-right: 1rem;
46+
width: unset !important;
3647
}
3748

3849
header,
@@ -51,6 +62,10 @@ footer:after {
5162
max-width: 100%;
5263
}
5364

65+
label:before {
66+
align-self: start;
67+
}
68+
5469
textarea {
5570
resize: vertical;
5671
pointer-events: auto;

‎ghcjs/miso-functora/src/Functora/Miso/Widgets/Currency.hs‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ selectCurrency
7777
Dialog.defOpts
7878
{ Dialog.optsTitle = Just "Currency",
7979
Dialog.optsTitleIcon = Just Icon.IconCoins,
80-
Dialog.optsFlexContent = False,
80+
Dialog.optsFlexCol = False,
8181
Dialog.optsExtraOnClose =
8282
cloneTraversal optic
8383
. #currencyInput
@@ -101,9 +101,11 @@ selectCurrency
101101
& #optsPlaceholder
102102
.~ ("Search" :: Unicode)
103103
& #optsExtraAttributes
104-
.~ [autofocus_ True]
104+
.~ [ autofocus_ True,
105+
style_ [("flex-grow", "reset")]
106+
]
105107
)
106-
<> [br_ mempty]
108+
<> [div_ [style_ [("width", "100%")]] mempty]
107109
<> currencyListWidget opts args
108110
}
109111
where

‎ghcjs/miso-functora/src/Functora/Miso/Widgets/Dialog.hs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ data Opts model action = Opts
2828
optsFooterLeft :: [View action] -> [View action],
2929
optsFooterRight :: [View action] -> [View action],
3030
optsExtraOnClose :: model -> model,
31-
optsFlexContent :: Bool,
31+
optsFlexCol :: Bool,
3232
optsKeyed :: Maybe Unicode,
3333
optsIcon :: Icon.Icon -> View action
3434
}
@@ -44,7 +44,7 @@ defOpts =
4444
optsFooterLeft = id,
4545
optsFooterRight = id,
4646
optsExtraOnClose = id,
47-
optsFlexContent = True,
47+
optsFlexCol = True,
4848
optsKeyed = Nothing,
4949
optsIcon = Icon.icon @Icon.Fa
5050
}
@@ -76,9 +76,9 @@ dialog opts args =
7676
id
7777
(optsHeaderLeft opts defHeaderLeft)
7878
(optsHeaderRight opts defHeaderRight)
79-
<> ( if optsFlexContent opts
79+
<> ( if optsFlexCol opts
8080
then [Flex.flexCol form_ id $ argsContent args]
81-
else [form_ mempty $ argsContent args]
81+
else [Flex.flexRow form_ id $ argsContent args]
8282
)
8383
<> Flex.flexLeftRight
8484
footer_

‎ghcjs/miso-functora/src/Functora/Miso/Widgets/Field.hs‎

Lines changed: 86 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -149,53 +149,70 @@ field full@Full {fullArgs = args, fullParser = parser, fullViewer = viewer} opts
149149
( \x ->
150150
singleton
151151
. keyed (decodeUtf8 . unTagged $ htmlUid uid)
152-
. label_ mempty
153-
. (text x :)
154-
. (br_ mempty :)
155-
)
156-
(optsLabel opts)
157-
( [ input_
158-
$ ( catMaybes
159-
[ Just . type_ $ htmlFieldType typ,
160-
fmap required_
161-
$ st
162-
^? cloneTraversal optic
163-
. #fieldRequired,
164-
fmap
165-
(textProp "defaultValue")
166-
( st
167-
^? cloneTraversal
168-
optic
169-
. #fieldInput
170-
. #uniqueValue
171-
),
172-
Just
173-
$ onInput onInputAction,
174-
Just
175-
. disabled_
176-
$ opts
177-
^. #optsDisabled,
178-
fmap placeholder_
179-
$ if null placeholder
180-
then optsLabel opts
181-
else Just placeholder,
182-
Just
183-
. id_
184-
. either impureThrow id
185-
. decodeUtf8Strict
186-
. unTagged
187-
$ htmlUid uid,
188-
Just
189-
. onKeyDown
190-
$ action
191-
. optsOnKeyDownAction opts uid,
192-
Just
193-
$ onBlur onBlurAction
152+
. label_
153+
[ style_
154+
[ ("display", "flex"),
155+
("flex-wrap", "wrap"),
156+
("flex-direction", "row"),
157+
("align-items", "center")
194158
]
159+
]
160+
. ( span_
161+
[style_ [("width", "100%")]]
162+
[text x]
163+
:
195164
)
196-
<> ( opts ^. #optsExtraAttributes
197-
)
198-
]
165+
)
166+
(optsLabel opts)
167+
( leadingWidgets
168+
<> [ input_
169+
$ ( catMaybes
170+
[ Just
171+
$ style_
172+
[ ("width", "0"),
173+
("flex-grow", "1")
174+
],
175+
Just . type_ $ htmlFieldType typ,
176+
fmap required_
177+
$ st
178+
^? cloneTraversal optic
179+
. #fieldRequired,
180+
fmap
181+
(textProp "defaultValue")
182+
( st
183+
^? cloneTraversal
184+
optic
185+
. #fieldInput
186+
. #uniqueValue
187+
),
188+
Just
189+
$ onInput onInputAction,
190+
Just
191+
. disabled_
192+
$ opts
193+
^. #optsDisabled,
194+
fmap placeholder_
195+
$ if null placeholder
196+
then optsLabel opts
197+
else Just placeholder,
198+
Just
199+
. id_
200+
. either impureThrow id
201+
. decodeUtf8Strict
202+
. unTagged
203+
$ htmlUid uid,
204+
Just
205+
. onKeyDown
206+
$ action
207+
. optsOnKeyDownAction opts uid,
208+
Just
209+
$ onBlur onBlurAction
210+
]
211+
)
212+
<> ( opts ^. #optsExtraAttributes
213+
)
214+
]
215+
<> trailingWidgets
199216
<> ( if typ /= FieldTypeImage
200217
then mempty
201218
else do
@@ -206,12 +223,11 @@ field full@Full {fullArgs = args, fullParser = parser, fullViewer = viewer} opts
206223
. #fieldInput
207224
. #uniqueValue
208225
[ input_
209-
$ catMaybes
210-
[ Just $ type_ "file",
211-
Just $ accept_ "image/*",
212-
Just $ onInput onInputFileAction,
213-
Just
214-
. id_
226+
$ [ type_ "file",
227+
accept_ "image/*",
228+
onInput onInputFileAction,
229+
style_ [("width", "100%")],
230+
id_
215231
. either impureThrow ("file-" <>)
216232
. decodeUtf8Strict
217233
. unTagged
@@ -231,27 +247,6 @@ field full@Full {fullArgs = args, fullParser = parser, fullViewer = viewer} opts
231247
]
232248
)
233249
)
234-
--
235-
-- TODO : with new semantic layout separate leading/trailing
236-
-- widgets do not make a lot of sense, should be a single option
237-
-- which is just a list widgets.
238-
--
239-
<> catMaybes
240-
[ fmap
241-
(fieldIcon full opts)
242-
( opts
243-
^? #optsLeadingWidget
244-
. _Just
245-
. cloneTraversal widgetOptic
246-
),
247-
fmap
248-
(fieldIcon full opts)
249-
( opts
250-
^? #optsTrailingWidget
251-
. _Just
252-
. cloneTraversal widgetOptic
253-
)
254-
]
255250
)
256251
where
257252
st = argsModel args
@@ -285,6 +280,24 @@ field full@Full {fullArgs = args, fullParser = parser, fullViewer = viewer} opts
285280
if isJust next || (inp == viewer out)
286281
then Nothing
287282
else Just out
283+
leadingWidgets =
284+
maybeToList
285+
$ fmap
286+
(fieldIcon full opts)
287+
( opts
288+
^? #optsLeadingWidget
289+
. _Just
290+
. cloneTraversal widgetOptic
291+
)
292+
trailingWidgets =
293+
maybeToList
294+
$ fmap
295+
(fieldIcon full opts)
296+
( opts
297+
^? #optsTrailingWidget
298+
. _Just
299+
. cloneTraversal widgetOptic
300+
)
288301
onBlurAction =
289302
action . PureUpdate $ \prev ->
290303
prev
@@ -828,7 +841,7 @@ truncateUnicode limit input =
828841
then input
829842
else
830843
take half input
831-
<> "..."
844+
<> " ... "
832845
<> MS.takeEnd half input
833846
where
834847
full = fromMaybe defTruncateLimit limit

‎ghcjs/miso-functora/src/Functora/Miso/Widgets/Flex.hs‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module Functora.Miso.Widgets.Flex
22
( flexRow,
3+
flexRowCenter,
34
flexCol,
45
flexLeftRight,
56
)
@@ -19,11 +20,21 @@ flexRow newTag newAttr =
1920
[ ("display", "flex"),
2021
("flex-wrap", "wrap"),
2122
("flex-direction", "row"),
22-
("align-items", "center"),
23-
("justify-content", "center")
23+
("align-items", "center")
2424
]
2525
]
2626

27+
flexRowCenter ::
28+
([Attribute action] -> [View action] -> View action) ->
29+
([Attribute action] -> [Attribute action]) ->
30+
[View action] ->
31+
View action
32+
flexRowCenter newTag newAttr =
33+
flexRow newTag
34+
$ ( style_ [("justify-content", "center")] :
35+
)
36+
. newAttr
37+
2738
flexCol ::
2839
([Attribute action] -> [View action] -> View action) ->
2940
([Attribute action] -> [Attribute action]) ->

0 commit comments

Comments
 (0)