View Issue Details

IDProjectCategoryView StatusLast Update
0017113MMW 5Generalpublic2021-04-27 08:27
Reporterdrakinite Assigned To 
PrioritylowSeveritytweakReproducibilityN/A
Status closedResolutionno change required 
Product Version5.0 
Target Version5.0.1Fixed in Version5.0 
Summary0017113: Making the area to the left of the search button clickable
DescriptionSince the blank space to the left of the search button is dedicated to the search bar, I think that it would make sense to be able to click it to open the search bar. As a user, I often found myself clicking that area, expecting it to open the search.

To implement it, I put a div with data-id="searchBarBlankShortcut" and class="flex fill" above the searchBar div in maincontent.html; and inside SearchBar.initialize I added this event listener:

app.listen(qid('searchBarBlankShortcut'), 'click', () => {
    window.actions.search.execute();
});

The existing nature of the search bar and its dynamic sizing means that when the search is open, the searchBarBlankShortcut gets a size of 0, but expands again once the search is cancelled.

maincontent.html and a screen recording are attached
TagsNo tags attached.
Attached Files
2020-11-18_17-13-57.gif (32,700 bytes)   
2020-11-18_17-13-57.gif (32,700 bytes)   
maincontent.html (4,989 bytes)   
<!-- '(C) Ventis Media, Licensed under the Ventis Limited Reciprocal License - see: license.txt for details' -->

<script src="maincontent.js"></script>
<script src="controls/internalplayer.js"></script>
<script src="controls/navigationBar.js"></script>
<script src="controls/maintabs.js"></script>
<script src="controls/embeddedWindow.js"></script>
<script src="controls/nowplayingList.js"></script>

<div data-id="mainContentDiv" class="fill flex column animate" data-control-class="Control">
    <div class="tabs_container flex row verticalCenter">
        <div data-menu-container data-hideInFullWindowMode class="vSeparator"></div>
        <div data-hideInFullWindowMode data-id="tabs_parent" class="animate fill uiRow">
            <div data-id="tabs" class="animate" data-control-class="MainTabs" data-init-params="{hideElement: 'tabs_parent'}" data-mainTabs data-animate-height>
            </div>
        </div>
    </div>

    <div class="fill flex column animate" style="min-height: 400px; min-width: 600px">
        <div data-id="toolbuttons" data-hideInFullWindowMode class="mainToolbar flex row">
            <div data-id="lefttoolbuttons" class="toolbar left dynamic vSeparator">
                <div data-id="showSidebarLeft" data-icon="showSidebarLeft" data-control-class="ToolButton" class="btnShowSidebar"></div>
                <div data-id="navigationBar" data-control-class="NavigationBar" data-navigation-bar></div>
            </div>
            <div data-id="viewtoolbuttons" class="right" data-control-class="Toolbar" data-init-params="{rightElementID: 'righttoolbuttons', linkedElementID:'mainpanel'}">
            </div>
            <div data-id="righttoolbuttons" class="toolbar flex right" style="order:999">
                <div data-id="myTasksController" class="toolbutton animate" data-control-class="TasksController" data-init-params="{details: 'progressContainer'}"></div>
                <div data-id="contexttoolbuttons" class="right" data-control-class="Toolbar">
                </div>
                <div data-id="searchBarBlankShortcut" class="flex fill"></div>
                <div data-id="searchBar" data-control-class="SearchBar" class="flex row"></div>
                <div data-id="switchButton" data-control-class="PlayerSwitch"></div>
                <div data-id="showSidebarRight" data-icon="showSidebarRight" data-control-class="ToolButton" class="btnShowSidebar" style="order:999"></div>
            </div>
        </div>
        <div data-id="innerbody" class="fill flex column">
            <div data-id="topdock" data-control-class="Control" data-dock data-dock-top data-dock-title="Top panel">
            </div>
            <div data-id="innerbodyFlex" class="fill flex row" data-control-class="Control">
                <!--        <div class="fill flex column">-->
                <div data-id="mainpanel" data-mainPanelSpot class="fill"></div>
                <!--        </div>-->
                <div data-id="nowplayingVerticalSplitter" data-hideInFullWindowMode data-control-class="Splitter"></div>
                <div data-id="nowplaying" class="flex column animate noOverflow verticalPanel" data-control-class="Control" data-dock data-dock-right data-dock-title="Right panel" data-hideInFullWindowMode>
                    <div data-id="nowplayinglistContainer" data-control-class="NowplayingListView" data-init-params="{statusInHeader: true, makeInSync: true, closable: false, closeAction: actions.view.nowPlaying}" class="fill initialSize" data-dockable data-dock-title="Playing" data-dock-support="left,right" data-hideInFullWindowMode>
                    </div>
                    <div data-id="nowplayingHorizontalSplitter" data-hideInFullWindowMode data-control-class="Splitter"></div>
                    <!-- Min size of artWindow derived from min size of Youtube window: https://developers.google.com/youtube/terms/required-minimum-functionality plus possible 4px border -->
                    <div data-id="artWindow" data-control-class="ArtWindow" class="animate allinside initialSize" style="min-height: 208px; min-width: 208px" data-init-params="{closable: false, closeAction: actions.view.preview}" data-dockable data-dock-configurable data-dock-support="left,right" data-dock-title="Preview">
                    </div>
                </div>
            </div>
            <div data-id="toastMessage" class="toastContainer" data-control-class="ToastMessage" style="display: none;">
            </div>
        </div>
        <!-- Innerbody -->
        <div data-id="mostBottomDock" data-hideInFullWindowMode data-dock data-dock-bottom data-dock-title="Bottom panel">
            <div data-id="mainPlayer" id="mainPlayer" data-mainPlayer class="animate" data-uiblock="player" data-control-class="Control" data-dockable data-dock-configurable data-dock-support="bottom,top" data-dock-title="Player"></div>
        </div>

    </div>
</div>
maincontent.html (4,989 bytes)   
Fixed in build2275

Activities

Ludek

2020-11-19 10:44

developer   ~0060289

Last edited: 2020-11-19 10:45

ok, I added this change in 2275.

But not sure about this, it rather looks like a bug for me, but we will see based on the feedback.

Just the listener app.listen(qid('searchBarBlankShortcut'), 'click', () => {} shouldn't be in SearchBar.initialize, but rather in mainwindow.js (as SearchBar is a standalone component that can be used even without the searchBarBlankShortcut "hack").

drakinite

2020-11-19 14:29

developer   ~0060292

Okay cool. I wasn't sure where the most appropriate place was to put it, but your reasoning makes sense. And maybe I could be wrong, people might not like it; but we can see.

peke

2020-11-21 21:41

developer   ~0060311

Re open Blank space looks strange when there is background tasks.

peke

2020-11-21 21:42

developer   ~0060312

bug17113.jpg (18,494 bytes)   
bug17113.jpg (18,494 bytes)   

drakinite

2020-11-22 02:47

developer   ~0060335

Perhaps the background tasks icon could be put to the right of the search icon?
image.png (3,290 bytes)   
image.png (3,290 bytes)   

Ludek

2020-11-22 17:05

developer   ~0060338

Last edited: 2020-11-22 17:05

I don't see anything strange about the progress icon currently (on the Peke's screenshot).

Moving the progress icon next to the search icon (as on the Drakinite's) would cause the search icon to be moved whenever a task progress is started or finished. Which is undesired.

So no change required atm.

peke

2020-11-23 02:21

developer   ~0060345

Last edited: 2020-11-23 02:21

Uploading Video showing bad behavior. Progress icon was left of Search icon when needed not moved so much to the left.
bug17113.mp4 (237,773 bytes)   

peke

2020-11-23 02:25

developer   ~0060346

If we reserve space to see search bar, then why show it like in MM4?

Ludek

2020-11-23 10:28

developer   ~0060348

The only difference against 2274 is that the progress icon is left aligned and not right aligned to the search icon, but I don't actually see anything bad about it.

As for the added cliceable space to show the search bar, this was Drakinite's request, I was not keen adding it, but on the other hand I don't see a downside atm.
So I would keep it as is until we have a negative feedback - then we can just revert it.

peke

2020-11-23 16:30

developer   ~0060352

Verified 2275

As you said we will see, it was just odd for me. Closing

drakinite

2020-11-23 17:08

developer   ~0060354

Hold up! :P I figured out how to fix the visual issue you were having, Peke. You just have to move myTasksController and contexttoolbuttons between searchBarBlankShortcut and searchBar. That way, the loading icon retains its appearance from before this update.

<div data-id="searchBarBlankShortcut" class="flex fill"></div>
<div data-id="myTasksController" class="toolbutton animate" data-control-class="TasksController" data-init-params="{details: 'progressContainer'}"></div>
<div data-id="contexttoolbuttons" class="right" data-control-class="Toolbar"></div>
<div data-id="searchBar" data-control-class="SearchBar" class="flex row"></div>
<div data-id="switchButton" data-control-class="PlayerSwitch"></div>
<div data-id="showSidebarRight" data-icon="showSidebarRight" data-control-class="ToolButton" class="btnShowSidebar" style="order:999"></div>

drakinite

2020-11-23 17:08

developer   ~0060355

Ludek

2020-11-24 10:57

developer   ~0060365

And wouldn't it be strange that clicking the area on the left of progress icon would open search bar??

I would rather keep it as is or remove searchBarBlankShortcut entirely.

peke

2020-11-24 11:40

developer   ~0060368

Last edited: 2020-11-24 11:41

I agree with Ludek on this to remove it completely.

But maybe we can tweak it a bit more:
1. to get context search (SearchBar) user needs to click on Search icon
2. Once searchbar is shown I would add Drop down Icon right of Search icon to be same as in MM4 and it is clear that there is more options like advanced search (which can be only initiated with right click on Search icon).

drakinite

2020-11-24 16:57

developer   ~0060372

We could add a checkbox option to enable it in the options, for 5.0.1, if it's not to be turned on by default. I still think that it makes a lot of sense that clicking the empty region should bring up the search bar, because the region is already pretty much dedicated to the search bar.

Ludek

2020-11-24 17:13

developer   ~0060374

I don't like adding an option, we already have simply too many options in MM5 ;-)
Another solution could be to hide the searchBarBlankShortcut whenever there are some items in myTasksController or contexttoolbuttons, but not a big deal atm, let's see based on feedback.

drakinite

2020-11-24 17:28

developer   ~0060375

Okay, fair.
And if the decision comes to removing it, I can always make it an addon ;P