Skip to content

Commit 8164cc6

Browse files
author
Juntao Qiu
committed
fixed a few ui issues
1 parent a0b37c7 commit 8164cc6

File tree

4 files changed

+58
-35
lines changed

4 files changed

+58
-35
lines changed

src/components/ContentWrap.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1003,14 +1003,14 @@ export default class ContentWrap extends Component {
10031003
<div className='promotion'>
10041004
<div className="downloads">
10051005
<Button
1006-
className="button icon-button hint--rounded hint--bottom-left"
1006+
className="btn--dark button icon-button hint--rounded hint--bottom-left"
10071007
aria-label="Export as PNG"
10081008
onClick={this.exportPngClickHandler.bind(this)}>
10091009
<span class="material-symbols-outlined">file_download</span>
10101010
<span>PNG</span>
10111011
</Button>
10121012
<Button
1013-
className="button icon-button hint--rounded hint--bottom-left"
1013+
className="btn--dark button icon-button hint--rounded hint--bottom-left"
10141014
aria-label="Export as JPEG"
10151015
onClick={this.exportJpegClickHandler.bind(this)}>
10161016
<span class="material-symbols-outlined">file_download</span>

src/components/CreateNewModal.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function CreateNewModal({
1818
</div>
1919
<hr />
2020
Or choose from a template:
21-
<div class="saved-items-pane__container">
21+
<div class="create-new-pane__container">
2222
{templates.map(template => (
2323
<ItemTile
2424
inline

src/components/SavedItemPane.jsx

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,39 @@ export default class SavedItemPane extends Component {
130130

131131
filteredItems() {
132132
// !null === true, !'' === true, !' ' === false
133-
return this.items.filter(item => !this.state.searchText || item.title.toLowerCase().indexOf(this.state.searchText) !== -1);
133+
return [
134+
{
135+
"title": "Basic",
136+
"mainSizes": [30, 70],
137+
"htmlMode": "html",
138+
"cssMode": "css",
139+
"jsMode": "js",
140+
"layoutMode": 1,
141+
"js": "// This is a sample\nA.method() {\n if(condition) {\n B.method()\n }\n}",
142+
"html": ""
143+
},
144+
{
145+
"title": "Basic",
146+
"mainSizes": [30, 70],
147+
"htmlMode": "html",
148+
"cssMode": "css",
149+
"jsMode": "js",
150+
"layoutMode": 1,
151+
"js": "// This is a sample\nA.method() {\n if(condition) {\n B.method()\n }\n}",
152+
"html": ""
153+
},
154+
{
155+
"title": "Basic",
156+
"mainSizes": [30, 70],
157+
"htmlMode": "html",
158+
"cssMode": "css",
159+
"jsMode": "js",
160+
"layoutMode": 1,
161+
"js": "// This is a sample\nA.method() {\n if(condition) {\n B.method()\n }\n}",
162+
"html": ""
163+
},
164+
]
165+
// return this.items.filter(item => !this.state.searchText || item.title.toLowerCase().indexOf(this.state.searchText) !== -1);
134166
}
135167

136168
render() {
@@ -142,28 +174,29 @@ export default class SavedItemPane extends Component {
142174
>
143175
<button
144176
onClick={this.onCloseIntent.bind(this)}
145-
class="btn saved-items-pane__close-btn"
177+
class="btn icon-button modal__close-btn"
146178
id="js-saved-items-pane-close-btn"
147179
>
148180
<span class="material-symbols-outlined">close</span>
149181
</button>
150-
<div class="flex flex-v-center" style="justify-content: space-between;">
182+
<div class="flex flex-v-center header-container">
151183
<h3>My Library ({this.items.length})</h3>
152-
153-
<div>
184+
<div className="my-library-buttons">
154185
<button
155186
onClick={this.props.exportBtnClickHandler}
156-
class="btn--dark hint--bottom-left hint--rounded hint--medium"
187+
class="btn--dark hint--bottom-left hint--rounded hint--medium icon-button"
157188
aria-label="Export all your creations into a single importable file."
158189
>
159-
Export
190+
<span class="material-symbols-outlined">file_download</span>
191+
<span>Export</span>
160192
</button>
161193
<button
162194
onClick={this.importBtnClickHandler.bind(this)}
163-
class="btn--dark hint--bottom-left hint--rounded hint--medium"
195+
class="btn--dark hint--bottom-left hint--rounded hint--medium icon-button"
164196
aria-label="Import your creations. Only the file that you export through the 'Export' button can be imported."
165197
>
166-
Import
198+
<span class="material-symbols-outlined">file_upload</span>
199+
<span>Import</span>
167200
</button>
168201
</div>
169202
</div>

src/style.css

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -998,6 +998,12 @@ body > #demo-frame {
998998
color: navajowhite;
999999
}
10001000

1001+
.my-library-buttons {
1002+
display: flex;
1003+
gap: 0.2rem;
1004+
align-items: center;
1005+
}
1006+
10011007
.saved-items-pane.is-open {
10021008
transition-duration: 0.4s;
10031009
transform: translateX(0);
@@ -1010,28 +1016,9 @@ body > #demo-frame {
10101016
visibility: visible;
10111017
}
10121018

1013-
.saved-items-pane__close-btn {
1014-
position: absolute;
1015-
left: -18px;
1016-
top: 24px;
1017-
opacity: 0;
1018-
visibility: hidden;
1019-
border-radius: 50%;
1020-
padding: 10px 14px;
1021-
background: crimson;
1022-
color: white;
1023-
border: 0;
1024-
transform: scale(0);
1025-
will-change: transform, opacity;
1026-
transition: 0.3s ease;
1027-
transition-delay: 0;
1028-
}
1029-
1030-
.saved-items-pane.is-open .saved-items-pane__close-btn {
1031-
opacity: 1;
1032-
transition-delay: 0.4s;
1033-
transform: scale(1);
1034-
visibility: visible;
1019+
.header-container {
1020+
justify-content: space-between;
1021+
margin-block: 1.5rem;
10351022
}
10361023

10371024
.saved-item-tile {
@@ -1173,10 +1160,13 @@ body > #demo-frame {
11731160
opacity: 0.3;
11741161
}
11751162

1176-
.saved-items-pane__container {
1163+
.create-new-pane__container {
11771164
display: flex;
11781165
align-items: center;
11791166
justify-content: center;
1167+
}
1168+
1169+
.saved-items-pane__container {
11801170
overflow-y: auto;
11811171
overflow-x: hidden;
11821172
max-height: calc(100vh - 90px);

0 commit comments

Comments
 (0)