Skip to content

Commit aaa531d

Browse files
shakaoshakao
authored
CSS for asset editor, fix issues with naming (microsoft#7516)
* CSS for asset editor, fix issues with naming * Use short id instead of full id
1 parent 590e4ef commit aaa531d

6 files changed

Lines changed: 51 additions & 14 deletions

File tree

‎pxtlib/tilemap.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -410,15 +410,17 @@ namespace pxt {
410410
return this.state.tiles.add(newTile);
411411
}
412412

413-
public createNewProjectImage(data: pxt.sprite.BitmapData) {
413+
public createNewProjectImage(data: pxt.sprite.BitmapData, displayName?: string) {
414414
this.onChange();
415415

416416
const newImage: ProjectImage = {
417417
internalID: this.getNewInternalId(),
418418
id: this.generateNewID(AssetType.Image, pxt.sprite.IMAGE_PREFIX, pxt.sprite.IMAGES_NAMESPACE),
419419
type: AssetType.Image,
420420
jresData: pxt.sprite.base64EncodeBitmap(data),
421-
meta: {},
421+
meta: {
422+
displayName
423+
},
422424
bitmap: data
423425
};
424426

‎theme/asset-editor.less‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@
1515
margin: 1rem;
1616
}
1717

18+
.asset-editor-sidebar-name {
19+
overflow: hidden;
20+
text-overflow: ellipsis;
21+
}
22+
1823
.asset-editor-sidebar-preview {
1924
width: ~"calc(@{blocklyRowWidthWide} - 2rem)";
2025
height: ~"calc(@{blocklyRowWidthWide} - 2rem)";
@@ -128,5 +133,20 @@
128133
}
129134

130135
.create-new {
136+
color: @white;
137+
background-color: @green;
131138
margin-left: auto;
139+
font-weight: 700;
140+
}
141+
142+
.delete-asset {
143+
color: @white;
144+
background-color: @red;
145+
font-weight: 700;
146+
}
147+
148+
.asset-editor-create-dialog .actions,
149+
.asset-editor-delete-dialog .actions {
150+
display: flex;
151+
justify-content: space-between;
132152
}

‎webapp/src/components/ImageFieldEditor.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ export class ImageFieldEditor<U extends ImageType> extends React.Component<Image
3838
super(props);
3939

4040
this.state = {
41-
currentView: "editor"
41+
currentView: "editor",
42+
headerVisible: true
4243
};
4344
setTelemetryFunction(tickImageEditorEvent);
4445
}
@@ -124,8 +125,8 @@ export class ImageFieldEditor<U extends ImageType> extends React.Component<Image
124125
});
125126
}
126127

127-
if (options.headerVisible === false) {
128-
this.setState({ headerVisible: false })
128+
if (options.headerVisible != undefined) {
129+
this.setState({ headerVisible: options.headerVisible })
129130
}
130131
}
131132
}

‎webapp/src/components/assetEditor/assetSidebar.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ class AssetSidebarImpl extends React.Component<AssetSidebarProps, AssetSidebarSt
119119
const { asset, isGalleryAsset } = this.props;
120120
const { showDeleteModal } = this.state;
121121
const details = this.getAssetDetails();
122-
const name = asset?.meta?.displayName || lf("No asset selected");
122+
const name = asset ? asset.meta?.displayName || pxt.getShortIDForAsset(asset) || lf("Unnamed") : lf("No asset selected");
123123

124124
const actions: sui.ModalButton[] = [
125125
{ label: lf("Cancel"), onclick: this.hideDeleteModal, icon: 'cancel' },
@@ -141,11 +141,10 @@ class AssetSidebarImpl extends React.Component<AssetSidebarProps, AssetSidebarSt
141141
{!isGalleryAsset && <sui.MenuItem name={lf("Edit")} className="asset-editor-button" icon="edit" onClick={this.editAssetHandler}/>}
142142
<sui.MenuItem name={lf("Duplicate")} className="asset-editor-button" icon="copy" onClick={this.duplicateAssetHandler}/>
143143
<sui.MenuItem name={lf("Copy")} className="asset-editor-button" icon="paste" onClick={this.copyAssetHandler}/>
144-
{!isGalleryAsset && <sui.MenuItem name={lf("Delete")} className="asset-editor-button" icon="trash" onClick={this.showDeleteModal}/>}
144+
{!isGalleryAsset && <sui.MenuItem name={lf("Delete")} className="asset-editor-button delete-asset" icon="trash" onClick={this.showDeleteModal}/>}
145145
</div>}
146146
<textarea className="asset-editor-sidebar-copy" ref={this.copyTextAreaRefHandler} ></textarea>
147-
<sui.Modal isOpen={showDeleteModal} onClose={this.hideDeleteModal} closeIcon={false}
148-
dimmer={true} header={lf("Delete Asset")} buttons={actions}>
147+
<sui.Modal className="asset-editor-delete-dialog" isOpen={showDeleteModal} onClose={this.hideDeleteModal} closeIcon={false} dimmer={true} header={lf("Delete Asset")} buttons={actions}>
149148
<div>{lf("Are you sure you want to delete {0}? Deleted assets cannot be recovered.", name)}</div>
150149
</sui.Modal>
151150
</div>

‎webapp/src/components/assetEditor/assetTopbar.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ class AssetTopbarImpl extends React.Component<AssetTopbarProps, AssetTopbarState
4141
const name = result.meta?.displayName;
4242
switch (type) {
4343
case pxt.AssetType.Image:
44-
project.createNewProjectImage(result.bitmap); break;
44+
project.createNewProjectImage(result.bitmap, name); break;
4545
case pxt.AssetType.Tile:
46-
project.createNewTile(result.bitmap); break;
46+
project.createNewTile(result.bitmap, null, name); break;
4747
case pxt.AssetType.Tilemap:
4848
project.createNewTilemapFromData(result.data, name); break;
4949
}
@@ -55,7 +55,7 @@ class AssetTopbarImpl extends React.Component<AssetTopbarProps, AssetTopbarState
5555

5656
protected getEmptyAsset(type: pxt.AssetType): pxt.Asset {
5757
const project = pxt.react.getTilemapProject();
58-
const asset = { type, id: "", internalID: 0, meta: {} } as pxt.Asset;
58+
const asset = { type, id: "", internalID: 0, meta: { displayName: this.getEmptyAssetDisplayName(type) } } as pxt.Asset;
5959
switch (type) {
6060
case pxt.AssetType.Image:
6161
case pxt.AssetType.Tile:
@@ -66,6 +66,19 @@ class AssetTopbarImpl extends React.Component<AssetTopbarProps, AssetTopbarState
6666
return asset;
6767
}
6868

69+
protected getEmptyAssetDisplayName(type: pxt.AssetType): string {
70+
switch (type) {
71+
case pxt.AssetType.Image:
72+
return lf("image");
73+
case pxt.AssetType.Tile:
74+
return lf("tile");
75+
case pxt.AssetType.Tilemap:
76+
return lf("level");
77+
default:
78+
return lf("asset")
79+
}
80+
}
81+
6982
render() {
7083
const { showCreateModal } = this.state;
7184

@@ -79,7 +92,7 @@ class AssetTopbarImpl extends React.Component<AssetTopbarProps, AssetTopbarState
7992
<AssetGalleryTab title={lf("My Assets")} view={GalleryView.User} />
8093
<AssetGalleryTab title={lf("Gallery")} view={GalleryView.Gallery} />
8194
<div className="asset-editor-button create-new" onClick={this.showCreateModal} role="button">{lf("Create New")}</div>
82-
<sui.Modal isOpen={showCreateModal} onClose={this.hideCreateModal} closeIcon={false} dimmer={true} header={lf("Create New Asset")} buttons={actions}>
95+
<sui.Modal className="asset-editor-create-dialog" isOpen={showCreateModal} onClose={this.hideCreateModal} closeIcon={false} dimmer={true} header={lf("Create New Asset")} buttons={actions}>
8396
<div>{lf("Choose your asset type from the options below.")}</div>
8497
</sui.Modal>
8598
</div>

‎webapp/src/components/assetEditor/store/assetEditorReducer.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,11 @@ const topReducer = (state: AssetEditorState = initialState, action: any): AssetE
2929
view: action.view
3030
};
3131
case actions.UPDATE_USER_ASSETS:
32+
const assets = getUserAssets()
3233
return {
3334
...state,
34-
assets: getUserAssets()
35+
selectedAsset: state.selectedAsset ? assets.find(el => el.id == state.selectedAsset.id) : undefined,
36+
assets
3537
}
3638
default:
3739
return state

0 commit comments

Comments
 (0)