Showing sync status in mobile top bar?

❓Help
6

I figured out a solution!

I added CSS to always make the moreOptions menu visible, but removed all of the moreOption elements within the list unless .is-moreOptionsOpen is present. Then I made it so that by default all of the sync elements were visible unless explicitly [style*="display: none"] was present, and set the moreOptions style to be left aligned so I didn’t block the existing icons and made the background invisible so that only the text showed up. Per my original CSS posted in this thread I made the text red when not synced, and green when synced so it stands out more.

Here is what it looks like when it is in “Saved” state (not synced):

image
image468×937 59 KB

Here is what it looks like when it is in “Synced” state:

image
image468×937 58.9 KB

Here is what the open menu looks like (notice that it removes the status from the left since it reformats the menu to be right aligned like normal):

image
image468×937 66.7 KB

Here is the custom CSS:

/* Make Save Now status red */
.MobileHeader-moreOption--saveNow {
    display: block !important;
    color: #d62c2c;
}

/* Make Saved status red */
.MobileHeader-moreOption--saved.is-disabled {
    display: block !important;
    color: #d62c2c;
}

/* Make Synced status green */
.MobileHeader-moreOption--synced.is-disabled {
    display: block !important;
    color: #31a036;
}

/* More-options container visible by default and centered left */
.MobileHeader-moreOptions {
    display: block;
    top: -1px;
    left: 40px;
    right: initial;
    background: initial;
    box-shadow: initial;
}

/* More-options container right aligned if visible */
.is-moreOptionsOpen .MobileHeader-moreOptions {
    top: 5px;
    left: initial;
    right: 5px;
    background: #fff;
    box-shadow: -2px 2px 15px 2px rgba(0, 0, 0, 0.15);
}

/* Hide all more-option(s) by default */
.MobileHeader-moreOption {
    display: none !important;
}

/* Display all more-option(s) if visible */
.is-moreOptionsOpen .MobileHeader-moreOption {
    display: block !important;
}

/* Hide Save Now if hidden */
.MobileHeader-moreOption--saveNow[style*="display: none"] {
    display: none !important;
}

/* Hide Saved if hidden */
.MobileHeader-moreOption--saved[style*="display: none"] {
    display: none !important;
}

/* Hide Synced if hidden */
.MobileHeader-moreOption--synced[style*="display: none"] {
    display: none !important;
}