re-introduce badges

This commit is contained in:
Olivier Gagnon 2021-09-11 02:11:41 -04:00
parent 33aeeb7977
commit 02fd09c5d3
4 changed files with 69 additions and 20 deletions

@ -113,10 +113,10 @@ a:visited {
color: #fff; color: #fff;
border-radius: 2px; border-radius: 2px;
padding: 1px 3px; padding: 1px 3px;
display: "list-item";
font-size: $defaultFontSize * 0.625; font-size: $defaultFontSize * 0.625;
top: 0; top: 0;
right: 0; right: 0;
position: absolute;
} }
.notification-off { .notification-off {
@ -127,6 +127,20 @@ a:visited {
display: "none"; display: "none";
} }
.notification {
position: relative;
display: inline-block;
}
.notification .badge {
position: absolute;
top: 0;
right: 0;
padding: 2px;
background: red;
color: white;
}
/* help tip. Question mark that opens popup with info/details */ /* help tip. Question mark that opens popup with info/details */
.help-tip { .help-tip {
background-color: black; background-color: black;

File diff suppressed because one or more lines are too long

48
dist/engineStyle.css vendored

@ -106,10 +106,10 @@ a:visited {
color: #fff; color: #fff;
border-radius: 2px; border-radius: 2px;
padding: 1px 3px; padding: 1px 3px;
display: "list-item";
font-size: 10px; font-size: 10px;
top: 0; top: 0;
right: 0; } right: 0;
position: absolute; }
.notification-off { .notification-off {
background-color: #333; background-color: #333;
@ -118,6 +118,18 @@ a:visited {
padding: 0; padding: 0;
display: "none"; } display: "none"; }
.notification {
position: relative;
display: inline-block; }
.notification .badge {
position: absolute;
top: 0;
right: 0;
padding: 2px;
background: red;
color: white; }
/* help tip. Question mark that opens popup with info/details */ /* help tip. Question mark that opens popup with info/details */
.help-tip { .help-tip {
background-color: black; background-color: black;
@ -644,10 +656,10 @@ a:visited {
color: #fff; color: #fff;
border-radius: 2px; border-radius: 2px;
padding: 1px 3px; padding: 1px 3px;
display: "list-item";
font-size: 10px; font-size: 10px;
top: 0; top: 0;
right: 0; } right: 0;
position: absolute; }
.notification-off { .notification-off {
background-color: #333; background-color: #333;
@ -656,6 +668,18 @@ a:visited {
padding: 0; padding: 0;
display: "none"; } display: "none"; }
.notification {
position: relative;
display: inline-block; }
.notification .badge {
position: absolute;
top: 0;
right: 0;
padding: 2px;
background: red;
color: white; }
/* help tip. Question mark that opens popup with info/details */ /* help tip. Question mark that opens popup with info/details */
.help-tip { .help-tip {
background-color: black; background-color: black;
@ -2068,10 +2092,10 @@ a:visited {
color: #fff; color: #fff;
border-radius: 2px; border-radius: 2px;
padding: 1px 3px; padding: 1px 3px;
display: "list-item";
font-size: 10px; font-size: 10px;
top: 0; top: 0;
right: 0; } right: 0;
position: absolute; }
.notification-off { .notification-off {
background-color: #333; background-color: #333;
@ -2080,6 +2104,18 @@ a:visited {
padding: 0; padding: 0;
display: "none"; } display: "none"; }
.notification {
position: relative;
display: inline-block; }
.notification .badge {
position: absolute;
top: 0;
right: 0;
padding: 2px;
background: red;
color: white; }
/* help tip. Question mark that opens popup with info/details */ /* help tip. Question mark that opens popup with info/details */
.help-tip { .help-tip {
background-color: black; background-color: black;

@ -129,8 +129,9 @@ export function SidebarRoot(props: IProps): React.ReactElement {
</li> </li>
{canCreateProgram && ( {canCreateProgram && (
<li className="mainmenu-accordion-panel"> <li className="mainmenu-accordion-panel">
<button onClick={() => props.engine.loadCreateProgramContent()}> <button className="notification" onClick={() => props.engine.loadCreateProgramContent()}>
Create Program{programCount > 0 ? ` (${programCount})` : ""} Create Program
{programCount > 0 && <span className="badge">{programCount}</span>}
</button> </button>
</li> </li>
)} )}
@ -156,24 +157,22 @@ export function SidebarRoot(props: IProps): React.ReactElement {
</li> </li>
{canOpenFactions && ( {canOpenFactions && (
<li className="mainmenu-accordion-panel"> <li className="mainmenu-accordion-panel">
<button onClick={() => props.engine.loadFactionsContent()}> <button className="notification" onClick={() => props.engine.loadFactionsContent()}>
Factions Factions
{props.player.factionInvitations.length > 0 ? ` (${props.player.factionInvitations.length})` : ""} {props.player.factionInvitations.length > 0 && (
<span className="badge">{props.player.factionInvitations.length}</span>
)}
</button> </button>
<span id="factions-notification" className="notification-off">
{" "}
</span>
</li> </li>
)} )}
{canOpenAugmentations && ( {canOpenAugmentations && (
<li className="mainmenu-accordion-panel"> <li className="mainmenu-accordion-panel">
<button onClick={() => props.engine.loadAugmentationsContent()}> <button className="notification" onClick={() => props.engine.loadAugmentationsContent()}>
Augmentations Augmentations
{props.player.queuedAugmentations.length > 0 ? ` (${props.player.queuedAugmentations.length})` : ""} {props.player.queuedAugmentations.length > 0 && (
<span className="badge">{props.player.queuedAugmentations.length}</span>
)}
</button> </button>
<span id="augmentations-notification" className="notification-off">
{" "}
</span>
</li> </li>
)} )}
<li className="mainmenu-accordion-panel"> <li className="mainmenu-accordion-panel">