paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 13:03:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

unread_banner: Refactor HTML to use main view banner stylings.

Browse Source 
Previously, the HTML structure of unread banners continued to utilize the
old stylings. We are currently in the process of simplifing both the
compose banner and unread banner stylings into one. These change will
update the HTML structure to be the same as the compose banner and use
the new stylings.
This commit is contained in:
Joelute
2023-05-19 19:47:08 -04:00
committed by Tim Abbott
parent 00add94045
commit ccdbdb35b2
6 changed files with 45 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/styles/compose.css
View File

@@ -430,6 +430,19 @@
color: hsl(204deg 49% 29% / 75%);
}
}
.main-view-banner-action-button {
background-color: hsl(204deg 49% 29% / 10%);
color: inherit;
&:hover {
background-color: hsl(204deg 49% 29% / 12%);
}
&:active {
background-color: hsl(204deg 49% 29% / 15%);
}
}
}
}

78
web/styles/dark_theme.css
View File

@@ -333,6 +333,20 @@
color: hsl(205deg 58% 69% / 75%);
}
}
.main-view-banner-action-button {
background-color: hsl(205deg 58% 69% / 10%);
border-color: transparent;
color: hsl(205deg 58% 69%);
&:hover {
background-color: hsl(205deg 58% 69% / 15%);
}
&:active {
background-color: hsl(205deg 58% 69% / 20%);
}
}
}
}
@@ -1528,70 +1542,6 @@
}
}
}
#mark_as_read_turned_off_banner {
&.warning {
background-color: hsl(53deg 100% 11%);
border-color: hsl(38deg 44% 60% / 40%);
color: hsl(50deg 45% 80%);
#mark_as_read_close {
color: hsl(50deg 45% 61% / 50%);
&:hover {
color: hsl(50deg 45% 61%);
}
&:active {
color: hsl(50deg 45% 61% / 75%);
}
}
.banner-action-button {
background-color: hsl(50deg 45% 61% / 10%);
color: hsl(50deg 45% 61%);
&:hover {
background-color: hsl(50deg 45% 61% / 15%);
}
&:active {
background-color: hsl(50deg 45% 61% / 20%);
}
}
}
&.info {
background-color: hsl(204deg 100% 12%);
border-color: hsl(205deg 58% 69% / 40%);
color: hsl(205deg 58% 80%);
#mark_as_read_close {
color: hsl(205deg 58% 69% / 50%);
&:hover {
color: hsl(205deg 58% 69%);
}
&:active {
color: hsl(205deg 58% 69% / 75%);
}
}
.banner-action-button {
background-color: hsl(205deg 58% 69% / 10%);
color: hsl(205deg 58% 69%);
&:hover {
background-color: hsl(205deg 58% 69% / 15%);
}
&:active {
background-color: hsl(205deg 58% 69% / 20%);
}
}
}
}
}
@supports (-moz-appearance: none) {

106
web/styles/zulip.css
View File

@@ -1460,112 +1460,6 @@ td.pointer {
}
}
#mark_as_read_turned_off_banner {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 5px;
border: 1px solid;
font-size: 15px;
line-height: 18px;
margin-bottom: 20px;
#mark_as_read_turned_off_content {
margin: 0;
flex-grow: 1;
}
#mark_as_read_controls {
display: flex;
}
.banner-action-button {
border: none;
border-radius: 4px;
padding: 5px 10px;
font-weight: 600;
margin-left: 10px;
margin-top: 4.5px;
margin-bottom: 4.5px;
height: 32px;
white-space: nowrap;
}
& p {
margin: 0; /* override bootstrap */
/* 5px right padding + 10px left-margin of the neighbouring button will match the left padding */
padding: 8px 5px 8px 15px;
}
#mark_as_read_close {
font-size: 16px;
text-decoration: none;
padding: 9px 8px;
}
&.warning {
background-color: hsl(50deg 75% 92%);
border-color: hsl(38deg 44% 27% / 40%);
color: hsl(38deg 44% 27%);
#mark_as_read_close {
color: hsl(38deg 44% 27% / 50%);
&:hover {
color: hsl(38deg 44% 27%);
}
&:active {
color: hsl(38deg 44% 27% / 75%);
}
}
.banner-action-button {
background-color: hsl(38deg 44% 27% / 10%);
color: inherit;
&:hover {
background-color: hsl(38deg 44% 27% / 12%);
}
&:active {
background-color: hsl(38deg 44% 27% / 15%);
}
}
}
&.info {
background-color: hsl(204deg 58% 92%);
border-color: hsl(204deg 49% 29% / 40%);
color: hsl(204deg 49% 29%);
#mark_as_read_close {
color: hsl(204deg 49% 29% / 50%);
&:hover {
color: hsl(204deg 49% 29%);
}
&:active {
color: hsl(204deg 49% 29% / 75%);
}
}
.banner-action-button {
background-color: hsl(204deg 49% 29% / 10%);
color: inherit;
&:hover {
background-color: hsl(204deg 49% 29% / 12%);
}
&:active {
background-color: hsl(204deg 49% 29% / 15%);
}
}
}
}
.copy-paste-text {
/* Hide the text that we want copy paste to capture */
position: absolute;

14
web/templates/unread_banner/mark_as_read_disabled_banner.hbs
View File

@@ -1,15 +1,13 @@
<div id="mark_as_read_turned_off_banner" class="home-error-bar info">
<p id="mark_as_read_turned_off_content">
<div id="mark_as_read_turned_off_banner" class="main-view-banner home-error-bar info">
<p id="mark_as_read_turned_off_content" class="banner_content">
{{#tr}}
Messages will not be automatically marked as read. <z-link>Change setting</z-link>
{{#*inline "z-link"}}<a href='/#settings/display-settings'>{{> @partial-block}}</a>{{/inline}}
{{/tr}}
</p>
<div id="mark_as_read_controls">
<button id="mark_view_read" class="banner-action-button">
{{t 'Mark as read' }}
</button>
</div>
<a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close"></a>
<button id="mark_view_read" class="main-view-banner-action-button">
{{t 'Mark as read' }}
</button>
<a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>
</div>

14
web/templates/unread_banner/mark_as_read_only_in_conversation_view.hbs
View File

@@ -1,15 +1,13 @@
<div id="mark_as_read_turned_off_banner" class="home-error-bar info">
<p id="mark_as_read_turned_off_content">
<div id="mark_as_read_turned_off_banner" class="main-view-banner home-error-bar info">
<p id="mark_as_read_turned_off_content" class="banner_content">
{{#tr}}
Messages will not be automatically marked as read because this is not a conversation view. <z-link>Change setting</z-link>
{{#*inline "z-link"}}<a href='/#settings/display-settings'>{{> @partial-block}}</a>{{/inline}}
{{/tr}}
</p>
<div id="mark_as_read_controls">
<button id="mark_view_read" class="banner-action-button">
{{t 'Mark as read' }}
</button>
</div>
<a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close"></a>
<button id="mark_view_read" class="main-view-banner-action-button">
{{t 'Mark as read' }}
</button>
<a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>
</div>

14
web/templates/unread_banner/mark_as_read_turned_off_banner.hbs
View File

@@ -1,12 +1,10 @@
<div id="mark_as_read_turned_off_banner" class="home-error-bar warning">
<p id="mark_as_read_turned_off_content">
<div id="mark_as_read_turned_off_banner" class="main-view-banner home-error-bar warning">
<p id="mark_as_read_turned_off_content" class="banner_content">
{{t 'To preserve your reading state, this view does not mark messages as read.' }}
</p>
<div id="mark_as_read_controls">
<button id="mark_view_read" class="banner-action-button">
{{t 'Mark as read' }}
</button>
</div>
<a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close"></a>
<button id="mark_view_read" class="main-view-banner-action-button">
{{t 'Mark as read' }}
</button>
<a role="button" id="mark_as_read_close" class="zulip-icon zulip-icon-close main-view-banner-close-button"></a>
</div>