Skip to content

Commit 861260e

Browse files
stairman06stairman06
committed
Design improvements!
1 parent 36c7124 commit 861260e

18 files changed

Lines changed: 699 additions & 561 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "minecraft-manager",
3-
"version": "2.4.2",
3+
"version": "2.4.3",
44
"license": "GPL-3.0",
55
"main": "main.js",
66
"author": "theemeraldtree",

‎src/component/assetcard/assetcard.jsx‎

Lines changed: 144 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Global from '../../util/global';
88
import downloadsIcon from '../navbar/downloads/downloads.png';
99
import Spinner from '../spinner/spinner';
1010
import ToastManager from '../../manager/toastManager';
11+
import FluentHover from '../../util/fluentHover';
1112

1213
const BG = styled.div`
1314
margin-top: 4px;
@@ -23,7 +24,7 @@ const BG = styled.div`
2324
position: relative;
2425
overflow: hidden;
2526
flex-shrink: 0;
26-
transition: transform 150ms;
27+
transition: 150ms;
2728
${props =>
2829
!props.disableHover &&
2930
css`
@@ -167,156 +168,162 @@ const AssetCard = ({
167168
copyToClick,
168169
moveToClick,
169170
compact
170-
}) => (
171-
<>
172-
<ContextMenuTrigger holdToDisplay={-1} id={`assetcard${asset.id}`}>
173-
<BG
174-
disableHover={disableHover}
175-
tabIndex={disableHover ? -1 : 0}
176-
data-cachedid={asset.cachedID}
177-
data-assetid={asset.id}
178-
onClick={onClick}
179-
onKeyDown={e => {
180-
if (e.keyCode === 13 || e.keyCode === 32) {
181-
onClick(e);
182-
}
183-
}}
184-
role="button"
185-
aria-pressed="false"
186-
compact={compact}
187-
>
188-
{asset.iconPath && (
189-
<Image
190-
src={`${asset.iconPath.substring(0, 1) === '/' ? 'file:///' : ''}${asset.iconPath}`}
191-
compact={compact}
192-
/>
193-
)}
194-
<Details>
195-
{!installed && asset.hosts && asset.hosts.curse && (
196-
<ExtraInfo>
197-
<img alt="Downloads" src={downloadsIcon} />
198-
<p>{Global.abbreviateNumber(asset.hosts.curse.downloadCount)}</p>
199-
</ExtraInfo>
171+
}) => {
172+
const ref = React.createRef();
173+
return (
174+
<>
175+
<ContextMenuTrigger holdToDisplay={-1} id={`assetcard${asset.id}`}>
176+
<BG
177+
disableHover={disableHover}
178+
tabIndex={disableHover ? -1 : 0}
179+
data-cachedid={asset.cachedID}
180+
data-assetid={asset.id}
181+
onClick={onClick}
182+
onKeyDown={e => {
183+
if (e.keyCode === 13 || e.keyCode === 32) {
184+
onClick(e);
185+
}
186+
}}
187+
role="button"
188+
aria-pressed="false"
189+
compact={compact}
190+
ref={ref}
191+
onMouseMove={e => !disableHover && FluentHover.mouseMove(e, ref, '#414141', true, true)}
192+
onMouseLeave={() => !disableHover && FluentHover.mouseLeave(ref, '#313131')}
193+
>
194+
{asset.iconPath && (
195+
<Image
196+
src={`${asset.iconPath.substring(0, 1) === '/' ? 'file:///' : ''}${asset.iconPath}`}
197+
compact={compact}
198+
/>
200199
)}
201-
<Title compact={compact}>{asset.name}</Title>
202-
<Version buttonShown={showInstall || showDelete}>
203-
{!showBlurb && asset.version && Global.cleanVersionName(asset.version.displayName, asset)}
204-
{showBlurb && asset.blurb}
205-
</Version>
206-
</Details>
207-
<Buttons>
200+
<Details>
201+
{!installed && asset.hosts && asset.hosts.curse && (
202+
<ExtraInfo>
203+
<img alt="Downloads" src={downloadsIcon} />
204+
<p>{Global.abbreviateNumber(asset.hosts.curse.downloadCount)}</p>
205+
</ExtraInfo>
206+
)}
207+
<Title compact={compact}>{asset.name}</Title>
208+
<Version buttonShown={showInstall || showDelete}>
209+
{!showBlurb && asset.version && Global.cleanVersionName(asset.version.displayName, asset)}
210+
{showBlurb && asset.blurb}
211+
</Version>
212+
</Details>
213+
<Buttons>
214+
{showDelete && (
215+
<Button
216+
onClick={e => {
217+
e.stopPropagation();
218+
deleteClick(asset.id);
219+
}}
220+
color="red"
221+
>
222+
delete
223+
</Button>
224+
)}
225+
226+
{showInstall && (installed || progressState.progress === 'installed') && (
227+
<Button disabled color="green">
228+
installed
229+
</Button>
230+
)}
231+
232+
{showInstall && !installed && !progressState.progress && (
233+
<Button color="green" onClick={installClick}>
234+
install
235+
</Button>
236+
)}
237+
238+
{showInstall && !installed && progressState.progress === 'notavailable' && (
239+
<Button color="green" disabled>
240+
not available
241+
</Button>
242+
)}
243+
244+
{progressState.progress === 'installing' && !installed && showInstall && (
245+
<Button color="green" disabled>
246+
<Spinner />
247+
</Button>
248+
)}
249+
</Buttons>
250+
</BG>
251+
</ContextMenuTrigger>
252+
<ContextMenu holdToDisplay={-1} id={`assetcard${asset.id}`}>
253+
<>
208254
{showDelete && (
209-
<Button
255+
<MenuItem
210256
onClick={e => {
211257
e.stopPropagation();
212258
deleteClick(asset.id);
213259
}}
214-
color="red"
215260
>
216-
delete
217-
</Button>
218-
)}
219-
220-
{showInstall && (installed || progressState.progress === 'installed') && (
221-
<Button disabled color="green">
222-
installed
223-
</Button>
261+
Delete
262+
</MenuItem>
224263
)}
225-
226-
{showInstall && !installed && !progressState.progress && (
227-
<Button color="green" onClick={installClick}>
228-
install
229-
</Button>
264+
{installed && (
265+
<MenuItem
266+
disabled={asset.type === 'datapack'}
267+
onClick={e => {
268+
e.stopPropagation();
269+
copyToClick(asset.id);
270+
}}
271+
>
272+
Copy to...
273+
</MenuItem>
230274
)}
231-
232-
{showInstall && !installed && progressState.progress === 'notavailable' && (
233-
<Button color="green" disabled>
234-
not available
235-
</Button>
275+
{installed && (
276+
<MenuItem
277+
disabled={asset.type === 'datapack'}
278+
onClick={e => {
279+
e.stopPropagation();
280+
moveToClick(asset.id);
281+
}}
282+
>
283+
Move to...
284+
</MenuItem>
236285
)}
237-
238-
{progressState.progress === 'installing' && !installed && showInstall && (
239-
<Button color="green" disabled>
240-
<Spinner />
241-
</Button>
286+
{showInstall && !installed && !progressState.progress && <MenuItem onClick={installClick}>Install</MenuItem>}
287+
{showInstall && (installed || progressState.progress === 'installed') && (
288+
<MenuItem disabled>Installed</MenuItem>
242289
)}
243-
</Buttons>
244-
</BG>
245-
</ContextMenuTrigger>
246-
<ContextMenu holdToDisplay={-1} id={`assetcard${asset.id}`}>
247-
<>
248-
{showDelete && (
249-
<MenuItem
250-
onClick={e => {
251-
e.stopPropagation();
252-
deleteClick(asset.id);
253-
}}
254-
>
255-
Delete
256-
</MenuItem>
257-
)}
258-
{installed && (
259-
<MenuItem
260-
disabled={asset.type === 'datapack'}
261-
onClick={e => {
262-
e.stopPropagation();
263-
copyToClick(asset.id);
264-
}}
265-
>
266-
Copy to...
267-
</MenuItem>
268-
)}
269-
{installed && (
270-
<MenuItem
271-
disabled={asset.type === 'datapack'}
272-
onClick={e => {
273-
e.stopPropagation();
274-
moveToClick(asset.id);
275-
}}
276-
>
277-
Move to...
278-
</MenuItem>
279-
)}
280-
{showInstall && !installed && !progressState.progress && <MenuItem onClick={installClick}>Install</MenuItem>}
281-
{showInstall && (installed || progressState.progress === 'installed') && (
282-
<MenuItem disabled>Installed</MenuItem>
283-
)}
284-
{asset.hosts && asset.hosts.curse && (
285-
<>
286-
<SubMenu hoverDelay={0} title="CurseForge">
287-
<MenuItem
288-
onClick={() => {
289-
clipboard.writeText(
290-
`${asset.name} on CurseForge:\n${asset.blurb}\nhttps://minecraft.curseforge.com/projects/${asset.hosts.curse.id}\n\nTry it with Minecraft Manager, the easiest way to manage Minecraft Mods and Modpacks (is.gd/mcmtet)`
291-
);
290+
{asset.hosts && asset.hosts.curse && (
291+
<>
292+
<SubMenu hoverDelay={0} title="CurseForge">
293+
<MenuItem
294+
onClick={() => {
295+
clipboard.writeText(
296+
`${asset.name} on CurseForge:\n${asset.blurb}\nhttps://minecraft.curseforge.com/projects/${asset.hosts.curse.id}\n\nTry it with Minecraft Manager, the easiest way to manage Minecraft Mods and Modpacks (is.gd/mcmtet)`
297+
);
292298

293-
ToastManager.noticeToast('Copied!');
294-
}}
295-
>
296-
Copy with Info
297-
</MenuItem>
298-
<MenuItem
299-
onClick={() => shell.openExternal(`https://minecraft.curseforge.com/projects/${asset.hosts.curse.id}`)}
300-
>
301-
View
302-
</MenuItem>
299+
ToastManager.noticeToast('Copied!');
300+
}}
301+
>
302+
Copy with Info
303+
</MenuItem>
304+
<MenuItem
305+
onClick={() => shell.openExternal(`https://minecraft.curseforge.com/projects/${asset.hosts.curse.id}`)}
306+
>
307+
View
308+
</MenuItem>
303309

304-
<MenuItem
305-
onClick={() => {
306-
clipboard.writeText(`https://minecraft.curseforge.com/projects/${asset.hosts.curse.id}`);
310+
<MenuItem
311+
onClick={() => {
312+
clipboard.writeText(`https://minecraft.curseforge.com/projects/${asset.hosts.curse.id}`);
307313

308-
ToastManager.noticeToast('Copied!');
309-
}}
310-
>
311-
Copy Link
312-
</MenuItem>
313-
</SubMenu>
314-
</>
315-
)}
316-
</>
317-
</ContextMenu>
318-
</>
319-
);
314+
ToastManager.noticeToast('Copied!');
315+
}}
316+
>
317+
Copy Link
318+
</MenuItem>
319+
</SubMenu>
320+
</>
321+
)}
322+
</>
323+
</ContextMenu>
324+
</>
325+
);
326+
};
320327

321328
AssetCard.propTypes = {
322329
asset: PropTypes.object,

‎src/component/assetinfo/assetinfo.jsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -243,9 +243,7 @@ export default class AssetInfo extends Component {
243243
this.props.versionInstall(version, this.state.activeAsset);
244244
};
245245

246-
displayStateSwitch = e => {
247-
const newState = e.currentTarget.dataset.state;
248-
246+
displayStateSwitch = newState => {
249247
this.setState({
250248
displayState: newState,
251249
cantConnect: false
@@ -288,7 +286,7 @@ export default class AssetInfo extends Component {
288286
<>
289287
<AssetCard
290288
progressState={progressState}
291-
installed={displayState[activeAsset.id] === 'installed'}
289+
installed={progressState[activeAsset.id] === 'installed'}
292290
disableHover
293291
showInstall={!localAsset}
294292
installClick={installClick}
@@ -298,30 +296,27 @@ export default class AssetInfo extends Component {
298296
<HeaderButtons>
299297
<HeaderButton
300298
active={displayState === 'description'}
301-
onClick={this.displayStateSwitch}
302-
data-state="description"
299+
onClick={() => this.displayStateSwitch('description')}
303300
>
304301
Description
305302
</HeaderButton>
306303
{activeAsset.hosts.curse && (
307-
<HeaderButton active={displayState === 'versions'} onClick={this.displayStateSwitch} data-state="versions">
304+
<HeaderButton active={displayState === 'versions'} onClick={() => this.displayStateSwitch('versions')}>
308305
Versions
309306
</HeaderButton>
310307
)}
311308
{activeAsset.hosts.curse && type === 'mod' && (
312309
<HeaderButton
313310
active={displayState === 'dependencies'}
314-
onClick={this.displayStateSwitch}
315-
data-state="dependencies"
311+
onClick={() => this.displayStateSwitch('dependencies')}
316312
>
317313
Dependencies
318314
</HeaderButton>
319315
)}
320316
{activeAsset.installed && type === 'world' && (
321317
<HeaderButton
322318
active={displayState === 'datapacks'}
323-
onClick={this.displayStateSwitch}
324-
data-state="datapacks"
319+
onClick={() => this.displayStateSwitch('datapacks')}
325320
>
326321
Datapacks
327322
</HeaderButton>

0 commit comments

Comments
 (0)