View Issue Details
| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 0017111 | MMW 5 | Other | public | 2020-11-18 21:06 | 2020-11-28 16:54 |
| Reporter | drakinite | Assigned To | |||
| Priority | high | Severity | tweak | Reproducibility | always |
| Status | closed | Resolution | fixed | ||
| Platform | Windows | OS | - | OS Version | 10 |
| Fixed in Version | 5.0 | ||||
| Summary | 0017111: Glitchy appearance in Options and AddonInstall dialogs | ||||
| Description | 1. The scrollable left panel in options dialog has a large border at the bottom This is fixed by moving the Ok/Cancel buttons' container into the right panel, allowing the scrollable left panel to be full height. 2. The info section of the addon installation screen is not scrollable, causing glitches when the dialog is not large enough. This is fixed simply by making the info section scrollable. | ||||
| Additional Information | Tweaked files with fix are attached. | ||||
| Tags | No tags attached. | ||||
| Fixed in build | 2275 | ||||
|
|
dlgAddonInstall.html (3,134 bytes)
<!-- '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' -->
<html class="dialog">
<script src="file:///mminit.js"></script>
<script src="dlgAddonInstall.js"></script>
<body data-posSaveName='dlgAddonInstall' data-defaultSize='600,500'>
<div class="fill flex column padding">
<div class="fill flex column scrollable">
<div class="hSeparator">
<label data-add-colon>This action will install the following product</label>
</div>
<div class="flex row">
<div data-id="imageBox" class="gridItemSquare">
<div class="padding">
<img data-id="image" class="stretchWidth">
<div data-id="icon" class="iconColor"></div>
</div>
</div>
<div class="flex fill column padding hSeparatorsTiny">
<div>
<div data-id="lblName" class="largeText"></div>
</div>
<div>
<span data-localize data-add-colon class="underscoredText">Description</span>
<span data-id="lblDescription" class="textWrap"></span>
</div>
<div>
<span data-localize data-add-colon class="underscoredText">Version</span>
<span data-id="lblVersion"></span>
</div>
<div>
<span data-localize data-add-colon class="underscoredText">Product type</span>
<span data-id="lblType"></span>
</div>
<div>
<span data-localize data-add-colon class="underscoredText">Author</span>
<span data-id="lblAuthor"></span>
</div>
</div>
</div>
<div data-id="license" class="flex fill column">
<div data-id="licenseInfo" class="hSeparatorTiny">Please read the following License Agreement. You must accept the terms of this agreement before continuing with the installation.</div>
<div data-id="licenseScroller" class="fill paddingColumnSmall border" data-control-class="Scroller">
<div data-id="licenseTxt"></div>
</div>
<div data-id="chbAccept" class="uiRow hSeparatorTiny" data-control-class="Checkbox">I accept the terms in the license agreement</div>
</div>
<label>Malicious software can damage your computer or violate your privacy.</label>
<b><label>You should only install software from sources that you trust.</label></b>
</div>
<div class="flex column nonTransparent">
<div data-control-class="Buttons">
<div data-id='btnOK' data-default="1">Install Now</div>
<div data-id='btnCancel'></div>
</div>
</div>
</div>
</body>
</html>
dlgOptions.html (1,067 bytes)
<!-- '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' -->
<html class="dialog">
<script src="file:///mminit.js"></script>
<script src="dlgOptions.js"></script>
<body data-posSaveName='dlgOptions' data-defaultSize='70em,50em'>
<div class="padding fill flex column">
<div class="fill flex row">
<div class="flex column verticalPanelNarrow">
<div data-id="lvPanelList" class="transparentList fill" data-control-class="PanelListView"></div>
</div>
<div class="fill flex column">
<div data-id="right-box" class="fill flex column padding scrollable">
</div>
<div data-id="bottom">
<div data-control-class="Buttons">
<div data-id='btnOK' data-default="1"></div>
<div data-id='btnCancel'></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html> |
|
|
1) Currently both (left/right) panels are scrollable: https://www.dropbox.com/s/2fggi9o7qctowts/screenshot%202020-11-19%2011.18.29.png?dl=0 so I don't see an issue here. With your change the left panel would snap the bottom edge: https://www.dropbox.com/s/yo5o3i5sdganeno/screenshot%202020-11-19%2011.23.30.png?dl=0 This would indicate that by pressing [OK] the user is confirming changes just on the selected panel (and not the all changed panels). So I am not keen changing this. 2) Goog point, fixed in 2275 |
|
|
Verified 2275 1) I agree with Ludek (Reopen if needed after further consultation) 2) Much better. Good Catch |
|
|
1- I don't really agree with that reasoning. From the user's point of view, the apparent "border" underneath the left panel doesn't look like it has anything to do with the OK/Cancel buttons. It just looks like a glitch. If there was a border around both panels, and the OK/Cancel buttons were outside that border, it would be a different story; but there is currently no strong indication to the user that the buttons confirm changes on all panels. I think that it's common sense for the user to expect all changes to be saved. 2- Thanks! |
|
|
1. As talked offline, Current design comply with general modal Dialog design and comply with current design of MM4 options dialog (which shows more clear why it is used the way it is used). Feel free to open new bug/suggestions to UI design in order to make things more clear in future native skins, but it as we agreed it can be easily added by any skinner to their skins without framework change on their designs to use dialog space more efficiently. Closing, as 2. is verified and 1. if needed as it more cosmetic issue than functionality bug should be filed separate. |
|
|
Closing. Original issue fixed. |
