Skip to content
This repository was archived by the owner on Jul 19, 2022. It is now read-only.

Commit 8f08e8a

Browse files
hojberghojberg
committed
Improve button configuration
1 parent b633381 commit 8f08e8a

File tree

3 files changed

+209
-52
lines changed

3 files changed

+209
-52
lines changed

‎src/UI/Button.elm

Lines changed: 135 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,160 @@
1-
module UI.Button exposing (ButtonType(..), callToAction, primary, secondary, view)
2-
3-
import Html exposing (Html, button, text)
1+
module UI.Button exposing
2+
( Button
3+
, Size(..)
4+
, Type(..)
5+
, button
6+
, danger
7+
, default
8+
, large
9+
, medium
10+
, primary
11+
, primaryMono
12+
, share
13+
, small
14+
, view
15+
, withSize
16+
, withType
17+
)
18+
19+
import Html exposing (Html, text)
420
import Html.Attributes exposing (class)
521
import Html.Events exposing (onClick)
622

723

8-
type ButtonType
9-
= CallToAction
24+
type alias Button clickMsg =
25+
{ clickMsg : clickMsg
26+
, label : String
27+
, type_ : Type
28+
, size : Size
29+
}
30+
31+
32+
33+
-- BASE
34+
35+
36+
button : clickMsg -> String -> Button clickMsg
37+
button clickMsg label =
38+
{ clickMsg = clickMsg
39+
, label = label
40+
, type_ = Default
41+
, size = Medium
42+
}
43+
44+
45+
view : Button clickMsg -> Html clickMsg
46+
view { label, type_, clickMsg, size } =
47+
Html.button
48+
[ class (typeToClassName type_)
49+
, class (sizeToClassName size)
50+
, onClick clickMsg
51+
]
52+
[ text label ]
53+
54+
55+
56+
-- VARIANTS
57+
58+
59+
type Type
60+
= Default
61+
| PrimaryMono
1062
| Primary
11-
| Secondary
63+
| Share
64+
| Danger
65+
1266

67+
default : Button clickMsg -> Button clickMsg
68+
default =
69+
withType Default
1370

14-
callToAction : msg -> String -> Html msg
15-
callToAction =
16-
view CallToAction
1771

72+
primaryMono : Button clickMsg -> Button clickMsg
73+
primaryMono =
74+
withType PrimaryMono
1875

19-
primary : msg -> String -> Html msg
76+
77+
primary : Button clickMsg -> Button clickMsg
2078
primary =
21-
view Primary
79+
withType Primary
2280

2381

24-
secondary : msg -> String -> Html msg
25-
secondary =
26-
view Secondary
82+
share : Button clickMsg -> Button clickMsg
83+
share =
84+
withType Share
2785

2886

29-
view : ButtonType -> msg -> String -> Html msg
30-
view type_ clickMsg label =
31-
button [ class (buttonTypeToClassName type_), onClick clickMsg ]
32-
[ text label
33-
]
87+
danger : Button clickMsg -> Button clickMsg
88+
danger =
89+
withType Danger
90+
91+
92+
withType : Type -> Button clickMsg -> Button clickMsg
93+
withType type_ button_ =
94+
{ button_ | type_ = type_ }
95+
96+
97+
98+
-- SIZES
99+
100+
101+
type Size
102+
= Small
103+
| Medium
104+
| Large
105+
106+
107+
small : Button clickMsg -> Button clickMsg
108+
small =
109+
withSize Small
110+
111+
112+
medium : Button clickMsg -> Button clickMsg
113+
medium =
114+
withSize Medium
115+
116+
117+
large : Button clickMsg -> Button clickMsg
118+
large =
119+
withSize Large
120+
121+
122+
withSize : Size -> Button clickMsg -> Button clickMsg
123+
withSize size button_ =
124+
{ button_ | size = size }
34125

35126

36127

37128
-- INTERNAL
38129

39130

40-
buttonTypeToClassName : ButtonType -> String
41-
buttonTypeToClassName type_ =
131+
sizeToClassName : Size -> String
132+
sizeToClassName size =
133+
case size of
134+
Small ->
135+
"small"
136+
137+
Medium ->
138+
"medium"
139+
140+
Large ->
141+
"secondary"
142+
143+
144+
typeToClassName : Type -> String
145+
typeToClassName type_ =
42146
case type_ of
43-
CallToAction ->
44-
"call-to-action"
147+
Default ->
148+
"default"
149+
150+
PrimaryMono ->
151+
"primary-mono"
45152

46153
Primary ->
47154
"primary"
48155

49-
Secondary ->
50-
"secondary"
156+
Share ->
157+
"share"
158+
159+
Danger ->
160+
"danger"

‎src/Workspace.elm

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -383,8 +383,8 @@ view model =
383383
article [ id "workspace" ]
384384
[ header
385385
[ id "workspace-toolbar" ]
386-
[ Button.secondary Find "Find"
387-
, section [ class "right" ] [ Button.callToAction Publish "Publish on Unison Share" ]
386+
[ Button.button Find "Find" |> Button.view
387+
, section [ class "right" ] [ Button.button Publish "Publish on Unison Share" |> Button.share |> Button.view ]
388388
]
389389
, section
390390
[ id "workspace-content" ]

‎src/css/main.css

Lines changed: 72 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -181,20 +181,31 @@ table {
181181
--color-icon-patch: var(--color-blue-2);
182182

183183
/* Buttons */
184-
--color-button-call-to-action-fg: var(--color-purple-1);
185-
--color-button-call-to-action-bg: var(--color-purple-4);
186-
--color-button-call-to-action-hover-fg: var(--color-gray-lighten-100);
187-
--color-button-call-to-action-hover-bg: var(--color-purple-1);
184+
185+
--color-button-default-fg: var(--color-main-fg);
186+
--color-button-default-bg: var(--color-gray-lighten-50);
187+
--color-button-default-hover-fg: var(--color-main-fg);
188+
--color-button-default-hover-bg: var(--color-gray-lighten-40);
189+
190+
--color-button-primary-mono-fg: var(--color-gray-lighten-60);
191+
--color-button-primary-mono-bg: var(--color-gray-darken-20);
192+
--color-button-primary-mono-hover-fg: var(--color-gray-lighten-60);
193+
--color-button-primary-mono-hover-bg: var(--color-gray-darken-5);
188194

189195
--color-button-primary-fg: var(--color-gray-lighten-60);
190-
--color-button-primary-bg: var(--color-gray-darken-20);
196+
--color-button-primary-bg: var(--color-gray-blue-2);
191197
--color-button-primary-hover-fg: var(--color-gray-lighten-60);
192-
--color-button-primary-hover-bg: var(--color-brand-bright-red);
198+
--color-button-primary-hover-bg: var(--color-blue-2);
193199

194-
--color-button-secondary-fg: var(--color-main-fg);
195-
--color-button-secondary-bg: var(--color-gray-lighten-50);
196-
--color-button-secondary-hover-fg: var(--color-main-fg);
197-
--color-button-secondary-hover-bg: var(--color-gray-lighten-40);
200+
--color-button-share-fg: var(--color-purple-1);
201+
--color-button-share-bg: var(--color-purple-4);
202+
--color-button-share-hover-fg: var(--color-gray-lighten-60);
203+
--color-button-share-hover-bg: var(--color-purple-3);
204+
205+
--color-button-danger-fg: var(--color-gray-lighten-100);
206+
--color-button-danger-bg: var(--color-pink-1);
207+
--color-button-danger-hover-fg: var(--color-gray-lighten-100);
208+
--color-button-danger-hover-bg: var(--color-pink-2);
198209

199210
/* Tooltips */
200211
--color-tooltip-fg: var(--color-gray-lighten-60);
@@ -627,8 +638,6 @@ button {
627638
border-radius: var(--border-radius-base);
628639
font-weight: bold;
629640
font-size: 1rem;
630-
height: 2rem;
631-
padding: 0 0.75rem;
632641
cursor: pointer;
633642
transition: all 0.1s ease-in;
634643
}
@@ -642,14 +651,42 @@ button:active {
642651
transform: translate(0, 0.1rem);
643652
}
644653

645-
button.call-to-action {
646-
color: var(--color-button-call-to-action-fg);
647-
background: var(--color-button-call-to-action-bg);
654+
button.small {
655+
height: 1.5rem;
656+
padding: 0 0.5rem;
657+
font-size: var(--font-size-small);
658+
}
659+
660+
button.medium {
661+
height: 2rem;
662+
padding: 0 0.75rem;
663+
font-size: var(--font-size-medium);
664+
}
665+
666+
button.large {
667+
height: 2.5rem;
668+
padding: 0 1rem;
669+
font-size: 1.125rem;
670+
}
671+
672+
button.default {
673+
color: var(--color-button-default-fg);
674+
background: var(--color-button-default-bg);
675+
}
676+
677+
button.default:hover {
678+
color: var(--color-button-default-hover-fg);
679+
background: var(--color-button-default-hover-bg);
680+
}
681+
682+
button.primary-mono {
683+
color: var(--color-button-primary-mono-fg);
684+
background: var(--color-button-mono-primary-bg);
648685
}
649686

650-
button.call-to-action:hover {
651-
color: var(--color-button-call-to-action-hover-fg);
652-
background: var(--color-button-call-to-action-hover-bg);
687+
button.primary-mono:hover {
688+
color: var(--color-button-primary--mono-hover-fg);
689+
background: var(--color-button-primary-mono-hover-bg);
653690
}
654691

655692
button.primary {
@@ -662,14 +699,24 @@ button.primary:hover {
662699
background: var(--color-button-primary-hover-bg);
663700
}
664701

665-
button.secondary {
666-
color: var(--color-button-secondary-fg);
667-
background: var(--color-button-secondary-bg);
702+
button.share {
703+
color: var(--color-button-share-fg);
704+
background: var(--color-button-share-bg);
705+
}
706+
707+
button.share:hover {
708+
color: var(--color-button-share-hover-fg);
709+
background: var(--color-button-share-hover-bg);
668710
}
669711

670-
button.secondary:hover {
671-
color: var(--color-button-secondary-hover-fg);
672-
background: var(--color-button-secondary-hover-bg);
712+
button.danger {
713+
color: var(--color-button-danger-fg);
714+
background: var(--color-button-danger-bg);
715+
}
716+
717+
button.danger:hover {
718+
color: var(--color-button-danger-fg);
719+
background: var(--color-button-danger-bg);
673720
}
674721

675722
/* Icons */
@@ -1092,10 +1139,10 @@ button.secondary:hover {
10921139
border-bottom: 1px solid var(--color-workspace-border);
10931140
display: flex;
10941141
flex-direction: row;
1142+
align-items: center;
10951143
}
10961144

10971145
#workspace-toolbar .right {
1098-
align-self: flex-end;
10991146
margin-left: auto;
11001147
}
11011148

0 commit comments

Comments
 (0)