Make Tour link more visible [#3186076]

Comment	File	Size	Author
#38	3186076_38.patch	4.45 KB	dsandhya
#38	after-patch-tour-button.png	25.43 KB	dsandhya
#33	3186076-33.patch	1.98 KB	Gauravvvv
#30	After-Patch.PNG	29.97 KB	gaurav-mathur
#30	Before_Patch.PNG	17.39 KB	gaurav-mathur
#26	3186076--after--patch--pic.png	141.94 KB	vikashsoni
#26	3186076--before--patch--pic.png	138.94 KB	vikashsoni
#23	tour-3186076-23-2-more-prominent.png	78.64 KB	ressa
#23	tour-3186076-23-1-current.png	71.38 KB	ressa
#17	3186076-17.png	395.93 KB	himanshu_sindhwani
#13	3186076-13.patch	1.42 KB	Pooja Ganjage
#10	tour-button-2-patched-3186076-10.patch.png	72.06 KB	ressa
#10	tour-button-1-original-3186076-10.patch.png	76.52 KB	ressa
#8	After--patch-2.jpg	334.49 KB	ranjith_kumar_k_u
#8	After--patch-1.jpg	372.24 KB	ranjith_kumar_k_u
#8	Before--patch.jpg	463.07 KB	ranjith_kumar_k_u
#6	3186076-6.patch	2.34 KB	Pooja Ganjage
#2	3186076-2.patch	796 bytes	Pooja Ganjage
	tour-link-more-visible.png	159.53 KB	ressa

Comment #1

2 December 2020 at 16:51

ressa created an issue. See original summary.

Log in or register to post comments

Comment #2

Pooja Ganjage CreditAttribution: Pooja Ganjage at Asentech LLC commented 11 December 2020 at 17:54

File	Size
3186076-2.patch	796 bytes

Hi,

Creating a patch for this issue.

Please review the patch.

Let me know if any suggestions.

Thanks.

Log in or register to post comments

Comment #3

Pooja Ganjage CreditAttribution: Pooja Ganjage at Asentech LLC commented 11 December 2020 at 17:54

Status:

Active

» Needs review

Log in or register to post comments

Comment #4

ressa CreditAttribution: ressa at Ardea commented 12 December 2020 at 12:39

Issue summary:

View changes

Updating example link in Issue summary.

Log in or register to post comments

Comment #5

ressa CreditAttribution: ressa at Ardea commented 12 December 2020 at 12:46

Issue summary:	View changes
Status:	Needs review	» Needs work

Thanks @Pooja Ganjage. It does make the text in the upper right corner longer, but I still think it can be missed, and would prefer to try with a button placed prominently in the center of the screen, making it very obvious and unmissable.

Also, nothing happens if I click the "Take a tour of this page" link ...

Log in or register to post comments

Comment #6

Pooja Ganjage CreditAttribution: Pooja Ganjage at Asentech LLC commented 14 December 2020 at 18:07

File	Size
3186076-6.patch	2.34 KB

Hi,

Tried to implementing a tour link as suggested in #5 comment.

Please review the patch.

Let me know if any suggestions.

Thanks.

Log in or register to post comments

Comment #7

Pooja Ganjage CreditAttribution: Pooja Ganjage at Asentech LLC commented 14 December 2020 at 18:08

Status:

Needs work

» Needs review

Log in or register to post comments

Comment #8

ranjith_kumar_k_u CreditAttribution: ranjith_kumar_k_u at Zyxware Technologies commented 15 December 2020 at 09:04

File	Size
Before--patch.jpg	463.07 KB
After--patch-1.jpg	372.24 KB
After--patch-2.jpg	334.49 KB

The above patch works fine .

Before patch

After patch

after patch

Log in or register to post comments

Comment #9

15 December 2020 at 17:37

ressa opened merge request !161

Log in or register to post comments

Comment #10

ressa CreditAttribution: ressa at Ardea commented 15 December 2020 at 17:56

File	Size
tour-button-1-original-3186076-10.patch.png	76.52 KB
tour-button-2-patched-3186076-10.patch.png	72.06 KB

Thanks for testing @ranjith_kumar_k_u and @Pooja Ganjage for the code, great work. I realized that maybe it is a bit too intrusive at the center ... But your first suggestion of working with the original button in the upper right corner is good, so I have create a new patch, which makes the text longer and adds a class, giving it a blue background.

You can preview the update by clicking the link "View live preview (ready) via Tugboat" above:

Log in, username and password are both admin
Tour button at /admin/structure/views/view/frontpage or /admin/structure/block

Original Tour link

Tour link, more text and blue background

What do you think?

Log in or register to post comments

Comment #11

Pooja Ganjage CreditAttribution: Pooja Ganjage at Asentech LLC commented 15 December 2020 at 18:46

@ressa, that's a great looking, I am agree with showing tour link in upper right corner instead of center.

Log in or register to post comments

Comment #12

ressa CreditAttribution: ressa at Ardea commented 15 December 2020 at 19:56

Status:

Needs review

» Needs work

Sounds good @Pooja Ganjage. There does seem to be some work to do, regarding the Claro theme, where the background colour doesn't change ... I am not sure if that's a Claro issue, or something that should be fixed here?

Log in or register to post comments

Comment #13

Pooja Ganjage CreditAttribution: Pooja Ganjage at Asentech LLC commented 16 December 2020 at 14:45

File	Size
3186076-13.patch	1.42 KB

Hi,

@ressa, I create patch for fixing background colour that doesn't change in claro theme.

Please review.

Thanks.

Log in or register to post comments

Comment #14

Pooja Ganjage CreditAttribution: Pooja Ganjage at Asentech LLC commented 16 December 2020 at 14:45

Status:

Needs work

» Needs review

Log in or register to post comments

Comment #15

ressa CreditAttribution: ressa at Ardea commented 16 December 2020 at 17:36

Status:

Needs review

» Needs work

Thanks! Perhaps we can try using the new system with Gitlab? I am not sure if you can click the "3186076-make-tour-link" link above, and edit directly there, or perhaps you have to create a new branch? It would be an interesting experiment, to figure out if it's possible. Do you want to have a go at it?

Log in or register to post comments

Comment #16

Pooja Ganjage CreditAttribution: Pooja Ganjage at Asentech LLC commented 16 December 2020 at 18:01

Hi,

@ressa, I want to go for it, but I don't have any idea Drupal GitLab, It would be nice if you give me any idea about this.

Thanks.

Log in or register to post comments

Comment #17

himanshu_sindhwani CreditAttribution: himanshu_sindhwani for Drupal India Association commented 16 December 2020 at 18:17

File	Size
3186076-17.png	395.93 KB

+++ b/core/modules/tour/tour.module
@@ -50,9 +50,9 @@ function tour_toolbar() {
+        'class' => ['toolbar-icon', 'toolbar-icon-help', 'button--primary'], ¶

Please remove extra space at the end of line.

+++ b/core/themes/claro/css/theme/toolbar.icons.theme.css
@@ -45,7 +45,6 @@
-  background-color: transparent;

We can not remove this background-color: transparent; since this may cause problems at some other pages.

+++ b/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
@@ -34,7 +34,6 @@
-  background-color: transparent;

same here we can not remove

Here is an example if we remove background-color: transparent; then edit link gets white background.
example

Log in or register to post comments

Comment #18

ressa CreditAttribution: ressa at Ardea commented 17 December 2020 at 12:47

Thanks for the review @himanshu_sindhwani, your comments are very useful. For now, I hope it's okay if we first try to get the proposed patch in #13 working in Gitlab integration, and then fix it based on your feedback.

@Pooja Ganjage: The new system can be a bit overwhelming to everyone, but very powerful, so don't worry about mistakes. I should know, I made many mistakes when I started using it. You might need to activate "Git access" under your account, if you haven't already, I am not sure if that's necessary.

These should be the steps:

Click the link to the branch in GitLab at the top of the page, called 3186076-make-tour-link
Click to find the files: core > themes > claro > css > theme > toolbar.icons.theme.css (should be https://git.drupalcode.org/issue/drupal-3186076/-/blob/3186076-make-tour...)
Click "Edit", update the file, and click "Commit changes". It should be included in the Merge Request here (MR 161)
Repeat for toolbar.icons.theme.pcss.css

Also, check out Issue forks & merge requests, there is much useful information on that page about GitLab Integration.

Log in or register to post comments

Comment #19

Pooja Ganjage CreditAttribution: Pooja Ganjage at Asentech LLC commented 21 December 2020 at 15:22

Status:

Needs work

» Needs review

Log in or register to post comments

Comment #20

ressa CreditAttribution: ressa at Ardea commented 21 December 2020 at 16:46

Thanks @Pooja Ganjage, great that you got the new system at git.drupalcode.org working for you.

@himanshu_sindhwani: I see what you mean with the "Edit" link background in the upper right corner ... do you have any suggestions on how to solve this?

Log in or register to post comments

Comment #21

Pooja Ganjage CreditAttribution: Pooja Ganjage at Asentech LLC commented 21 December 2020 at 17:43

Hi @ressa,

I have solved that background issue for edit link..in latest commit changes...

Can you please look into it.

Let me know if any suggestions on it.

Log in or register to post comments

Comment #22

bnjmnm

he/him

English

Ann Arbor, MI

CreditAttribution: bnjmnm at Acquia commented 21 December 2020 at 19:40

Issue tags:		+Needs usability review
Related issues:		+#2069073: Allow Tours to be taken by users that cannot access the Toolbar (e.g. anonymous users), +#2940433: Make block for tour button (copy of patch in 2069073 for D8.3)

There may be some overlap with these issues: #2069073: Allow Tours to be taken by users that cannot access the Toolbar (e.g. anonymous users), #2940433: Make block for tour button (copy of patch in 2069073 for D8.3). It would be worth reviewing those and seeing if that influences what is happening here.

Also tagging "Needs usability review". A change like this will require UX signoff. In my experience, the easiest way to get UX signoff is presenting the issue for discussion at a UX meeting. These meetings happen weekly, every Tuesday at 15:00UTC. Shortly before the meeting time, a link to the meeting will be posted in the #UX channel of Drupal Slack.

Log in or register to post comments

Comment #23

ressa CreditAttribution: ressa at Ardea commented 20 January 2021 at 11:57

Issue summary:

View changes

File	Size
tour-3186076-23-1-current.png	71.38 KB
tour-3186076-23-2-more-prominent.png	78.64 KB

Log in or register to post comments

Comment #24

20 January 2021 at 11:57

Version:

9.2.x-dev

» 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Log in or register to post comments

Comment #25

20 January 2021 at 11:57

Version:

9.3.x-dev

» 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Log in or register to post comments

Comment #26

vikashsoni CreditAttribution: vikashsoni as a volunteer and at Zyxware Technologies commented 17 January 2022 at 07:03

File	Size
3186076--before--patch--pic.png	138.94 KB
3186076--after--patch--pic.png	141.94 KB

Applied patch #13 in drupal-9.3.x-dev
Applied successfully
After patch ' Tour link is more visible '
Thanks for the patch
For ref sharing screenshot ....

Log in or register to post comments

Comment #27

17 January 2022 at 07:03

Version:

9.4.x-dev

» 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Log in or register to post comments

Comment #28

17 January 2022 at 07:03

Version:

9.5.x-dev

» 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Log in or register to post comments

Comment #29

gaurav-mathur CreditAttribution: gaurav-mathur at Dotsquares Ltd. commented 30 November 2022 at 12:46

Assigned:

Unassigned

» gaurav-mathur

Log in or register to post comments

Comment #30

gaurav-mathur CreditAttribution: gaurav-mathur at Dotsquares Ltd. commented 30 November 2022 at 12:48

Assigned:

gaurav-mathur

» Unassigned

File	Size
Before_Patch.PNG	17.39 KB
After-Patch.PNG	29.97 KB

Patch #13 applied successfully on on Drupal 10.0.x-dev and PHP 8.1.6.
The patch work properly for me.
Refer to screenshots.

Log in or register to post comments

Comment #31

smustgrave CreditAttribution: smustgrave at Mobomo commented 6 December 2022 at 00:08

Status:

Needs review

» Needs work

MR needs to be updated for 10.1.x and still needs usability review.

Log in or register to post comments

Comment #32

ressa CreditAttribution: ressa at Ardea commented 25 February 2023 at 22:21

I just installed the Honeypot module, and by chance (I forget where) I saw that it offered a Tour. It made me remember that the Tour link is hard to find, and it took me some time to scan the entire screen, when I finally found the "Tour" link, hidden in the upper right corner. It's so sad that it sits hidden up there ...

Log in or register to post comments

Comment #33

Gauravvvv CreditAttribution: Gauravvvv at Axelerant for Drupal India Association commented 17 March 2023 at 03:20

Status:

Needs work

» Needs review

File	Size
3186076-33.patch	1.98 KB

I have attached patch for 10.1.x. please review

Patch #18, no longer applies

 git apply -v 161.patch
Checking patch core/modules/tour/tour.module...
Checking patch core/themes/claro/css/theme/toolbar.icons.theme.css...
Checking patch core/themes/claro/css/theme/toolbar.icons.theme.pcss.css...
Checking patch core/modules/contextual/css/contextual.toolbar.css...
error: while searching for:
}
.toolbar .toolbar-bar .contextual-toolbar-tab .toolbar-item {
  margin: 0;
}
.toolbar .toolbar-bar .contextual-toolbar-tab .toolbar-item.is-active {
  background-image: -webkit-linear-gradient(rgb(78, 159, 234) 0%, rgb(69, 132, 221) 100%);

error: patch failed: core/modules/contextual/css/contextual.toolbar.css:12
error: core/modules/contextual/css/contextual.toolbar.css: patch does not apply

Log in or register to post comments

Comment #34

ressa CreditAttribution: ressa at Ardea commented 17 March 2023 at 13:05

1 file was hidden/shown/deleted

File	Size
3186076-33.patch	1.98 KB

Thanks @Gauravvvv, I updated the existing merge request target branch from 9.2 to 10.1, and rebased it by clicking "Rebase without pipeline":

To rebase a merge request’s branch without triggering a CI/CD pipeline, select Rebase without pipeline from the merge request reports section. This option is available when fast-forward merge is not possible but a conflict-free rebase is possible.

So the current MR !161 should now work with Drupal 10.1.

Log in or register to post comments

Comment #35

ressa CreditAttribution: ressa at Ardea commented 17 March 2023 at 13:22

Status:

Needs review

» Needs work

Perhaps we can now look at the review by @himanshu_sindhwani in #17, about not removing the transparency?

Log in or register to post comments

Comment #36

smustgrave CreditAttribution: smustgrave at Mobomo commented 17 March 2023 at 13:41

Just FYI #3325445: [Policy] Remove tour module from core

Log in or register to post comments

Comment #37

17 March 2023 at 13:41

Version:

10.1.x-dev

» 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.