Skip to content

Commit 19a2bf7

Browse files
ayleeandersenAylee AndersenLacah
authored
Development/link labels (#22)
* Fixed styling on menu labels * Toggle link label depending on editMode * Improved styles and layout for edit mode --------- Co-authored-by: Aylee Andersen <aylee@Aylees-MacBook-Pro.local> Co-authored-by: Laszlo <47461634+Lacah@users.noreply.github.com>
1 parent 59303bf commit 19a2bf7

File tree

2 files changed

+162
-175
lines changed

2 files changed

+162
-175
lines changed

‎src/x-759224-menu-builder-uic/components/menu-item.js‎

Lines changed: 125 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,11 @@ const view = (
5757
},
5858
};
5959

60+
const linkOptions = [
61+
{ id: "external", label: "External Link" },
62+
{ id: "route", label: "Internal Link" },
63+
];
64+
6065
// adding rightIcon property to JSON
6166
if(iconValue){
6267
actionJSON.value.rightIcon = iconValue
@@ -75,131 +80,137 @@ const view = (
7580

7681
return (
7782
<li className="menu-item">
78-
<div className="leftMenu">
79-
<now-button-iconic
80-
icon={editMode ? "gear-fill" : "gear-outline"}
81-
bare={true}
82-
append-to-meta={{ action: "edit" }}
83-
></now-button-iconic>
84-
<span data-choice={choice}>{choice}</span>
85-
</div>
86-
<div className="midMenu">
87-
<now-input
88-
size="md"
89-
helper-content=""
90-
label="Label"
91-
messages={[]}
92-
placeholder=""
93-
step="any"
94-
type="text"
95-
value={labelValue}
96-
name="labelInput"
97-
readonly={!editMode}
98-
></now-input>
99-
{
100-
iconValue && <now-button
101-
variant="primary"
102-
size="md"
103-
icon={iconValue}
104-
></now-button>
105-
}
106-
<now-dropdown
107-
// mapping iconlist for required data in now-dropdown
108-
// adding no-icon as a no selection
109-
items={[{ id: null, label: "no-icon" }, ...iconlist.map(e => ({ id: e, label: e }))]}
110-
selectedItems={[iconValue]}
111-
name="iconInput"
112-
select="single"
113-
placeholder=""
114-
icon=""
115-
variant="secondary"
116-
size="md"
117-
bare={true}
118-
tooltip-content="Select right icon"
119-
panel-fit-props={{}}
120-
show-padding={true}
121-
config-aria={{}}
122-
disabled={!editMode}
123-
search="true"
124-
></now-dropdown>
125-
<now-dropdown
126-
items={[
127-
{ id: "external", label: "External Link" },
128-
{ id: "route", label: "Internal Link" },
129-
]}
130-
selectedItems={[typeValue]}
131-
name="typeInput"
132-
select="single"
133-
placeholder=""
134-
icon=""
135-
variant="secondary"
136-
size="md"
137-
bare={true}
138-
tooltip-content="Select internal or external link"
139-
panel-fit-props={{}}
140-
show-padding={true}
141-
config-aria={{}}
142-
disabled={!editMode}
143-
search="none"
144-
></now-dropdown>
83+
<div className="menu-row">
84+
<div className="leftMenu">
85+
<now-button-iconic
86+
icon={editMode ? "gear-fill" : "gear-outline"}
87+
bare={true}
88+
append-to-meta={{ action: "edit" }}
89+
></now-button-iconic>
90+
<span data-choice={choice}>{choice}</span>
91+
</div>
92+
<div className="midMenu">
93+
<now-input
94+
size="md"
95+
helper-content=""
96+
label="Label"
97+
messages={[]}
98+
placeholder=""
99+
step="any"
100+
type="text"
101+
value={labelValue}
102+
name="labelInput"
103+
readonly={!editMode}
104+
></now-input>
105+
{
106+
iconValue && <now-button
107+
variant="primary"
108+
size="md"
109+
icon={iconValue}
110+
></now-button>
111+
}
112+
<now-dropdown
113+
// mapping iconlist for required data in now-dropdown
114+
// adding no-icon as a no selection
115+
items={[{ id: null, label: "no-icon" }, ...iconlist.map(e => ({ id: e, label: e }))]}
116+
selectedItems={[iconValue]}
117+
name="iconInput"
118+
select="single"
119+
placeholder=""
120+
icon=""
121+
variant="secondary"
122+
size="md"
123+
bare={true}
124+
tooltip-content="Select right icon"
125+
panel-fit-props={{}}
126+
show-padding={true}
127+
config-aria={{}}
128+
disabled={!editMode}
129+
search="true"
130+
></now-dropdown>
131+
{
132+
!editMode &&
133+
<p className="link-label">
134+
{typeValue ? linkOptions.find(opt => opt.id === typeValue).label : ""}
135+
</p>
136+
}
137+
</div>
138+
<div className="rightMenu">
139+
<menu-editor parent={id} expandParent={expandParent}></menu-editor>
140+
</div>
145141
</div>
146-
<div className="rightMenu">
147-
<menu-editor parent={id} expandParent={expandParent}></menu-editor>
148-
<now-collapse expanded={editMode}>
149-
<div>
150-
{typeValue == "route" ? (
151-
<Fragment>
152-
<now-input
153-
size="md"
154-
helper-content=""
155-
label="Page"
156-
messages={[]}
157-
placeholder=""
158-
step="any"
159-
type="text"
160-
value={pageValue}
161-
name="pageInput"
162-
readonly={!editMode}
163-
></now-input>
164-
<now-input
165-
size="md"
166-
helper-content=""
167-
label="sys_id"
168-
messages={[]}
169-
placeholder=""
170-
step="any"
171-
type="text"
172-
value={sysIdValue}
173-
name="sysIdInput"
174-
readonly={!editMode}
175-
></now-input>
176-
</Fragment>
177-
) : null}
178-
{typeValue == "external" ? (
142+
<now-collapse expanded={editMode}>
143+
<div className="menu-row">
144+
<now-button-iconic
145+
icon="trash-fill"
146+
bare={true}
147+
className="trashFilled shiftDown"
148+
size="md"
149+
variant="inherit"
150+
append-to-meta={{ action: "delete", id }}
151+
></now-button-iconic>
152+
<now-dropdown
153+
items={linkOptions}
154+
selectedItems={[typeValue]}
155+
name="typeInput"
156+
className="shiftDown"
157+
select="single"
158+
placeholder="Select Link Type"
159+
icon=""
160+
variant="secondary"
161+
size="md"
162+
bare={true}
163+
tooltip-content="Select internal or external link"
164+
panel-fit-props={{}}
165+
show-padding={true}
166+
config-aria={{}}
167+
disabled={!editMode}
168+
search="none"
169+
></now-dropdown>
170+
{typeValue == "route" ? (
171+
<Fragment>
172+
<now-input
173+
size="md"
174+
helper-content=""
175+
label="Page"
176+
messages={[]}
177+
placeholder=""
178+
step="any"
179+
type="text"
180+
value={pageValue}
181+
name="pageInput"
182+
readonly={!editMode}
183+
></now-input>
179184
<now-input
180185
size="md"
181186
helper-content=""
182-
label="HREF"
187+
label="sys_id"
183188
messages={[]}
184189
placeholder=""
185190
step="any"
186191
type="text"
187-
value={hrefValue}
188-
name="hrefInput"
192+
value={sysIdValue}
193+
name="sysIdInput"
189194
readonly={!editMode}
190195
></now-input>
191-
) : null}
192-
<now-button-iconic
193-
icon="trash-fill"
194-
bare={true}
195-
className="trashFilled"
196+
</Fragment>
197+
) : null}
198+
{typeValue == "external" ? (
199+
<now-input
196200
size="md"
197-
variant="inherit"
198-
append-to-meta={{ action: "delete", id }}
199-
></now-button-iconic>
200-
</div>
201-
</now-collapse>
202-
</div>
201+
helper-content=""
202+
label="HREF"
203+
messages={[]}
204+
placeholder=""
205+
step="any"
206+
type="text"
207+
value={hrefValue}
208+
name="hrefInput"
209+
readonly={!editMode}
210+
></now-input>
211+
) : null}
212+
</div>
213+
</now-collapse>
203214
</li>
204215
);
205216
};

‎src/x-759224-menu-builder-uic/styles/menu-item.scss‎

Lines changed: 37 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,48 @@
1+
$textGray: #7d7d7d;
2+
13
.menu-item {
2-
align-items: center;
3-
display: flex;
4-
gap: 1rem;
54

6-
.leftMenu {
7-
display: flex;
8-
gap: 10px;
5+
.menu-row {
96
align-items: center;
10-
}
11-
12-
.midMenu {
137
display: flex;
14-
width: 100%;
15-
max-width: 300px;
16-
align-items: center;
17-
gap: 10px;
18-
19-
now-input {
8+
gap: 1rem;
9+
10+
.leftMenu {
11+
display: flex;
12+
gap: 10px;
13+
align-items: center;
14+
}
15+
16+
.midMenu {
17+
display: flex;
2018
width: 100%;
19+
align-items: center;
20+
gap: 10px;
21+
22+
now-input {
23+
width: 100%;
24+
max-width: 250px;
25+
}
26+
27+
.link-label {
28+
color: $textGray;
29+
margin: 0;
30+
width: 100%;
31+
font-size: 1rem;
32+
}
2133
}
22-
23-
now-dropdown {
24-
max-width: 105px;
34+
35+
.rightMenu {
36+
display: flex;
37+
margin-left: auto;
38+
margin-right: 30px;
39+
max-width: 100px;
40+
flex-direction: row-reverse;
41+
align-items: center;
2542
}
26-
}
27-
28-
.rightMenu {
29-
display: flex;
30-
margin-left: auto;
31-
flex-direction: row-reverse;
32-
margin-right: 30px;
33-
align-items: center;
34-
35-
now-collapse {
36-
div {
37-
gap: 10px;
38-
display: flex;
39-
align-items: center;
4043

41-
now-button-iconic {
42-
color: red !important;
43-
44-
button {
45-
color: red !important;
46-
47-
now-icon {
48-
color: red !important;
49-
svg {
50-
color: red !important;
51-
}
52-
}
53-
}
54-
}
55-
}
44+
.shiftDown {
45+
padding-top: 10px;
5646
}
5747
}
5848
}
@@ -74,18 +64,4 @@ span {
7464
&[data-choice="action"] {
7565
background-color: #28a745;
7666
}
77-
}
78-
79-
.now-dropdown {
80-
&.is-disabled {
81-
opacity: 1;
82-
83-
.now-button-icon {
84-
color: #7d7d7d;
85-
}
86-
87-
.now-dropdown-label {
88-
color: #7d7d7d;
89-
}
90-
}
9167
}

0 commit comments

Comments
 (0)