View Issue Details
ID | Project | Category | View Status | Date Submitted | Last Update |
---|---|---|---|---|---|
0017113 | MMW 5 | General | public | 2020-11-18 22:24 | 2021-04-27 08:27 |
Reporter | drakinite | Assigned To | |||
Priority | low | Severity | tweak | Reproducibility | N/A |
Status | closed | Resolution | no change required | ||
Product Version | 5.0 | ||||
Target Version | 5.0.1 | Fixed in Version | 5.0 | ||
Summary | 0017113: Making the area to the left of the search button clickable | ||||
Description | Since 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 | ||||
Tags | No tags attached. | ||||
Attached Files | 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> | ||||
Fixed in build | 2275 | ||||
|
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"). |
|
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. |
|
Re open Blank space looks strange when there is background tasks. |
|
|
|
Perhaps the background tasks icon could be put to the right of the search icon? |
|
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. |
|
Uploading Video showing bad behavior. Progress icon was left of Search icon when needed not moved so much to the left. |
|
If we reserve space to see search bar, then why show it like in MM4? |
|
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. |
|
Verified 2275 As you said we will see, it was just odd for me. Closing |
|
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> |
|
|
|
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. |
|
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). |
|
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. |
|
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. |
|
Okay, fair. And if the decision comes to removing it, I can always make it an addon ;P |