User Interface issueshttps://lab.civicrm.org/dev/user-interface/-/issues2024-03-07T13:35:48Zhttps://lab.civicrm.org/dev/user-interface/-/issues/68Do these really need to be accordions?2024-03-07T13:35:48ZshaneonabikeDo these really need to be accordions?During the work in #67 there was some discussion that the following accordions should perhaps be removed since they aren't that useful (they could be set back to something else).
* [ ] This shouldn't be accordion - Financial/Form/Financ...During the work in #67 there was some discussion that the following accordions should perhaps be removed since they aren't that useful (they could be set back to something else).
* [ ] This shouldn't be accordion - Financial/Form/FinancialAccount.tpl - civicrm/admin/financial/financialAccount?reset=1 + add
* [ ] Does this need to be an accordion? - Case/Form/CaseFilter.tpl - civicrm/case
* [ ] Does this need to be an accordion? - Contribute/Form/ContributionPage/Premium.tpl - civicrm/admin/contribute/custom?action=update&reset=1&id=1&selectedChild=premium
* [ ] Does this need to be an accordion? - SMS/Form/Group.tpl - civicrm/sms/send?reset=1 (install & config SMS dummy ext)
* [ ] Does this need to be an accordion? - SMS/Form/Schedule.tpl - civicrm/sms/send?reset=1
cc @nicol @noah @herbdoolhttps://lab.civicrm.org/dev/user-interface/-/issues/62Contact tabs counts: separate the count of active vs inactive entities2023-11-02T15:23:28ZbgmContact tabs counts: separate the count of active vs inactive entitiesContact tabs can be inconsistent when displaying a number:
- If a contact does not have any active memberships or relationships, it displays zero and is grey
- If a contact has closed cases, it displays the number in blue
I would like ...Contact tabs can be inconsistent when displaying a number:
- If a contact does not have any active memberships or relationships, it displays zero and is grey
- If a contact has closed cases, it displays the number in blue
I would like propose that we show the number of inactive/closed entities separately. Something like this:
![image](/uploads/dd7c103334c073950c3b87bbdd3c374a/image.png)
Perhaps `3 / 5` is not the best visual representation, because to most people it will read as "3 out of 5". Maybe a pill or something else would be more clear, where the inactive count would be grey, and the active would be blue (or whatever the theme uses, because it's just CSS).
To be honest, I rarely have had users complain about this, but personally I find it very confusing, especially for memberships. Say I have duplicate records, and I want to find the one who had a membership, it's an additional click to view memberships. Conversely, it's also annoying for cases, where we aim to work towards 0 (i.e. getting cases resolved).
Previous discussion: https://chat.civicrm.org/civicrm/pl/53twa5xhffguzbqffdh15b3xwr (user-interface channel)https://lab.civicrm.org/dev/user-interface/-/issues/61Modals: move from Jquery UI Dialog to something else?2024-02-20T00:52:26ZnicolModals: move from Jquery UI Dialog to something else?At present Civi's modals (aka popups) are generated using [JQuery UI Dialog](https://jqueryui.com/dialog/). This inserts the modal's markup just above the bottom `</body>` closing tag, which is outside of `#crm-container` and `#bootstrap...At present Civi's modals (aka popups) are generated using [JQuery UI Dialog](https://jqueryui.com/dialog/). This inserts the modal's markup just above the bottom `</body>` closing tag, which is outside of `#crm-container` and `#bootstrap-theme` divs. This is perhaps related to [an issue where](https://chat.civicrm.org/civicrm/pl/fywkz1tcetdp5ms6s39zqfxcbw) modals can't render Bootstrap elements from Form Builder output.
![image](/uploads/71aee3e41f4455dfe65476ab6e821fd9/image.png)
JQuery UI dates back to 2007, is tricky to theme, and doesn't include modern accessibility Aria labels. What are the other options?:
1. replace with [Bootstrap 3's modal component](https://getbootstrap.com/docs/3.4/javascript/#modals) that ships with Civi. Upside is it's more accessibile, reduces code, is easier to retheme or share styles with the base theme.
Downside is there's no grabber to resize the modal, and you can't have multiple modals open at the same time, which Civi likes to do at present. Multiple modals is [considered bad UX](https://app.uxcel.com/courses/ui-components-n-patterns/modals--dialogs-best-practices-166) - Bootstrap5 offers [toggling between multiple modals](https://getbootstrap.com/docs/5.3/components/modal/#toggle-between-modals). There's also scripts that extend Bootstrap Modal to support multiple, ie https://codepen.io/neni9/pen/dJVwqr.
![image](/uploads/4dee863b5b5bd40d0d8a0d95084a0c7b/image.png)
2. use an Angular modal method (e.g. https://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial)
3. use another modal library
4. use the html element `<dialog>` (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog). Accessible by default, requires no javascript library (can use the native [showModal](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) method), widely supported, should never grow old/need replacing, easy to theme… (am writing the upsides in the hope someone replies below with the downsides).
5. change nothing, just ensure that #bootstrap-theme can be applied to the contents of a modal.Improve Civi's front-endhttps://lab.civicrm.org/dev/user-interface/-/issues/46Modernise ship-with-civi theme2023-09-20T15:55:57ZeileenModernise ship-with-civi themeI've opened this issue to see if we can agree on a way to improve the theme that ships with core (or to ship an additional theme with core) without the discussion spinning out into the technical sprawl that always seems to paralyse us on...I've opened this issue to see if we can agree on a way to improve the theme that ships with core (or to ship an additional theme with core) without the discussion spinning out into the technical sprawl that always seems to paralyse us on this issue...
**Problem statement**
CiviCRM ships with a theme looks dated and is off-putting to new adopters- some specific criticisms
- Colours are …. Beige. Current fashion would seem to be more white space (also drab in bootstrap)
- Button styling seems dated
- Some people seem to prefer side tabs - not sure if this is consensus
Goal of issue/discussion
- Find some achievable improvements
- Don’t get bogged down on solving everything
Potential solutions
- Improve the Greenwich theme - possibly as a paralell theme - addressing the most egregious issues (e.g just swapping colours / using more white makes it look more modern)
- Add an existing theme to core (Shoreditch, Aah, Finsbury park, Christian’s theme). Note that if we do this
1) it will mean that the theme becomes part of core codebase & would be maintained as such, with a priority place on maintainability and ensuring not too much css is downloaded (which might not always be in line with the designer’s vision).
2) bringing an existing theme into core would require the mainintainer agreeing to their theme being forked into a core extension & the core extension being maintained according to core maintenance priorities & principles. This may not be something current theme maintainers want as some design elements are likely to be sacrificed in the pursuit of maintainability / compatibility.
2) Anything that ships in core must work on all CMS and have acceptable page load speed for anonymouse users.
- Build up a minimal theme - ie what is the min theming we need to do to make it ‘load’ & move the rest of the css to greenwich (this is assuming a minimal theme would be better….)
Note that this ticket https://lab.civicrm.org/dev/user-interface/-/issues/33 covers previously discussion. Those discussions focussed on making it easier for themers to theme CiviCRM whereas the focus on this is what can we do to make the CiviCRM that ships with core look better.https://lab.civicrm.org/dev/user-interface/-/issues/44Custom Field Groups Screen - Flip "Preview" and "Settings"2021-12-26T21:28:17ZJonGoldCustom Field Groups Screen - Flip "Preview" and "Settings"This is an "is it everyone or just me" situation - and I think we need to ask folks who are newer to CiviCRM. But personally, I don't use the "Preview" link on the Custom Field Groups, but I *do* use "Settings". It's pretty quick to fl...This is an "is it everyone or just me" situation - and I think we need to ask folks who are newer to CiviCRM. But personally, I don't use the "Preview" link on the Custom Field Groups, but I *do* use "Settings". It's pretty quick to flip them, so mainly looking for UX feedback.
@bgm Do you have the ability to grep the web server logs for Spark over a long enough time period to see which link is used more by Spark users?
More broadly - I think it's worth discussing Spark as a platform for collecting anonymized user behavior data (with consent and transparency obviously).JonGoldJonGoldhttps://lab.civicrm.org/dev/user-interface/-/issues/42Proposal to re-design the CiviCRM Mailing, Unsubscribe form to be more in-lin...2021-09-09T13:51:47Zjustinfreeman (Agileware)Proposal to re-design the CiviCRM Mailing, Unsubscribe form to be more in-line with what users experience on other mailing / newsletter systemsThis request is to initiate an discussion on the re-design of the CiviCRM Mailing, Unsubscribe form so that it is more in-line with what users experience with other mailing / newsletter systems.
If you are subscribed to a CiviCRM mailin...This request is to initiate an discussion on the re-design of the CiviCRM Mailing, Unsubscribe form so that it is more in-line with what users experience with other mailing / newsletter systems.
If you are subscribed to a CiviCRM mailing list and click the Unsubscribe link, the user experience flow is:
1. The Mailing Group Title and Group Description are shown, or if set, the Mailing Public Title and Public Description are shown
2. You are directed to a page where a masked email address is shown.
3. You need to enter the subscribed email address.
4. Click Unsubscribe.
5. The system then confirms the unsubscription, but in a way that also is not clear as it re-loads the unsubscribe form again.
The requirement to enter the subscribed email address is problematic for a number of reasons:
1. It is masked, so if the user cannot tell exactly what it was sent too. In some cases, the user may not know what address it was when they click on the link - perhaps the email is forwarded internally from a mailbox that has since been archived or the mailbox is unmonitored, team mailbox etc.
2. Re-entering the email address is another action the user has to take, if they want to unsubscribe and have clicked the link then that's all the confirmation that should be required at this point.
The improvement I would really like to see is clearer messaging and no user input, quicker process. For example:
1. Click unsubscribe.
2. CiviCRM Unsubscribe page opens, confirming the unsubscribe has been done. That's it.
3. Optionally, a feedback form can shown for a quick survey or reason for unsubscribing (good use of a Profile). User may just close the window at this step.
You could include a link on the Unsubcribe form to say, "Click here to re-subscribe, if you made a mistake" or something similar. I've seen this on a few other CRM Unsubscribe forms.
What do people think? Do we at least agree the current user experience needs to be improved? Ping @bgm @artfulrobot @mattwire - you guys seem to care about user experience too :smile:
# Screenshots of the current user experience in CiviCRM, Unsubscribe page
(Copied from Matt's [recent PR](https://github.com/civicrm/civicrm-core/pull/21174))
![129920549-c3ee348d-a5a0-4ac8-8b00-e97adfb45331](/uploads/02b3c3abd8628b691e4163baad267118/129920549-c3ee348d-a5a0-4ac8-8b00-e97adfb45331.png)
![129920610-db419978-678e-4fa2-8cb2-3d1cf58842c1](/uploads/43c96495d009fa8b4fffb492c75ae773/129920610-db419978-678e-4fa2-8cb2-3d1cf58842c1.png)
# By comparison, here's what other mailing systems have on their Unsubscribe page
## Mailchimp
![Screenshot_20210820_173624](/uploads/60abb50e4a4e288f6797867ac986140c/Screenshot_20210820_173624.png)
## Another CRM
![Screenshot_20210820_173613](/uploads/e1635e316e86e7a150e1cda09443fee3/Screenshot_20210820_173613.png)
Agileware Ref: CIVIBLD-271https://lab.civicrm.org/dev/user-interface/-/issues/32Instructions for making a donation differ from button name2020-10-14T23:22:26ZsudomanInstructions for making a donation differ from button nameThis is a minor issue, but when checking out with a contribution form, the instructions say:
"Please verify the information below carefully. Click Go Back if you need to make changes. To complete your contribution, click the Continue bu...This is a minor issue, but when checking out with a contribution form, the instructions say:
"Please verify the information below carefully. Click Go Back if you need to make changes. To complete your contribution, click the Continue button below."
However there is no "Continue" button, it is called "Make Contribution".
Thanks! : )https://lab.civicrm.org/dev/user-interface/-/issues/30Ability to Send Invoice with modified subject and CC it2020-09-22T02:41:28ZsunilAbility to Send Invoice with modified subject and CC itOverview
----------------------------------------
Ability to Send Invoice with CC email and with option to alter subject line.
Current behaviour
----------------------------------------
When Invoice Setting is Enabled at `CiviContribute...Overview
----------------------------------------
Ability to Send Invoice with CC email and with option to alter subject line.
Current behaviour
----------------------------------------
When Invoice Setting is Enabled at `CiviContribute Component Settings`, We get option to `Print Invoice` Or `Email Invoice`.
When we click on `Email Invoice`, we can choose From Address and Add additional Comment.
When Email Send:
For online payment form:
- Subject:`Contribution Invoice: Help Support CiviCRM!- Test User`
- BCC and CC emailed copied from Online page and used to send email.
For Offline Submission:
- Subject:`Invoice- Test User`
- BCC and CC : No possible
You can modify the subject, for that we need to alter the subject line in invoice template.
New behaviour
----------------------------------------
You can override Email Subject from UI, its optional, if you don't provide subject, default subject form invoice template get used.
CC Field is available. that will override online page CC email, and for offline payment its new option to send CC email.
![Screenshot_2020-08-29_at_7.54.52_AM](/uploads/0bcccfd49bc7a72697cdd97f604e12f3/Screenshot_2020-08-29_at_7.54.52_AM.png)
----------------------------------------
https://github.com/civicrm/civicrm-core/pull/182865.31.0https://lab.civicrm.org/dev/user-interface/-/issues/29Rewording of the "state" selector?2020-08-21T14:30:02ZsudomanRewording of the "state" selector?Some people not living in the US are confused or annoyed that it is required to select the "state" that they live in, since the listed options are municipalities in their country / state, and they might only recognized them as being near...Some people not living in the US are confused or annoyed that it is required to select the "state" that they live in, since the listed options are municipalities in their country / state, and they might only recognized them as being nearby cities. To them, the language seems American-centric.
One possible change could be:
````
- State/Province
+ State/Province/Region/Municipality
````
Thanks! : )https://lab.civicrm.org/dev/user-interface/-/issues/8Create New Donation Form Option with Better Design2022-11-08T22:36:19ZroshaniCreate New Donation Form Option with Better Design[Improvements_to_CiviCRM_Donation_Forms.docx](/uploads/13d08f094f6ecde376bf84304daaec6e/Improvements_to_CiviCRM_Donation_Forms.docx)
Improvements to CiviCRM Donation Forms
1. Convert Donation Amounts location and styling
- Change the d...[Improvements_to_CiviCRM_Donation_Forms.docx](/uploads/13d08f094f6ecde376bf84304daaec6e/Improvements_to_CiviCRM_Donation_Forms.docx)
Improvements to CiviCRM Donation Forms
1. Convert Donation Amounts location and styling
- Change the donation amount radio buttons from radio buttons to buttons with donation amounts
- Move the donation amounts below One-Time and Monthly buttons
https://ccrjustice.org/donate?track1=website&track2=wheader&track3=2016-DEC-16
Give a donation in the Amount of:
$100.00
$250.00
$500.00
$1,000.00
$5,000.00
Other Amount
2. One-Time & Monthly Donation Buttons
1. Add One-Time & Monthly Buttons above the donation amounts
Current CiviCRM Example:
Currently there is a checkbox for creating a recurring donation. Also note that donation amounts appear as radio buttons above the recurring options.
https://ccrjustice.org/donate?track1=website&track2=wheader&track3=2016-DEC-16
I want to join the CCR Justice Sustainers and contribute this amount every month
Monthly giving provides reliable funding which allows CCR to plan, leverage and allocate resources in a way that means more hope for our clients, more support for movements, more justice and accountability.
Examples:
https://secure.humanesociety.org/site/Donation2;jsessionid=00000000.app325b https://action.aclu.org/give/now
2. If someone selects Monthly, it will change the donation amounts shown.
3. Default will be One-Time donation button option.https://lab.civicrm.org/dev/user-interface/-/issues/7Ability to exclude activities that appear on the actions button on a contact ...2019-10-07T13:29:15ZHeatherOliverAbility to exclude activities that appear on the actions button on a contact recordAll activity types that are added to CiviCRM are included in the Actions button when you view a contact record. For sites with a lot of activities (particularly those which are used in connection with Drupal webforms andnot normally trig...All activity types that are added to CiviCRM are included in the Actions button when you view a contact record. For sites with a lot of activities (particularly those which are used in connection with Drupal webforms andnot normally triggered in CiviCRM directly) this becomes a bit frustrating to manage.
Adding / filtering activities in other places uses the look up function, meaning the the length of the list in those places isn't really an issue.
See two attached images as an example. This isn't even all the activities for this site.
![image-1](/uploads/9b605ca4b8c666484a20ffb6be744651/image-1.PNG)![image-2](/uploads/56b30fe891eeaa9bbab310c74328cfb5/image-2.PNG)https://lab.civicrm.org/dev/user-interface/-/issues/6Remove print icon2019-10-13T18:19:26ZnicolRemove print iconThis was raised by @smaen123 at #Summit19. There is an open #PR needing concept approval [on GH](https://github.com/civicrm/civicrm-core/pull/15322). @Kilakwabt mentioned another issue related to this he might want to elaborate on here o...This was raised by @smaen123 at #Summit19. There is an open #PR needing concept approval [on GH](https://github.com/civicrm/civicrm-core/pull/15322). @Kilakwabt mentioned another issue related to this he might want to elaborate on here or via security@civicrm.org depending on its current status.5.20.0https://lab.civicrm.org/dev/user-interface/-/issues/5Replace the basic find contacts search2019-10-10T09:22:10ZgibsonoliverReplace the basic find contacts searchjaapjansmajaapjansmahttps://lab.civicrm.org/dev/user-interface/-/issues/4Enhancement - Quick search contact lookup2019-10-07T13:26:00ZrebeccatregennaEnhancement - Quick search contact lookupAllow quick search to be used with full names rather than by leading last name; e.g. allow users to search for Oliver Gibson.Allow quick search to be used with full names rather than by leading last name; e.g. allow users to search for Oliver Gibson.https://lab.civicrm.org/dev/user-interface/-/issues/3Support Menu Addition - Bug Reporting2022-01-04T20:14:54ZrebeccatregennaSupport Menu Addition - Bug ReportingAdd menu option under 'Support' titled 'Report an issue' linking to existing 'View issues and report bugs'Add menu option under 'Support' titled 'Report an issue' linking to existing 'View issues and report bugs'https://lab.civicrm.org/dev/user-interface/-/issues/2Modernised (originally proposed Remove) social media share footer from front-...2020-11-22T19:47:11ZnicolModernised (originally proposed Remove) social media share footer from front-end pages - make it an extension?The social media share footer looks quite dated so is often heavily styled - or turned off. Should this be removed or moved to an extension?
![image](/uploads/347c1116a058a408301abd78f9e59e67/image.png)
UPDATE - current proposal discus...The social media share footer looks quite dated so is often heavily styled - or turned off. Should this be removed or moved to an extension?
![image](/uploads/347c1116a058a408301abd78f9e59e67/image.png)
UPDATE - current proposal discussion starts around https://lab.civicrm.org/dev/user-interface/-/issues/2#note_491445.33.0