View Issue Details

IDProjectCategoryView StatusLast Update
0017111MediaMonkey 5Otherpublic2020-11-28 16:54
Reporterdrakinite Assigned To 
PriorityhighSeveritytweakReproducibilityalways
Status closedResolutionfixed 
PlatformWindowsOS-OS Version10
Fixed in Version5.0 
Summary0017111: Glitchy appearance in Options and AddonInstall dialogs
Description1. 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 InformationTweaked files with fix are attached.
TagsNo tags attached.
Fixed in build2275

Relationships

related to 0017142 closedLudek Visual improvement to dlgOptions panel 

Activities

drakinite

2020-11-18 21:12

developer   ~0060285

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>
dlgAddonInstall.html (3,134 bytes)   
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>
dlgOptions.html (1,067 bytes)   

Ludek

2020-11-19 10:25

developer   ~0060288

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

peke

2020-11-21 21:46

developer   ~0060314

Verified 2275

1) I agree with Ludek (Reopen if needed after further consultation)

2) Much better. Good Catch

drakinite

2020-11-22 02:17

developer   ~0060333

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!

peke

2020-11-28 03:44

developer   ~0060409

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.

peke

2020-11-28 03:44

developer   ~0060410

Closing. Original issue fixed.