Univention Bugzilla – Bug 38894
Usability improvements for the App Center
Last modified: 2015-11-17 12:12:38 CET
The UMC App Center usability should be improved. The app list is getting longer and longer. :)
Created attachment 7067 [details] Draft of an improved App Center gallery view Attached you will find the current draft for an improved visualization of the App Center gallery view. Several things to note: * The idea is a bit similar to the Google Play Store, several categories are shown with the first results (e.g., Apps with available updates, installed apps, new/updated apps, top apps, proposed apps, planned apps etc.). By clicking on "more", all entries are shown. * The drop down field next to the search bar contains all of the visible categories as well as (visually separated) the current categories that we have now. Clicking on the "more" button will also change the selected value in the drop down. The module (x) button will change to a (←) button if a category is chosen, it allows to return to the first view. * The app entries are shaped as the Univention "u" logo. When hovering, additional information can be displayed (depending on the category). * Currently, we only have 50x50 sized app logos. It would be the best to ask for SVG logos and to include those here. Otherwise, this approach can also work with smaller logos.
Created attachment 7068 [details] Draft of an improved App Center detail view Attached the current draft for the app detail view (see also the next attachment). * An app module is rendered differently if it is installed (somewhere in the domain) or not: - If it is not installed, screenshot/videos and a meaningful description are shown prominently. - If it is already installed, we may assume that the user already knows about this software. Therefore screenshots/videos and description are minimized, but can still be shown if wished. In addition, an grid-based control widget is displayed that allows to manage installations in the domain. * When the module has been opened, the (x) button in the module header should be replace by a (←) button. * Note that the module header should use the same color as when opening the app as module directly as both views are identical and should be communicated identically to the user.
Created attachment 7069 [details] Draft of an improved App Center detail view (installed app)
Created attachment 7074 [details] Draft of hover effect for app gallery (In reply to Alexander Kläser from comment #2) > Created attachment 7068 [details] > Draft of an improved App Center detail view > > Attached the current draft for the app detail view (see also the next > attachment). I attached a detailed test for a slightly changed hover effect for the app gallery. The logo would fade into 20% opacity while the description gets darker and moves up. From bellow, additional information panel fades in.
As discussed I adapted the following things: r 63617 - de.po for js changes - I removed the condition for (UCS component) IMHO it is not important to show this info inside the hover - I changed the size of umc/icons/scalable/appcenter-ucs-component.svg from 50x50 to 75x75px - the opacity transition for the icon is now faster (old 1sec now 0.5sec) - added a new schablone.png - resized the wrapper div for the gallery (old height 175px now 165px - this matched with the image mockup) - removed some minor wording (e.g. App Status --> Status, local installation --> installed locally, ...) but IMHO this will change a few times, so don't rely on it. Package: univention-management-console-module-appcenter Version: 5.0.3-7.408.201509101139
r 63630 AppDetailsPage: - added margin bottom to the footer - using TitlePane also for uninstalled apps to show details - reverted the background-position to center center AppCenterPage: - added a css rule to overwrite the background-position for the icons inside the gallery (bottom center) - increased the size of the hover effect (height 40 --> 45%) Package: univention-management-console-module-appcenter Version: 5.0.3-8.409.201509101459
r 63649 AppDetailsPage: - adapted height for installedAppGrid - adapted some wording (e.g. added First steps) Package: univention-management-console-module-appcenter Version: 5.0.4-2.412.201509111059
63659 Made margin-bottom for AppDetailsPage more specific Package: univention-management-console-module-appcenter Version: 5.0.4-3.413.201509111433
63691 [WIP] Restoring appcenter-ucs-component.svg
r63780 Package: univention-management-console-module-appcenter Version: 5.0.4-16.425.201509161749 - added browser navigation for the appcenter - added module for metaCategories - improved usability for AppCenterPage
r63782 Package: univention-management-console-module-appcenter Version: 5.0.4-17.426.201509161847 * Bug #38894: [WIP] adjusted styling for MetaCategories
r63807 Package: univention-management-console-module-appcenter Version: 5.0.4-22.431.201509171444 * Bug #38894: [WIP] moved styles from js files to appcenter.css
r63816 - simplified query in AppCenterPage filterApplications - toggle visibility of the More/Less Button - cleanup Package: univention-management-console-module-appcenter Version: 5.0.4-24.434.201509171554
r63825 Bug #38894: [WIP] adjusted logic to toggle visibility of More/Less Button and moved styles from js files into appcenter.css Package: univention-management-console-module-appcenter Version: 5.0.4-25.435.201509171940
I added some fine tunings and clean ups for MS1. The integration of SVG icons is yet to be done and needs also some adjustments with repo-ng. univention-management-console-module-appcenter (5.0.6-2): r64049 | Bug #38894: version bump r64048 | Bug #38894: Show correct icon for UCS components on AppDetailsPage r64047 | Bug #38894: Show correct icon for UCS components on AppGalleryPage r64046 | Bug #38894: Show correct icon for UCS components on AppDetailsPage r64045 | Bug #38894: updated changelog r64044 | Bug #38894: fine tuning of appearance
I experienced some tracebacks (on a DC backup where the master is not reachable): TypeError: Cannot read property '_searchSidebar' of undefined at declare.postCreate (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/umc/modules/appcenter.js:87:23) at c.create (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1333:348) at c.postscript (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1332:99) at new <anonymous> (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1158:192) at null.<anonymous> (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1262:409) at b.hitch (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:819:130) at e (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:764:337) at h (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:764:263) at f.resolve (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:766:352) at null.<anonymous> (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1216:386) "TypeError: Cannot read property '_searchSidebar' of undefined at declare.postCreate (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/umc/modules/appcenter.js:87:23) at c.create (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1333:348) at c.postscript (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1332:99) at new <anonymous> (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1158:192) at null.<anonymous> (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1262:409) at b.hitch (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:819:130) at e (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:764:337) at h (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:764:263) at f.resolve (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:766:352) at null.<anonymous> (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1216:386) ---------------------------------------- TypeError: Cannot read property 'style' of null at m.adaptWidth (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1933:468) at l.onEach (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1465:386) at g.adaptWidth (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1509:61) at g._resize (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1508:339) at g.updateRowCount (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1514:153) at c._onFetchBegin (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:60:438) at null.<anonymous> (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:819:75) at http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:326:34 at e (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:764:337) at h (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:764:263) "TypeError: Cannot read property 'style' of null at m.adaptWidth (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1933:468) at l.onEach (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1465:386) at g.adaptWidth (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1509:61) at g._resize (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1508:339) at g.updateRowCount (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:1514:153) at c._onFetchBegin (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:60:438) at null.<anonymous> (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:819:75) at http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:326:34 at e (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:764:337) at h (http://backup502.deadlock50.intranet/univention-management-console/js_$20152909233030$/dojo/dojo.js:764:263)
Another one: I cannot open a installed App (Ad-Connection) anymore (starting with #module=appcenter:appcenter:0:category:All) The line 379 in AppDetailsPage causes a exception: this._installedAppsGrid = new adaptedGrid({ TypeError: Cannot read property 'search' of undefined The exception happens in _setLabelAttr of dijit.MenuItem
When appcenter/domainwide is set to False, there is no installationData for App.js. In this case, app.get_hosts() uses a fallback. This is buggy: data: this is not compatible with data: item "item" is a special, stripped down version. this does not have all of its properties.
I will set this bug to RESOLVED in order to outsource missing features and existing bugs into new bugs.
I added a missing changelog entry. r64736 | Bug #38894: add changelog entry
UCS 4.1 has been released: https://docs.software-univention.de/release-notes-4.1-0-en.html https://docs.software-univention.de/release-notes-4.1-0-de.html If this error occurs again, please use "Clone This Bug".