[Freeipa-devel] [PATCH] 592-628 Update to PatternFly

Thu May 29 15:03:38 UTC 2014

On 26.5.2014 17:08, Petr Vobornik wrote:
> On 19.5.2014 14:58, Petr Vobornik wrote:
>> On 12.5.2014 17:46, Misnyovszki Adam wrote:
>>> Hi,
>>> see my review notes below:
>>>
>>> On Mon, 05 May 2014 18:41:13 +0200
>>> Petr Vobornik <pvoborni at redhat.com> wrote:
>>>
>>>> This patchset updates Bootstrap 2 based RCUE to Bootstrap 3 based
>>>> PatternFly (v0.2.4) according to plan described at:
>>>>
>>>> http://www.redhat.com/archives/freeipa-devel/2014-April/msg00045.html
>>>>
>>>> The rest of the patches are mostly response to new CSS styles + some
>>>> new functionality and simplification of UI:
>>>> - css cleanup, images cleanup
>>>> - adjustment of stand-alone pages to PF
>>>> - adjustment of DOM structure to Bootstap 3 structure
>>>> - BS 3 enabled to change absolute positioned layout to responsive
>>>> fluid layout
>>>> - new activity indicators (since the old didn't fit into PF
>>>> navigation)
>>>> - new pager styles + additional behavior
>>>> - action select transform into dropdown and moved to control-button
>>>> section, making the header responsive
>>>> - fluid layout requested removal of computation of columns widths
>>>> - removal of login.html and logout.html
>>>> - new login background (the old one did not work with PF styles)
>>>> - new dialog styles
>>>> - + additional adjustments to use PF
>>>>
>>>> The result is that UI uses most of PatternFly styles and is
>>>> responsive.
>>>>
>>>> Fixes:
>>>> https://fedorahosted.org/freeipa/ticket/4177 - Better indication of
>>>> ongoing activity if dialog is opened
>>>   - working progress could have a border. if it is over a dialog,
>>>     sometimes it looks messy over text
>>>
>>
>> Fixed
>>
>>>> https://fedorahosted.org/freeipa/ticket/4136 - WebUI unusable on
>>>> Cellphone screen
>>>   - when I open the menu in 320x480, and select and navigate to an item,
>>>     the menu stays open - needs more investigation, if it is freeipa ui
>>>     issue
>>
>> Fixed
>>
>>>   - qr code is fixed size in otp tokens, doesn't look nice on small
>>>     screens
>>>     not a problem, user just clicks on qr code link
>>
>> Fixed
>>
>>>   - when a table header is longer, than the actual screen size, overflow
>>>     hidden occurs, unable to use buttons at the end of the header eg DNS
>>>     Resource Records, 320x480px, sometimes delete and add button
>>>     overflows the table, you can only scroll that table with tap
>>>     not a problem, responsive table works this way
>>
>>
>> I did not encounter overflow hidden issue - scrollbars were present and
>> I could scroll to the icons.
>>
>>>   - in 320x480, login page configuration text overflows on a white
>>>     background, especially if there is a login error, which makes the
>>>     white text unreadable
>>
>> Behavior was improved.
>>
>>>
>>>> https://fedorahosted.org/freeipa/ticket/4255 - Web UI: Display
>>>> "Loading" message when a list of entries is being loaded
>>> see working progress comment above
>>>> https://fedorahosted.org/freeipa/ticket/3435 - [RFE] Remove width
>>>> limit in UI
>>> ACK - PatternFly 3 handles this very neatly
>>>> https://fedorahosted.org/freeipa/ticket/3050 - WebUI: it is not clear
>>>> which row a value belongs to
>>> ACK - row color alternation hopefully solves the problem
>>>> https://fedorahosted.org/freeipa/ticket/4278 - Use Patternfly theme
>>>> in config and migration pages
>>> FreeIPA logo doesn't lead anywhere, no way to navigate to the
>>> login page, only by altering the url, or clicking the back button. IMO
>>> logo should always lead to login page if not logged in.
>>
>> Logo now points to UI
>>
>>>> https://fedorahosted.org/freeipa/ticket/4281 - Remove login.html and
>>>> logout.html
>>> ACK
>>>> https://fedorahosted.org/freeipa/ticket/4282
>>>
>>> Other issues:
>>>   - unit tests have several fails, possibly because of dom changes
>>
>> Fixed
>>
>>>   - integration tests ran without errors
>>>
>>> Also, according to the UX meeting with Kyle, this patchset should
>>> include the following changes:
>>>
>>>   - placeholder for search, box should be on the left
>>>   - actions in one place, on the right in search page
>>>   - actions in one place, on the left in details page
>>>   - action dropdown list to the right near update button in details page
>>>   - left align form fields in details page, two columns arrangement
>>>     if the screen is wide
>>>   - hbac details pages - leave it as it is, no form modification
>>> required
>>>   - association adder dialog - placeholder for textbox(Filter
>>> available),
>>>     change button text "Filter"
>>>   - search page title should be changed - use dark variant text
>>>   - multi value list - "add" to button, with "undo all" button group
>>>   - multi value list - "delete" should be also a button
>>>   - left align firefox configuration page steps - ie. every static
>>>     page
>>>   - migration should look like login, (~reset_password), text
>>>     should go to right
>>>   - error page "return back" should be a button
>>
>> All fixed
>>
>>>
>>> Thanks
>>> Adam
>>>
>>
>> The suggestions found by UX review resulted in additional 10 new commits
>> (patch numbers 633-642):
>>
>> I think, that we should switch from patch files to my git branch to
>> avoid sending 1-2MB of patches in each review cycle.
>>
>> http://fedorapeople.org/cgit/pvoborni/public_git/freeipa.git/log/?h=patternfly
>>
>>
>>
>> To be exact:
>>
>> git log --pretty=format:%s -47
>> 642 webui: use normal buttons instead of link buttons in multivalued
>> widget
>> 641 webui: move service action panel actions to action dropdown
>> 640 webui: move host action panel actions to action dropdown
>> 639 webui-ci: assert_action_list_action
>> 638 webui: use dark color for facet titles without pkey
>> 637 webui: association adder dialog - change find label to filter
>> 636 webui: certificate search - select search attribute only when defined
>> 635 webui: change control buttons to normal buttons
>> 634 webui: add search box placeholder text
>> 633 webui: adjust header controls alignment
>> 628 webui: remove old css for standalone pages
>> 627 webui-ci: select search table item - chrome issue
>> 626 webui: use BS alerts in validation_summary_widget
>> 625 webui: adjust login page to PatternFly
>> 624 webui: preload automember default group select list
>> 623 webui: restyle automember default group
>> 622 webui: do not show empty table footer
>> 621 webui: improve pagination
>> 620 webui: activity indicators
>> 619 webui: adjust association adder dialog to PatternFly
>> 618 webui: patternFly dialog
>> 617 webui: move user reset password action to action dropdown
>> 616 webui: move certificate actions to action dropdown
>> 615 webui: add confirmation to action dropdown actions
>> 614 webui: remove select action
>> 613 webui: add space between action buttons's icon and text
>> 612 webui: add action dropdown
>> 611 webui: remove action list widget
>> 610 webui: use h1 in facet title instead of h3
>> 609 webui: change breadcrumb to PatternFly
>> 608 webui: allow multiple base section layouts
>> 607 webui: display undo and multivalued delete buttons in input-group
>> 606 webui: adjust styles to PatternFly
>> 605 webui: change navigation from RCUE to PatternFly
>> 604 webui: remove column sizing in tables, use PF styles
>> 603 webui: change absolutely positioned layout to fluid
>> 602 webui: remove unused images
>> 601 webui: remove unused collapsible feature from section
>> 600 webui: remove unused icons
>> 599 webui: remove remnants of jquery-ui
>> 598 webui: apply PatternFly theme on migration pages
>> 597 webui: styles for alert icons
>> 596 webui: apply PatternFly theme on config pages
>> 595 webui: apply PatternFly login theme on reset_password.html
>> 594 webui: add PaternFly css
>> 593 webui: remove login.html
>> 592 webui: remove logout.html
>
> The branch was rebased and commit
>
> 644 webui: move radius proxy action panel commands to header actions
>
> http://fedorapeople.org/cgit/pvoborni/public_git/freeipa.git/commit/?h=patternfly&id=a0591297adaec404ad1142651d2f6ce1a61e6164
>
>
> was added.

I've improved UX of alerts. Now dialogs, page header and login screen 
use the same logic for rendering alerts with icons [1].

It required to implement widget.alert_helper. It was squashed into patch 
#626 webui: use BS alerts in validation_summary_widget.

Two new patches for dialogs and header alerts:

653 webui: use propert alerts in header notification area
652 webui: proper alerts in dialogs

the branch was updated.

[1] https://www.patternfly.org/widgets/#forms

-- 
Petr Vobornik