Page MenuHomePhabricator

in notification system, please remove #id from CSS selector where not needed
Open, Needs TriagePublic

Description

the CSS for the notification system (see at the end of this whine), uses #IDs in the selectors of css rules where it's not needed, and cause difficulties to developers wanting to add a badge.

for all but 2 properties, the rules are exactly the same for #pt-notifications-alert and #pt-notifications-notice. defining these rules without including the #id in the selector would make life easier.

when some (local) user script tries to create a third badge (for instance, This script on hewiki), which adds a "you have unread watchlist items" badge), it cannot use the existing CSS, b/c it is all ID dependent, and is forced to copy the whole shebang ( like here ) . it would be cleaner and nicer if everywhere where the selector looks like so:

#pt-notifications-alert .foo .bar, #pt-notifications-notice .foo .bar

it would simply say

.foo .bar

instead, i.e., avoid specifying the #ID as part of the selector where it does not make a difference.
doing so, will basically leave 4 #ID-dependent rules: one each for the ::before { background-image }, and one each for the ::after {background-color }.

doing so would make it cleaner and nicer (and shorted...), and would also make it easier to add a new badge - only 2 new rules to add, instead of all of them, and save the need to replicate the whole bunch.

current CSS:

#pt-notifications-alert .mw-echo-notifications-badge, #pt-notifications-notice .mw-echo-notifications-badge {
    color: transparent;
    cursor: pointer;
    display: block;
    height: 24px;
    position: relative;
    text-decoration: none;
    top: -5px;
    width: 24px;
}
#pt-notifications-alert .mw-echo-notifications-badge:hover, #pt-notifications-notice .mw-echo-notifications-badge:hover, #pt-notifications-alert .mw-echo-notifications-badge:active, #pt-notifications-notice .mw-echo-notifications-badge:active, #pt-notifications-alert .mw-echo-notifications-badge:focus, #pt-notifications-notice .mw-echo-notifications-badge:focus {
    outline: medium none;
}
#pt-notifications-alert .mw-echo-notifications-badge-dimmed, #pt-notifications-notice .mw-echo-notifications-badge-dimmed {
    opacity: 0.4;
}
#pt-notifications-alert .mw-echo-notifications-badge::before, #pt-notifications-notice .mw-echo-notifications-badge::before {
    background-repeat: no-repeat;
    content: "";
    cursor: pointer;
    display: inline-block;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
#pt-notifications-alert .mw-echo-notifications-badge::after, #pt-notifications-notice .mw-echo-notifications-badge::after {
    background-color: #72777d;
    border: 1px solid #fff;
    border-radius: 2px;
    color: #fff;
    content: attr(data-counter-text);
    cursor: pointer;
    display: inline-block;
    font-size: 0.9em;
    font-weight: bold;
    padding: 0 0.3em;
    position: absolute;
    right: 55%;
    top: 9px;
}
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-long-label::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-long-label::after {
    right: 35%;
}
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
    opacity: 0.625;
}
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read::after {
    visibility: hidden;
}
#pt-notifications-alert .mw-echo-notifications-badge::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M17.5%2014V9c0-3-2.3-5-5.5-5S6.5%206%206.5%209v5c0%202%200%203-2%203v1h15v-1c-2%200-2-1-2-3zM12%2020H9c0%201%201.6%202%203%202s3-1%203-2h-3z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
#pt-notifications-notice .mw-echo-notifications-badge::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M3%2013.35l1.8-7.2c.2-.996.81-1.8%201.8-1.8h10.8c.99%200%201.6.867%201.8%201.8l1.8%207.2v4.5c0%20.99-.81%201.8-1.8%201.8H4.8c-.99%200-1.8-.81-1.8-1.8v-4.5zm6.96%201.8h4.08c-.49.557-1.212.9-2.04.9a2.68%202.68%200%200%201-2.04-.9h4.08c.414-.472.66-1.098.66-1.8h4.14l-1.44-7.2H6.6l-1.44%207.2H9.3c0%20.702.246%201.328.66%201.8z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
#pt-notifications-alert .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen::after, #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-unseen-notifications::after {
    background-color: #cc3333;
}
#pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications::after {
    background-color: #3366cc;
}
#p-personal #pt-notifications-alert, #p-personal #pt-notifications-notice {
    margin-left: 0.4em;
    margin-top: 0.3em;
}

PROPOSED/REQUESTED CSS:

.mw-echo-notifications-badge {
    color: transparent;
    cursor: pointer;
    display: block;
    height: 24px;
    position: relative;
    text-decoration: none;
    top: -5px;
    width: 24px;
}
.mw-echo-notifications-badge:hover, .mw-echo-notifications-badge:active, .mw-echo-notifications-badge:focus {
    outline: medium none;
}

.mw-echo-notifications-badge-dimmed {
    opacity: 0.4;
}
.mw-echo-notifications-badge::before {
    background-repeat: no-repeat;
    content: "";
    cursor: pointer;
    display: inline-block;
    height: 100%;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
.mw-echo-notifications-badge::after {
    background-color: #72777d;
    border: 1px solid #fff;
    border-radius: 2px;
    color: #fff;
    content: attr(data-counter-text);
    cursor: pointer;
    display: inline-block;
    font-size: 0.9em;
    font-weight: bold;
    padding: 0 0.3em;
    position: absolute;
    right: 55%;
    top: 9px;
}
.mw-echo-notifications-badge.mw-echo-notifications-badge-long-label::after {
    right: 35%;
}
.mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
    opacity: 0.625;
}
.mw-echo-notifications-badge.mw-echo-notifications-badge-all-read::after {
    visibility: hidden;
}
#pt-notifications-alert .mw-echo-notifications-badge::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M17.5%2014V9c0-3-2.3-5-5.5-5S6.5%206%206.5%209v5c0%202%200%203-2%203v1h15v-1c-2%200-2-1-2-3zM12%2020H9c0%201%201.6%202%203%202s3-1%203-2h-3z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
#pt-notifications-notice .mw-echo-notifications-badge::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M3%2013.35l1.8-7.2c.2-.996.81-1.8%201.8-1.8h10.8c.99%200%201.6.867%201.8%201.8l1.8%207.2v4.5c0%20.99-.81%201.8-1.8%201.8H4.8c-.99%200-1.8-.81-1.8-1.8v-4.5zm6.96%201.8h4.08c-.49.557-1.212.9-2.04.9a2.68%202.68%200%200%201-2.04-.9h4.08c.414-.472.66-1.098.66-1.8h4.14l-1.44-7.2H6.6l-1.44%207.2H9.3c0%20.702.246%201.328.66%201.8z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.mw-echo-notifications-badge.mw-echo-unseen-notifications::after {
    background-color: #cc3333;
}
#pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen::after, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications::after {
    background-color: #3366cc;
}
#p-personal #pt-notifications-alert, #p-personal #pt-notifications-notice {
    margin-left: 0.4em;
    margin-top: 0.3em;
}

peace.

Event Timeline

Kipod created this task.Feb 16 2017, 7:29 PM
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptFeb 16 2017, 7:29 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Kipod renamed this task from please remove #id from CSS where not needed to in notification system, please remove #id from CSS where not needed.Feb 16 2017, 7:29 PM
Kipod renamed this task from in notification system, please remove #id from CSS where not needed to in notification system, please remove #id from CSS selector where not needed.

Kind of off-topic, but I think turning watchlist into a numerical badge is a cool idea and something echo might want to implement itself.

Kipod added a comment.Feb 17 2017, 2:53 PM

Kind of off-topic, but I think turning watchlist into a numerical badge is a cool idea and something echo might want to implement itself.

(continue off-topic): i believe it's on the wishlist somewhere, we just decided not to wait....

implemented by the "echo" team will be significantly better than our "poor-man-implementation": it can (and should) be done it "globally", like the alerts are, i.e., informing the user of updates to their watchlist in _any_ project, not just the local one.

(for now, i recommend interested users to activate it from their meta "global.js" if they want it in all projects, which is why this is not done as a gadget, and declares its dependencies in the code).

peace.

Restricted Application added a project: Growth-Team. · View Herald TranscriptOct 12 2019, 4:11 AM