Skip to content

Commit 4e202ef

Browse files
shakaoshakao
authored
Mobile image editor toggle icons, hide temp asset warning (microsoft#7979)
1 parent 6d09951 commit 4e202ef

2 files changed

Lines changed: 65 additions & 9 deletions

File tree

‎theme/image-editor/imageEditor.less‎

Lines changed: 55 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,10 @@
156156
flex-shrink: 1;
157157
}
158158

159+
.gallery-editor-toggle-label > span {
160+
display: none;
161+
}
162+
159163
.gallery-filter-button {
160164
.gallery-filter-button-label {
161165
display: none !important;
@@ -194,18 +198,18 @@
194198
background-color: #4572cf;
195199
border: 2px solid #4067b3;
196200
border-radius: 5px;
197-
width: 19.5rem;
201+
width: 24rem;
198202
margin-top: 0.25rem;
199203

200204
margin-left: auto;
201205
margin-right: auto;
202206
cursor: pointer;
203207
}
204208

205-
206209
.gallery-editor-toggle.right {
207210
.gallery-editor-toggle-handle {
208-
transform: translateX(13rem);
211+
/* Subtract small margin for rightmost element */
212+
transform: translateX(calc(16rem - 0.2rem));
209213
}
210214
.gallery-editor-toggle-right {
211215
color: #4B7BEC;
@@ -214,7 +218,7 @@
214218

215219
.gallery-editor-toggle.center {
216220
.gallery-editor-toggle-handle {
217-
transform: translateX(6.5rem);
221+
transform: translateX(8rem);
218222
}
219223
.gallery-editor-toggle-center {
220224
color: #4B7BEC;
@@ -228,7 +232,7 @@
228232
}
229233

230234
.gallery-editor-toggle.no-gallery {
231-
width: 13rem;
235+
width: 16rem;
232236

233237
.gallery-editor-toggle-handle {
234238
width: 50%;
@@ -240,7 +244,7 @@
240244

241245
.gallery-editor-toggle.no-gallery.right {
242246
.gallery-editor-toggle-handle {
243-
transform: translateX(6.5rem);
247+
transform: translateX(8rem);
244248
}
245249
}
246250

@@ -258,12 +262,21 @@
258262
}
259263

260264
.gallery-editor-toggle-label {
265+
display: flex;
266+
align-items: center;
267+
justify-content: center;
261268
flex-basis: 33%;
262269
text-align: center;
263270
color: #ffffff;
264271
z-index: 1;
265272
transition: color 0.3s;
266273
user-select: none;
274+
275+
& > i {
276+
display: flex;
277+
align-items: center;
278+
justify-content: center;
279+
}
267280
}
268281

269282
.gallery-editor-toggle-handle {
@@ -412,6 +425,10 @@
412425
.asset-editor-card {
413426
margin: 0.2rem 0 0 0.2rem;
414427
}
428+
429+
.asset-editor-card-icon {
430+
display: none;
431+
}
415432
}
416433

417434
.image-editor-gallery.visible {
@@ -453,3 +470,35 @@
453470
:root {
454471
--editor-height: 31rem;
455472
}
473+
474+
475+
// Mobile Only
476+
@media only screen and (max-width: @largestMobileScreen) {
477+
.gallery-editor-toggle {
478+
width: 10rem;
479+
margin-left: .25rem!important;
480+
flex-shrink: 1;
481+
}
482+
483+
.gallery-editor-toggle.no-gallery {
484+
width: 6.5rem;
485+
}
486+
487+
.gallery-editor-toggle.right {
488+
.gallery-editor-toggle-handle {
489+
transform: translateX(6.5rem);
490+
}
491+
}
492+
493+
.gallery-editor-toggle.center {
494+
.gallery-editor-toggle-handle {
495+
transform: translateX(3.25rem);
496+
}
497+
}
498+
499+
.gallery-editor-toggle.no-gallery.right {
500+
.gallery-editor-toggle-handle {
501+
transform: translateX(3.25rem);
502+
}
503+
}
504+
}

‎webapp/src/components/ImageFieldEditor.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,17 @@ export class ImageFieldEditor<U extends pxt.Asset> extends React.Component<Image
8989
const toggleOptions = [{
9090
label: lf("Editor"),
9191
view: "editor",
92+
icon: "paint brush",
9293
onClick: this.showEditor
9394
}, {
9495
label: lf("Gallery"),
9596
view: "gallery",
97+
icon: "picture",
9698
onClick: this.showGallery
9799
}, {
98100
label: lf("My Assets"),
99101
view: "my-assets",
102+
icon: "folder",
100103
onClick: this.showMyAssets
101104
}];
102105

@@ -556,6 +559,7 @@ class ImageEditorGallery extends React.Component<ImageEditorGalleryProps, {}> {
556559
interface ImageEditorToggleOption {
557560
label: string;
558561
view: string;
562+
icon?: string;
559563
onClick: () => void;
560564
}
561565

@@ -586,13 +590,16 @@ class ImageEditorToggle extends React.Component<ImageEditorToggleProps> {
586590

587591
return <div className={`gallery-editor-toggle ${toggleClass} ${pxt.BrowserUtils.isEdge() ? "edge" : ""}`}>
588592
<div className="gallery-editor-toggle-label gallery-editor-toggle-left" onClick={left.onClick} role="button">
589-
{left.label}
593+
{left.icon && <i className={`ui icon ${left.icon}`} />}
594+
<span>{left.label}</span>
590595
</div>
591596
{center && <div className="gallery-editor-toggle-label gallery-editor-toggle-center" onClick={center.onClick} role="button">
592-
{center.label}
597+
{center.icon && <i className={`ui icon ${center.icon}`} />}
598+
<span>{center.label}</span>
593599
</div>}
594600
<div className="gallery-editor-toggle-label gallery-editor-toggle-right" onClick={right.onClick} role="button">
595-
{right.label}
601+
{right.icon && <i className={`ui icon ${right.icon}`} />}
602+
<span>{right.label}</span>
596603
</div>
597604
<div className="gallery-editor-toggle-handle"/>
598605
</div>

0 commit comments

Comments
 (0)