Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tab redesign: removing icon, orange text in dark mode. #8533

Merged
merged 2 commits into from
Feb 7, 2025
Merged

Tab redesign: removing icon, orange text in dark mode. #8533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
829d9f1
Tab redesign: removing icon, orange text in dark mode.
isoos Feb 6, 2025
63e4d08
Also remove admin lock icon.
isoos Feb 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions app/lib/frontend/templates/views/shared/detail/tabs.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ d.Node detailTabsNode({
children: tabs.map(
(t) => d.li(
classes: t.titleClasses,
attributes: {
if (t.isPrivate) 'title': 'For authorized users only.',
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this is slightly misleading.

I would like the tooltip to reflect the tab title, not the reason for the different color.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Do you have some examples in mind for that different text?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think we should have a title text for each tab:

Something along the lines of:

Readme: "Description of the package"
Changelog: "Describes changes between versions"
Example: "An example of how to use this package"
Installing: "How to use this package in your own project"
Versions: "All published versions of this package"
Scores: "Automated analysis and download metrics"
Admin: "Admin settings for this package - only for admins of this package"
Activity log: "Historical admin and publication events - only for admins of this package"

Copy link
Contributor

Choose a reason for hiding this comment

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

Sorry that I was not more clear, but I don't think it should block the landing of this PR. I can live with the titles as they are.

},
child: t.titleNode,
),
),
Expand Down
8 changes: 4 additions & 4 deletions app/test/frontend/golden/my_activity_log_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,16 +158,16 @@ <h1 class="title">admin</h1>
<div class="detail-tabs-wide-header">
<div class="detail-container">
<ul class="detail-tabs-header">
<li class="detail-tab tab-link detail-tab-my-publishers-title -private">
<li class="detail-tab tab-link detail-tab-my-publishers-title -private" title="For authorized users only.">
<a href="/my-publishers" role="button">Publishers</a>
</li>
<li class="detail-tab tab-link detail-tab-my-packages-title -private">
<li class="detail-tab tab-link detail-tab-my-packages-title -private" title="For authorized users only.">
<a href="/my-packages" role="button">Packages</a>
</li>
<li class="detail-tab tab-link detail-tab-my-liked-packages-title -private">
<li class="detail-tab tab-link detail-tab-my-liked-packages-title -private" title="For authorized users only.">
<a href="/my-liked-packages" role="button">Likes</a>
</li>
<li class="detail-tab tab-button detail-tab-my-activity-log-title -active -private">Activity log</li>
<li class="detail-tab tab-button detail-tab-my-activity-log-title -active -private" title="For authorized users only.">Activity log</li>
</ul>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions app/test/frontend/golden/my_liked_packages.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,14 +159,14 @@ <h1 class="title">user</h1>
<div class="detail-tabs-wide-header">
<div class="detail-container">
<ul class="detail-tabs-header">
<li class="detail-tab tab-link detail-tab-my-publishers-title -private">
<li class="detail-tab tab-link detail-tab-my-publishers-title -private" title="For authorized users only.">
<a href="/my-publishers" role="button">Publishers</a>
</li>
<li class="detail-tab tab-link detail-tab-my-packages-title -private">
<li class="detail-tab tab-link detail-tab-my-packages-title -private" title="For authorized users only.">
<a href="/my-packages" role="button">Packages</a>
</li>
<li class="detail-tab tab-button detail-tab-my-liked-packages-title -active -private">Likes</li>
<li class="detail-tab tab-link detail-tab-my-activity-log-title -private">
<li class="detail-tab tab-button detail-tab-my-liked-packages-title -active -private" title="For authorized users only.">Likes</li>
<li class="detail-tab tab-link detail-tab-my-activity-log-title -private" title="For authorized users only.">
<a href="/my-activity-log" role="button">Activity log</a>
</li>
</ul>
Expand Down
8 changes: 4 additions & 4 deletions app/test/frontend/golden/my_packages.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,14 +158,14 @@ <h1 class="title">user</h1>
<div class="detail-tabs-wide-header">
<div class="detail-container">
<ul class="detail-tabs-header">
<li class="detail-tab tab-link detail-tab-my-publishers-title -private">
<li class="detail-tab tab-link detail-tab-my-publishers-title -private" title="For authorized users only.">
<a href="/my-publishers" role="button">Publishers</a>
</li>
<li class="detail-tab tab-button detail-tab-my-packages-title -active -private">Packages</li>
<li class="detail-tab tab-link detail-tab-my-liked-packages-title -private">
<li class="detail-tab tab-button detail-tab-my-packages-title -active -private" title="For authorized users only.">Packages</li>
<li class="detail-tab tab-link detail-tab-my-liked-packages-title -private" title="For authorized users only.">
<a href="/my-liked-packages" role="button">Likes</a>
</li>
<li class="detail-tab tab-link detail-tab-my-activity-log-title -private">
<li class="detail-tab tab-link detail-tab-my-activity-log-title -private" title="For authorized users only.">
<a href="/my-activity-log" role="button">Activity log</a>
</li>
</ul>
Expand Down
8 changes: 4 additions & 4 deletions app/test/frontend/golden/my_publishers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,14 +158,14 @@ <h1 class="title">user</h1>
<div class="detail-tabs-wide-header">
<div class="detail-container">
<ul class="detail-tabs-header">
<li class="detail-tab tab-button detail-tab-my-publishers-title -active -private">Publishers</li>
<li class="detail-tab tab-link detail-tab-my-packages-title -private">
<li class="detail-tab tab-button detail-tab-my-publishers-title -active -private" title="For authorized users only.">Publishers</li>
<li class="detail-tab tab-link detail-tab-my-packages-title -private" title="For authorized users only.">
<a href="/my-packages" role="button">Packages</a>
</li>
<li class="detail-tab tab-link detail-tab-my-liked-packages-title -private">
<li class="detail-tab tab-link detail-tab-my-liked-packages-title -private" title="For authorized users only.">
<a href="/my-liked-packages" role="button">Likes</a>
</li>
<li class="detail-tab tab-link detail-tab-my-activity-log-title -private">
<li class="detail-tab tab-link detail-tab-my-activity-log-title -private" title="For authorized users only.">
<a href="/my-activity-log" role="button">Activity log</a>
</li>
</ul>
Expand Down
4 changes: 2 additions & 2 deletions app/test/frontend/golden/pkg_activity_log_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,10 +231,10 @@ <h3 class="detail-lead-title">Metadata</h3>
<li class="detail-tab tab-link detail-tab-analysis-title">
<a href="/packages/oxygen/score" role="button">Scores</a>
</li>
<li class="detail-tab tab-link detail-tab-admin-title -private">
<li class="detail-tab tab-link detail-tab-admin-title -private" title="For authorized users only.">
<a href="/packages/oxygen/admin" role="button">Admin</a>
</li>
<li class="detail-tab tab-button detail-tab-activity-log-title -active -private">Activity Log</li>
<li class="detail-tab tab-button detail-tab-activity-log-title -active -private" title="For authorized users only.">Activity Log</li>
</ul>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/test/frontend/golden/pkg_admin_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,8 +231,8 @@ <h3 class="detail-lead-title">Metadata</h3>
<li class="detail-tab tab-link detail-tab-analysis-title">
<a href="/packages/oxygen/score" role="button">Scores</a>
</li>
<li class="detail-tab tab-button detail-tab-admin-title -active -private">Admin</li>
<li class="detail-tab tab-link detail-tab-activity-log-title -private">
<li class="detail-tab tab-button detail-tab-admin-title -active -private" title="For authorized users only.">Admin</li>
<li class="detail-tab tab-link detail-tab-activity-log-title -private" title="For authorized users only.">
<a href="/packages/oxygen/activity-log" role="button">Activity log</a>
</li>
</ul>
Expand Down
4 changes: 2 additions & 2 deletions app/test/frontend/golden/pkg_show_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,10 +203,10 @@ <h3 class="detail-lead-title">Metadata</h3>
<li class="detail-tab tab-link detail-tab-analysis-title">
<a href="/packages/oxygen/score" role="button">Scores</a>
</li>
<li class="detail-tab tab-link detail-tab-admin-title -private">
<li class="detail-tab tab-link detail-tab-admin-title -private" title="For authorized users only.">
<a href="/packages/oxygen/admin" role="button">Admin</a>
</li>
<li class="detail-tab tab-link detail-tab-activity-log-title -private">
<li class="detail-tab tab-link detail-tab-activity-log-title -private" title="For authorized users only.">
<a href="/packages/oxygen/activity-log" role="button">Activity log</a>
</li>
</ul>
Expand Down
4 changes: 2 additions & 2 deletions app/test/frontend/golden/pkg_show_page_flutter_plugin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,10 +192,10 @@ <h3 class="detail-lead-title">Metadata</h3>
<li class="detail-tab tab-link detail-tab-analysis-title">
<a href="/packages/flutter_titanium/score" role="button">Scores</a>
</li>
<li class="detail-tab tab-link detail-tab-admin-title -private">
<li class="detail-tab tab-link detail-tab-admin-title -private" title="For authorized users only.">
<a href="/packages/flutter_titanium/admin" role="button">Admin</a>
</li>
<li class="detail-tab tab-link detail-tab-activity-log-title -private">
<li class="detail-tab tab-link detail-tab-activity-log-title -private" title="For authorized users only.">
<a href="/packages/flutter_titanium/activity-log" role="button">Activity log</a>
</li>
</ul>
Expand Down
4 changes: 2 additions & 2 deletions app/test/frontend/golden/publisher_activity_log_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,10 +148,10 @@ <h1 class="title">example.com</h1>
<li class="detail-tab tab-link detail-tab-unlisted-packages-title">
<a href="/publishers/example.com/unlisted-packages" role="button">Unlisted packages</a>
</li>
<li class="detail-tab tab-link detail-tab-admin-title -private">
<li class="detail-tab tab-link detail-tab-admin-title -private" title="For authorized users only.">
<a href="/publishers/example.com/admin" role="button">Admin</a>
</li>
<li class="detail-tab tab-button detail-tab-activity-log-title -active -private">Activity log</li>
<li class="detail-tab tab-button detail-tab-activity-log-title -active -private" title="For authorized users only.">Activity log</li>
</ul>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/test/frontend/golden/publisher_admin_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,8 +148,8 @@ <h1 class="title">example.com</h1>
<li class="detail-tab tab-link detail-tab-unlisted-packages-title">
<a href="/publishers/example.com/unlisted-packages" role="button">Unlisted packages</a>
</li>
<li class="detail-tab tab-button detail-tab-admin-title -active -private">Admin</li>
<li class="detail-tab tab-link detail-tab-activity-log-title -private">
<li class="detail-tab tab-button detail-tab-admin-title -active -private" title="For authorized users only.">Admin</li>
<li class="detail-tab tab-link detail-tab-activity-log-title -private" title="For authorized users only.">
<a href="/publishers/example.com/activity-log" role="button">Activity log</a>
</li>
</ul>
Expand Down
4 changes: 2 additions & 2 deletions app/test/frontend/golden/publisher_packages_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,10 +146,10 @@ <h1 class="title">example.com</h1>
<li class="detail-tab tab-link detail-tab-unlisted-packages-title">
<a href="/publishers/example.com/unlisted-packages" role="button">Unlisted packages</a>
</li>
<li class="detail-tab tab-link detail-tab-admin-title -private">
<li class="detail-tab tab-link detail-tab-admin-title -private" title="For authorized users only.">
<a href="/publishers/example.com/admin" role="button">Admin</a>
</li>
<li class="detail-tab tab-link detail-tab-activity-log-title -private">
<li class="detail-tab tab-link detail-tab-activity-log-title -private" title="For authorized users only.">
<a href="/publishers/example.com/activity-log" role="button">Activity log</a>
</li>
</ul>
Expand Down
4 changes: 2 additions & 2 deletions app/test/frontend/golden/publisher_unlisted_packages_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,10 +146,10 @@ <h1 class="title">example.com</h1>
<a href="/publishers/example.com/packages" role="button">Packages</a>
</li>
<li class="detail-tab tab-button detail-tab-unlisted-packages-title -active">Unlisted packages</li>
<li class="detail-tab tab-link detail-tab-admin-title -private">
<li class="detail-tab tab-link detail-tab-admin-title -private" title="For authorized users only.">
<a href="/publishers/example.com/admin" role="button">Admin</a>
</li>
<li class="detail-tab tab-link detail-tab-activity-log-title -private">
<li class="detail-tab tab-link detail-tab-activity-log-title -private" title="For authorized users only.">
<a href="/publishers/example.com/activity-log" role="button">Activity log</a>
</li>
</ul>
Expand Down
23 changes: 0 additions & 23 deletions pkg/web_css/lib/src/_detail_page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -398,33 +398,10 @@ $detail-tabs-tablet-width: calc(100% - 240px);
> .tab-button.-private,
> .tab-link.-private > a {
color: var(--pub-detail_tab-admin-color);
position: relative;
padding-right: 9px;

&:hover {
border-bottom-color: var(--pub-detail_tab-admin-color);
}

/* The lock icon, positioned after the label. */
&:before {
content: " ";
display: block;
background: url("../img/admin-lock-icon.svg");
background-size: 12px 12px;
width: 12px;
height: 12px;
position: absolute;
top: 50%;
right: 4px;
margin-top: -8px;
}

/* Extra padding, width should be larger than or equal to the lock icon's width. */
&:after {
content: "";
display: inline-block;
width: 12px;
}
}
> .tab-button.-private,
> .tab-button.-private {
Expand Down
2 changes: 1 addition & 1 deletion pkg/web_css/lib/src/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@
--pub-detail_tab-text-color: var(--pub-neutral-textColor);
--pub-detail_tab-underline-color: #888888;
--pub-detail_tab-active-color: var(--pub-link-text-color);
--pub-detail_tab-admin-color: #e03030;
--pub-detail_tab-admin-color: #ffa000;
--pub-home_title-text-color: #31b0fc;
--pub-weekly-chart-main-color: var(--pub-link-text-color);
--pub-weekly-chart-tooltip-text-color: var(--pub-color-darkGunmetal);
Expand Down
8 changes: 0 additions & 8 deletions static/img/admin-lock-icon.svg
View file
Open in desktop

This file was deleted.