Skip to content

Conversation

putzwasser
Copy link
Contributor

This replaces the icon for the action toggle button in tables (e.g. contact list table or segment list table) with a 3 dot icon.

The previous arrow down icon indicates that an collapsed element would get unfolded/shown. This is not the case in these tables. The button shows more actions. In any UI that I know a 3 dot icon is used for that.

The arrow down icon would be more suitable if it would show more details on click. Hence, this PR.

Q A
Bug fix? (use the a.b branch) 🔴
New feature/enhancement? (use the a.x branch) 🔴
Deprecations? 🔴
BC breaks? (use the c.x branch) 🔴
Automated tests included? 🔴🟢
Related user documentation PR URL mautic/user-documentation#...
Related developer documentation PR URL mautic/developer-documentation-new#...
Issue(s) addressed Fixes #...

Description

This replaces the icon for the action toggle button in tables (e.g. contact list table or segment list table) with a 3 dot icon.

The previous arrow down icon indicates that an collapsed element would get unfolded/shown. This is not the case in these tables. The button shows more actions. In any UI that I know a 3 dot icon is used for that.

The arrow down icon would be more suitable if it would show more details on click (which it doesn't).

Before After
image image

📋 Steps to test this PR:

  1. Open this PR on Gitpod or pull down for testing locally (see docs on testing PRs here)
  2. See that the icons got replaced in any table that shows the "more action" button.

This replaces the icon for the action toggle button in tables (e.g. contact list table or segment list table) with a 3 dot icon.

The previous arrow down icon indicates that an collapsed element would get unfolded/shown. This is not the case in these tables. The button shows more actions. In any UI that I know a 3 dot icon is used for that.

The arrow down icon would be more suitable if it would show more details on click. Hence, this PR.
@putzwasser
Copy link
Contributor Author

An alternative would be

https://remixicon.com/icon/menu-line

Copy link

codecov bot commented Jun 15, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 62.17%. Comparing base (b30170e) to head (de668b9).

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff              @@
##                5.x   #13841      +/-   ##
============================================
- Coverage     62.18%   62.17%   -0.01%     
  Complexity    34220    34220              
============================================
  Files          2252     2252              
  Lines        102328   102328              
============================================
- Hits          63628    63627       -1     
- Misses        38700    38701       +1     

see 1 file with indirect coverage changes

Copy link
Contributor

@andersonjeccel andersonjeccel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your proposal totally makes sense for tables, thanks for this fix!

We're go to go after the change I mentioned

@andersonjeccel andersonjeccel added T1 Low difficulty to fix (issue) or test (PR) user-interface Anything related to appearance, layout, and interactivity pending-test-confirmation PR's that require one test before they can be merged enhancement Any improvement to an existing feature or functionality code-review-passed PRs which have passed code review labels Jun 16, 2024
@andersonjeccel andersonjeccel requested review from a team, LordRembo and andersonjeccel June 16, 2024 17:26
@andersonjeccel andersonjeccel added pending-feedback PR's and issues that are awaiting feedback from the author code-review-needed PR's that require a code review before merging and removed pending-test-confirmation PR's that require one test before they can be merged code-review-passed PRs which have passed code review labels Jun 16, 2024
Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
@putzwasser
Copy link
Contributor Author

Implemented your change.

@andersonjeccel andersonjeccel added code-review-passed PRs which have passed code review user-testing-passed PRs which have been successfully tested by the required number of people. and removed pending-feedback PR's and issues that are awaiting feedback from the author code-review-needed PR's that require a code review before merging labels Jun 17, 2024
@andersonjeccel andersonjeccel added this to the 5.2 milestone Jun 17, 2024
Copy link
Member

@kuzmany kuzmany left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like it 👍

@kuzmany kuzmany added the ready-to-commit PR's with 2 successful tests, 1 approval, automated tests and docs and is ready to be merged label Jun 18, 2024
@escopecz escopecz merged commit fadcf26 into mautic:5.x Jun 18, 2024
@putzwasser putzwasser deleted the 5.x-3-dot-more-button branch June 18, 2024 11:08
putzwasser added a commit to putzwasser/mautic that referenced this pull request Jun 20, 2024
…utic#13841)

* [UI] Replaces table action button `arrow-down` with `more-2` icon

This replaces the icon for the action toggle button in tables (e.g. contact list table or segment list table) with a 3 dot icon.

The previous arrow down icon indicates that an collapsed element would get unfolded/shown. This is not the case in these tables. The button shows more actions. In any UI that I know a 3 dot icon is used for that.

The arrow down icon would be more suitable if it would show more details on click. Hence, this PR.

* TASK: Reverts change for `page_actions.html.twig`

Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>

---------

Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
andersonjeccel added a commit to andersonjeccel/mautic that referenced this pull request Jun 21, 2024
commit 3ad8223
Merge: f79216d b228705
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Jun 21 10:35:56 2024 -0300

    Merge remote-tracking branch 'upstream/5.x' into ui-token-based-approach-for-interface-elements-and-colors

commit f79216d
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Jun 21 10:35:19 2024 -0300

    semantic fixes

commit b228705
Author: Miroslav Fedeleš <miroslav.fedeles@gmail.com>
Date:   Tue Jun 18 17:20:10 2024 +0200

    Make the search regular expression match both "&" and "&amp;" for link replacement within an email body (mautic#13858)

commit 58c1903
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Tue Jun 18 11:37:28 2024 -0300

    [UI] Increased icon size (mautic#13825)

    * increased icon size

    * decrease by 1px

commit 2331cf3
Author: John Linhart <admin@escope.cz>
Date:   Tue Jun 18 14:42:43 2024 +0200

    Segment membership as a new filter for dynamic email content (mautic#13528)

    * Merge pull request mautic#1088 from mautic-inc/MAUT-4688

    Maut 4688 - Use segment membership as a filter for dynamic content in email

    * Changes needed after rebase to M5

    * Merge pull request mautic#1407 from acquia/MAUT-5729

    MAUT-5729 Dynamic Content Error - Segment Membership filter not showing correct content

    * Fixing STAN

    * CS fixes

    * Test fix

    * test fix part 2

    * Adding back JS methods removed in a bad conflict resolution

    ---------

    Co-authored-by: Lukáš Drahý <lukas@drahy.net>
    Co-authored-by: Rohit Pavaskar <66303837+rohitp19@users.noreply.github.com>
    Co-authored-by: Ruth Cheesley <ruth@ruthcheesley.co.uk>

commit 3edfeec
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Tue Jun 18 09:34:10 2024 -0300

    add js code to hide profile pic if missing (mautic#13838)

commit fadcf26
Author: putzwasser <26040044+putzwasser@users.noreply.github.com>
Date:   Tue Jun 18 12:56:34 2024 +0200

    [UI] Replaces table action button `arrow-down` with `more-2` icon (mautic#13841)

    * [UI] Replaces table action button `arrow-down` with `more-2` icon

    This replaces the icon for the action toggle button in tables (e.g. contact list table or segment list table) with a 3 dot icon.

    The previous arrow down icon indicates that an collapsed element would get unfolded/shown. This is not the case in these tables. The button shows more actions. In any UI that I know a 3 dot icon is used for that.

    The arrow down icon would be more suitable if it would show more details on click. Hence, this PR.

    * TASK: Reverts change for `page_actions.html.twig`

    Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>

    ---------

    Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
andersonjeccel added a commit to andersonjeccel/mautic that referenced this pull request Jun 24, 2024
…utic#13841)

* [UI] Replaces table action button `arrow-down` with `more-2` icon

This replaces the icon for the action toggle button in tables (e.g. contact list table or segment list table) with a 3 dot icon.

The previous arrow down icon indicates that an collapsed element would get unfolded/shown. This is not the case in these tables. The button shows more actions. In any UI that I know a 3 dot icon is used for that.

The arrow down icon would be more suitable if it would show more details on click. Hence, this PR.

* TASK: Reverts change for `page_actions.html.twig`

Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>

---------

Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
andersonjeccel added a commit to andersonjeccel/mautic that referenced this pull request Jun 24, 2024
escopecz added a commit that referenced this pull request Jun 27, 2024
* [UI] Replaces table action button `arrow-down` with `more-2` icon (#13841)

* [UI] Replaces table action button `arrow-down` with `more-2` icon

This replaces the icon for the action toggle button in tables (e.g. contact list table or segment list table) with a 3 dot icon.

The previous arrow down icon indicates that an collapsed element would get unfolded/shown. This is not the case in these tables. The button shows more actions. In any UI that I know a 3 dot icon is used for that.

The arrow down icon would be more suitable if it would show more details on click. Hence, this PR.

* TASK: Reverts change for `page_actions.html.twig`

Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>

---------

Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>

* add js code to hide profile pic if missing (#13838)

* Segment membership as a new filter for dynamic email content (#13528)

* Merge pull request #1088 from mautic-inc/MAUT-4688

Maut 4688 - Use segment membership as a filter for dynamic content in email

* Changes needed after rebase to M5

* Merge pull request #1407 from acquia/MAUT-5729

MAUT-5729 Dynamic Content Error - Segment Membership filter not showing correct content

* Fixing STAN

* CS fixes

* Test fix

* test fix part 2

* Adding back JS methods removed in a bad conflict resolution

---------

Co-authored-by: Lukáš Drahý <lukas@drahy.net>
Co-authored-by: Rohit Pavaskar <66303837+rohitp19@users.noreply.github.com>
Co-authored-by: Ruth Cheesley <ruth@ruthcheesley.co.uk>

* [UI] Increased icon size (#13825)

* increased icon size

* decrease by 1px

* Make the search regular expression match both "&" and "&amp;" for link replacement within an email body (#13858)

* Guide users to build optimized segments (#13860)

* Merge pull request #2172 from acquia/MAUT-11343

MAUT-11343 : Guide users to build optimized segments

* fix twig file issue

* Apply suggestions from code review

Co-authored-by: John Linhart <admin@escope.cz>

* push suggested changes

---------

Co-authored-by: John Linhart <admin@escope.cz>

* fix CSS flexbox broken in campaign insert clone view

* Revert "[UI] Replaces table action button `arrow-down` with `more-2` icon (#13841)"

This reverts commit fadcf26.

* Revert "Segment membership as a new filter for dynamic email content (#13528)"

This reverts commit 71031b7.

* Revert "[UI] Increased icon size (#13825)"

This reverts commit c00df3c.

* Revert "Make the search regular expression match both "&" and "&amp;" for link replacement within an email body (#13858)"

This reverts commit d3e6ceb.

* Revert "Guide users to build optimized segments (#13860)"

This reverts commit bdabc26.

* Revert "add js code to hide profile pic if missing (#13838)"

This reverts commit 76dd7d6.

---------

Co-authored-by: putzwasser <26040044+putzwasser@users.noreply.github.com>
Co-authored-by: John Linhart <admin@escope.cz>
Co-authored-by: Lukáš Drahý <lukas@drahy.net>
Co-authored-by: Rohit Pavaskar <66303837+rohitp19@users.noreply.github.com>
Co-authored-by: Ruth Cheesley <ruth@ruthcheesley.co.uk>
Co-authored-by: Miroslav Fedeleš <miroslav.fedeles@gmail.com>
Co-authored-by: Saurabh Gupta <48244990+dadarya0@users.noreply.github.com>
escopecz pushed a commit that referenced this pull request Jul 15, 2024
* tokens

* incorporating all bootstrap variables

* migrating mautic variables into bootstrap

* fixing broken darken/lighten

* variables

* revert removing 5x duplicated import rules

revert
Revert "fixing broken darken/lighten"
This reverts commit bcf4ac98e07c0c17162a74794a8161d5398c3d7c.

* grunt compile-less

* aligning previous tokens

* remove duplicated imports

* dark color scheme disabled by default to avoid conflicts

* utilities syntax fix

* improve radius calc

* tag to label token names

* setting the dark theme implementation method

* set implementation mode for high contrast + run grunt-compile-less

* fix missing transparency bg colors

* darker brand bg on dark theme

* Responsive typography

* secondary brand color support

* style fixes

* fixes for secondary brand color support

* transparency for borders when on brand bg

* Revert "transparency for borders when on brand bg"

This reverts commit a8c4748.

* sat improv

* reduced max bdr value

* enhanced border calc

* removing duplicates

* high contrast improvement

* separate file for tokens to avoid duplication on .css files

* brand center enabled by default

* another pallete generation method + accessibility improvement

* 4px rounded standard

* revert to 0 based on community feedback

* fix css to less

* New utilities

* event icon

* fix delay + opacity

* wip

* wip

* New utilities

* media queries for wrap

* responsive utilities

* final

* final

* revert connector style @shinde-rahul

* make preview and builder the same @shinde-rahul

* other improvements for builder + preview @kuzmany

* grunt compile-less after rebase

* fix missing translation for jump itens

* making campaign icons reusasble by @patrykgruszka

* name below @kuzmany

* fixing accessibility, colors, layout and everything based on slack conversation

* covering more actions

* Squashed commit of the following:

commit 3ad8223
Merge: f79216d b228705
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Jun 21 10:35:56 2024 -0300

    Merge remote-tracking branch 'upstream/5.x' into ui-token-based-approach-for-interface-elements-and-colors

commit f79216d
Author: andersonjeccel <116097999+andersonjeccel@users.noreply.github.com>
Date:   Fri Jun 21 10:35:19 2024 -0300

    semantic fixes

commit b228705
Author: Miroslav Fedeleš <miroslav.fedeles@gmail.com>
Date:   Tue Jun 18 17:20:10 2024 +0200

    Make the search regular expression match both "&" and "&amp;" for link replacement within an email body (#13858)

commit 58c1903
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Tue Jun 18 11:37:28 2024 -0300

    [UI] Increased icon size (#13825)

    * increased icon size

    * decrease by 1px

commit 2331cf3
Author: John Linhart <admin@escope.cz>
Date:   Tue Jun 18 14:42:43 2024 +0200

    Segment membership as a new filter for dynamic email content (#13528)

    * Merge pull request #1088 from mautic-inc/MAUT-4688

    Maut 4688 - Use segment membership as a filter for dynamic content in email

    * Changes needed after rebase to M5

    * Merge pull request #1407 from acquia/MAUT-5729

    MAUT-5729 Dynamic Content Error - Segment Membership filter not showing correct content

    * Fixing STAN

    * CS fixes

    * Test fix

    * test fix part 2

    * Adding back JS methods removed in a bad conflict resolution

    ---------

    Co-authored-by: Lukáš Drahý <lukas@drahy.net>
    Co-authored-by: Rohit Pavaskar <66303837+rohitp19@users.noreply.github.com>
    Co-authored-by: Ruth Cheesley <ruth@ruthcheesley.co.uk>

commit 3edfeec
Author: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Date:   Tue Jun 18 09:34:10 2024 -0300

    add js code to hide profile pic if missing (#13838)

commit fadcf26
Author: putzwasser <26040044+putzwasser@users.noreply.github.com>
Date:   Tue Jun 18 12:56:34 2024 +0200

    [UI] Replaces table action button `arrow-down` with `more-2` icon (#13841)

    * [UI] Replaces table action button `arrow-down` with `more-2` icon

    This replaces the icon for the action toggle button in tables (e.g. contact list table or segment list table) with a 3 dot icon.

    The previous arrow down icon indicates that an collapsed element would get unfolded/shown. This is not the case in these tables. The button shows more actions. In any UI that I know a 3 dot icon is used for that.

    The arrow down icon would be more suitable if it would show more details on click. Hence, this PR.

    * TASK: Reverts change for `page_actions.html.twig`

    Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>

    ---------

    Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>

* colors for the creation panel

* cs fix

* test

* cs fix

* Revert "colors for the creation panel"

This reverts commit c5782e6.
escopecz added a commit that referenced this pull request Jul 26, 2024
* Improve grammar for unhide (#13835)

* Improve grammar for unhide

* Fix test

* fix: LeadBundle template errors (#13862)

Co-authored-by: Ruth Cheesley <ruth@ruthcheesley.co.uk>

* [UI] fix CSS flexbox broken in campaign insert clone view (#13878)

* [UI] Replaces table action button `arrow-down` with `more-2` icon (#13841)

* [UI] Replaces table action button `arrow-down` with `more-2` icon

This replaces the icon for the action toggle button in tables (e.g. contact list table or segment list table) with a 3 dot icon.

The previous arrow down icon indicates that an collapsed element would get unfolded/shown. This is not the case in these tables. The button shows more actions. In any UI that I know a 3 dot icon is used for that.

The arrow down icon would be more suitable if it would show more details on click. Hence, this PR.

* TASK: Reverts change for `page_actions.html.twig`

Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>

---------

Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>

* add js code to hide profile pic if missing (#13838)

* Segment membership as a new filter for dynamic email content (#13528)

* Merge pull request #1088 from mautic-inc/MAUT-4688

Maut 4688 - Use segment membership as a filter for dynamic content in email

* Changes needed after rebase to M5

* Merge pull request #1407 from acquia/MAUT-5729

MAUT-5729 Dynamic Content Error - Segment Membership filter not showing correct content

* Fixing STAN

* CS fixes

* Test fix

* test fix part 2

* Adding back JS methods removed in a bad conflict resolution

---------

Co-authored-by: Lukáš Drahý <lukas@drahy.net>
Co-authored-by: Rohit Pavaskar <66303837+rohitp19@users.noreply.github.com>
Co-authored-by: Ruth Cheesley <ruth@ruthcheesley.co.uk>

* [UI] Increased icon size (#13825)

* increased icon size

* decrease by 1px

* Make the search regular expression match both "&" and "&amp;" for link replacement within an email body (#13858)

* Guide users to build optimized segments (#13860)

* Merge pull request #2172 from acquia/MAUT-11343

MAUT-11343 : Guide users to build optimized segments

* fix twig file issue

* Apply suggestions from code review

Co-authored-by: John Linhart <admin@escope.cz>

* push suggested changes

---------

Co-authored-by: John Linhart <admin@escope.cz>

* fix CSS flexbox broken in campaign insert clone view

* Revert "[UI] Replaces table action button `arrow-down` with `more-2` icon (#13841)"

This reverts commit fadcf26.

* Revert "Segment membership as a new filter for dynamic email content (#13528)"

This reverts commit 71031b7.

* Revert "[UI] Increased icon size (#13825)"

This reverts commit c00df3c.

* Revert "Make the search regular expression match both "&" and "&amp;" for link replacement within an email body (#13858)"

This reverts commit d3e6ceb.

* Revert "Guide users to build optimized segments (#13860)"

This reverts commit bdabc26.

* Revert "add js code to hide profile pic if missing (#13838)"

This reverts commit 76dd7d6.

---------

Co-authored-by: putzwasser <26040044+putzwasser@users.noreply.github.com>
Co-authored-by: John Linhart <admin@escope.cz>
Co-authored-by: Lukáš Drahý <lukas@drahy.net>
Co-authored-by: Rohit Pavaskar <66303837+rohitp19@users.noreply.github.com>
Co-authored-by: Ruth Cheesley <ruth@ruthcheesley.co.uk>
Co-authored-by: Miroslav Fedeleš <miroslav.fedeles@gmail.com>
Co-authored-by: Saurabh Gupta <48244990+dadarya0@users.noreply.github.com>

* DPMMA-1020 Fix search email with special characters in campaign action (#10306)

* fix: [DPMMA-1020] fix getLookupChoiceListAction for search with special characters

* fix: [DPMMA-1020] phpstan

* fix: focus item published (#13944)

* Update .gitpod.Dockerfile 5.1 branch (#13955)

* fix [DPMMA-2661] mapped field form 5.1 (#13938)

* fix: [DPMMA-2661] Correct form mapper Mautic 5

* feat: [DPMMA-2661] Correct CSFixer

* FIX: Removes onConfigSave which invokes htmlspecialchars and escapes tracking script (#13859)

This fixes #13355

This removes the HTML escaping logic in the onConfigSave method of `ConfigSubscriber`. This change prevents the UI from displaying escaped HTML in the custom tracking JS field after saving the form.

Previously, the form erroneously escaped HTML entities. By removing this code, users will now see the original HTML as expected when they revisit the form.

The main issue, however, was that re-saving  meant saving escaped HTML which would break inserting the tracking HTML code.

**Before**
1. Add custom HTML in `Configuration > Landing Page Settings > Analytics script (i.e. Google Analytics) `
2. Save
3. Open this view again → see escaped HTML
4. Save again
5. Open a landing page and see escaped HTML tracking code injected.

**After**
1. Add custom HTML in `Configuration > Landing Page Settings > Analytics script (i.e. Google Analytics) `
2. Save
3. Open this view again → see unescaped HTML
4. Save again
5. Open a landing page and see correct HTML tracking code injected.

* rename from tweet to tweets (#13967)

* Fix: Create custom fields for lookup list. (#13946)

* FIX: Makes `anniversary` date filter compatible with datetime (#13871)

* FIX: Makes `anniversary` date filter compatible with datetime

* TASK: Fix unit test

* FIX: $expectedResult docstring

---------

Co-authored-by: Ruth Cheesley <ruth@ruthcheesley.co.uk>
Co-authored-by: Frettyl <173093231+Frettyl@users.noreply.github.com>
Co-authored-by: Anderson, from Dropsolid <116097999+andersonjeccel@users.noreply.github.com>
Co-authored-by: putzwasser <26040044+putzwasser@users.noreply.github.com>
Co-authored-by: Lukáš Drahý <lukas@drahy.net>
Co-authored-by: Rohit Pavaskar <66303837+rohitp19@users.noreply.github.com>
Co-authored-by: Miroslav Fedeleš <miroslav.fedeles@gmail.com>
Co-authored-by: Saurabh Gupta <48244990+dadarya0@users.noreply.github.com>
Co-authored-by: Patryk Gruszka <patryk.gruszka@comarch.pl>
Co-authored-by: Tomasz Kowalczyk <39382654+tomekkowalczyk@users.noreply.github.com>
Co-authored-by: Martin Vooremäe <martin.vooremae@gmail.com>
Co-authored-by: Abhisek Mazumdar <abhisekmazumdar@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
code-review-passed PRs which have passed code review enhancement Any improvement to an existing feature or functionality ready-to-commit PR's with 2 successful tests, 1 approval, automated tests and docs and is ready to be merged T1 Low difficulty to fix (issue) or test (PR) user-interface Anything related to appearance, layout, and interactivity user-testing-passed PRs which have been successfully tested by the required number of people.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants