githubmirror/zulip

web/styles/inbox.css
617 строк18 KB
Karl Stolley
dropdowns: Correct columnar flex alignment in recents, inbox.
10 мар 2025, 19:22
10 мар 2025, 19:226668b96
.inbox-container {
    display: flex;
    flex-direction: column;
    background: var(--color-background-inbox);
    padding: 0;
    min-height: 100vh;

    #inbox-pane {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        margin: var(--navbar-fixed-height) 25px 0;

        a {
            color: var(--color-text-message-header);
            text-decoration: none;
        }

        .unread_count {
            opacity: 1;
            outline: 0 solid var(--color-background-unread-counter);
            transition: outline-width 0.1s ease;

            &:hover {
                outline-width: 1.5px;
            }
        }

        .search_group {
            position: sticky;
            top: var(--navbar-fixed-height);
            background: var(--color-background-inbox);
            display: flex;
            padding: 15px 0 10px;
            z-index: 1;
        }

        .button-inbox-selected {
            background-color: var(--color-background-button-inbox-selected);
        }

        #inbox-filters {
            .zulip-icon-search-inbox {
                position: relative;
                /* We need to position the icon relative to the filters dropdown since its width is variable.
                   To avoid icon from taking width since it is no longer absolute/fixed positioned, we set its width to 0. */
                width: 0;
                /* (30px searchbox height - 15px icon height) / 2)  = 7.5px at 14px em */
                top: 0.5357em;
                /* (30px left padding - 15px icon width) / 2)  = 7.5px  at 14px em */
                left: 0.5357em;
                color: var(--color-icons-inbox);
                opacity: 0.4;
            }

            #inbox-clear-search {
                border: none;
                background: transparent;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 2px;
                cursor: pointer;
                font-size: 1.1428em; /* 16px at 14px em */
                color: var(--color-icons-inbox);
                opacity: 0.4;
                transition: 140ms;
                transition-property: background-color, opacity, transform;
                /* 5px at 16px font-size at 14px em */
                padding: 0.3125em;
                margin: 0;
                position: relative;
                /* Give 2px space to right at 16px font-size */
                right: 0.125em;

                &:focus {
                    outline: none;
                }

                &:hover,
                &:focus-visible {
                    opacity: 1;
                }

                &:active {
                    opacity: 1;
                    transform: scale(0.9);
                }
            }
        }

        #inbox-search:placeholder-shown + #inbox-clear-search {
            visibility: hidden;
        }

        #inbox-search {
            /* Give space for 30px cross icon at 16px font-size */
            margin-right: -1.875em;
            flex-grow: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            max-width: var(--width-inbox-search);
            height: var(--height-inbox-search);
            /* top/bottom default 1px padding / 14px em */
            /* left padding 30px / 14px em */
            /* right padding for 28px / 14px em (close icon) */
            padding: 0.0714em 2em 0.0714em 2.1428em;
            font-style: normal;
            font-weight: 400;
            line-height: 1.2142em; /* 17px / 14px em */
            border-radius: 4px;
            background-color: var(--color-background-inbox-search);
            color: var(--color-inbox-search-text);
            border: 1px solid var(--color-border-inbox-search);

            &:not(:placeholder-shown),
            &:hover {
                background-color: var(--color-background-inbox-search-hover);
                border: 1px solid var(--color-border-inbox-search-hover);
            }

            &:focus {
                outline: none;
                background-color: var(--color-background-inbox-search-focus);
                border: 1px solid var(--color-border-inbox-search-focus);
                box-shadow: 0 0 5px var(--color-box-shadow-inbox-search-focus);
            }
        }

        .inbox-empty-text {
            display: none;
        }

        #inbox-list {
            overflow: hidden;
            border-radius: 5px;
            border: 1px solid hsl(0deg 0% 0% / 20%);
            margin-bottom: var(--max-unmaximized-compose-height);
            /* margin(5) + search left padding(30) + search right padding (28) = 63px at 14px em */
            max-width: calc(
                var(--width-inbox-search) +
                    var(--width-inbox-filters-dropdown) + 4.5em
            );

            .inbox-focus-border {
                display: flex;
                min-height: 1.875em; /* 30px at 16px em */
                border: 2px solid transparent;
                border-radius: 3px;
                box-sizing: border-box;
                justify-content: space-between;
            }

            .inbox-header {
                user-select: none;
                display: block;
                height: 1.875em; /* 30px at 16px em */

                .inbox-focus-border {
                    height: 1.875em; /* 30px at 16px em */
                }

                .inbox-left-part {
                    grid-template: auto / auto min-content min-content;
                    grid-template-areas: "header_name unread_mention_info unread_count";
                }

                .inbox-header-name {
                    grid-area: header_name;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    padding: 1px 6px;
                    outline: 0;

                    & a {
                        margin: 0 4px;
                        padding: 1px 0;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }

                    .inbox-header-name-focus-border {
                        display: flex;
                        align-items: center;
                        overflow: hidden;
                        border: 2px solid transparent;
                        border-radius: 3px;
                        padding-left: 4px;
                    }

                    &:focus .inbox-header-name-focus-border {
                        border-color: var(--color-outline-focus);
                    }
                }

                &:focus {
                    outline: 0;

                    .inbox-focus-border {
                        border-color: var(--color-outline-focus);
                    }

                    .toggle-inbox-header-icon {
                        opacity: 1;
                    }
                }
            }

            .fa-lock {
                margin-right: 3px;
            }

            .zulip-icon-user,
            .stream-privacy.filter-icon {
                margin: 0;
                margin-right: 1px;
            }

            .zulip-icon-user {
                position: relative;
                top: -1px;
                margin-right: 4px;
            }

            .collapsible-button {
                &:hover {
                    cursor: pointer;
                }

                .zulip-icon-arrow-down {
                    padding: 0.3125em 0.25em; /* 5px 4px at 16px em */
                    margin-right: 0.5625em; /* 9px at 16px em */
                    opacity: 0.5;
                }

                .icon-collapsed-state {
                    transform: rotate(270deg);
                }
            }

            .user-circle {
                /* 8.5328px at 16px/1em */
                font-size: 0.5333em;
                /* TODO: Refactor inbox rows to use grid, to avoid the
                   min-width here that holds the other rows to similar
                   columns. */
                /* 16px at 8.5328px/1em */
                min-width: 1.8751em;
                top: 0;
            }

            .zulip-icon-bot,
            .conversation-partners-icon {
                opacity: 0.7;
                margin-right: 5px;
            }

            .inbox-row {
                user-select: none;
                display: block;
                background-color: var(--color-background-inbox-row);

                &:hover {
                    background: var(--color-background-inbox-row-hover);
                }

                &:focus {
                    .inbox-focus-border {
                        border: 2px solid var(--color-outline-focus);
                        border-radius: 3px;
                    }

                    outline: 0;
                    padding: 0;
                }

                .inbox-left-part {
                    grid-template:
                        auto / min-content minmax(0, 1fr)
                        min-content min-content;
                    grid-template-areas: "match_topic_and_dm_start recipient_info unread_mention_info unread_count";
                }

                .fake-collapse-button,
                .inbox-topic-container .user-circle {
                    grid-area: match_topic_and_dm_start;
                }

                .recipient_info,
                .inbox-topic-name {
                    grid-area: recipient_info;
                }

                .inbox-right-part-wrapper {
                    flex-grow: 1;

                    .inbox-right-part {
                        display: flex;
                        justify-content: space-between;
                        flex-grow: 1;
                    }
                }

                .visibility-policy-indicator {
                    display: flex;
                    align-items: center;
                    border-radius: 3px;
                    margin-left: 3px;

                    &:focus {
                        outline: 2px solid var(--color-outline-focus);
                    }
                }
            }

            .unread-count-focus-outline {
                /* Because the inbox view font-size will
                   never be smaller than the em-equivalent
                   of 15px, we restate the base font-size
                   here so that unreads match others in
                   the UI at legacy size (14px). */
                font-size: var(--base-font-size-px);
                grid-area: unread_count;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 3px;
                padding: 0 5px;
                /* Stretch to the row to keep unread
                   count from affecting overall row
                   size as test scales up. */
                align-self: stretch;

                &:focus {
                    outline: 2px solid var(--color-outline-focus);
                }
            }

            .unread_mention_info {
                grid-area: unread_mention_info;
                margin-right: 0;
            }

            .stream-privacy {
                display: flex;
                align-items: center;
                margin-right: 4px;
                margin-left: 17px;

                .zulip-icon {
                    line-height: 0.875em; /* 14px at 16px em */
                    height: 1em;
                    width: 1em;
                }
            }

            .inbox-topic-name {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 100%;

                & a {
                    padding: 1px 0;
                    white-space: pre;
                }
            }

            .inbox-left-part-wrapper {
                display: flex;
                width: 80%;
            }

            #inbox-direct-messages-container {
                /* Since a direct message row can have span to multiple lines,
                   having an underline focus will not work very well.
                */
                .inbox-row:focus {
                    box-shadow: inset 0 0 0 2px var(--color-outline-focus);
                }
            }

            #inbox-direct-messages-container .inbox-left-part,
            .inbox-topic-container .inbox-left-part {
                /* 37px (50px - space occupied by user circle icon) at 16px */
                padding-left: 2.3125em;
            }

            .inbox-left-part {
                width: 100%;
                display: grid;
                align-items: center;

                &:hover {
                    cursor: pointer;
                }

                .inbox-group-or-bot-dm {
                    position: relative;
                    left: -3px;

                    /* We don't display status emoji in group DMs,
                       so prepare an ordinary inline layout... */
                    .user-status-microlayout {
                        display: inline;
                        white-space: collapse;
                    }
                    /* ...and hide the status emoji. */
                    .status-emoji {
                        display: none;
                    }
                }

                .recipients_info {
                    display: flex;
                    flex-wrap: wrap;
                    column-gap: 10px;
                    grid-area: recipient_info;

                    .user_block {
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }

        .inbox-right-part-wrapper {
            display: flex;
            align-items: center;
        }

        .inbox-row,
        .inbox-header {
            &:focus,
            &:focus-within,
            &:hover {
                .inbox-row-visibility-policy-inherit,
                .inbox-action-button {
                    opacity: 1;
                }
            }
        }

        .inbox-row-visibility-policy-inherit {
            opacity: 0;

            &.visibility-policy-popover-visible {
                opacity: 1;
            }
        }

        .inbox-action-button {
            display: flex;
            border-radius: 3px;
            outline: none;
            opacity: 0;

            &.hide {
                display: none;
            }

            &:focus {
                box-shadow: 0 0 0 2px var(--color-outline-focus);
            }

            & i {
                padding: 0.3125em; /* 5px at 16px em */
                opacity: 0.3;
                color: var(--color-vdots-hover);

                &:hover {
                    opacity: 1;
                    cursor: pointer;
                }
            }
        }
    }

    .inbox-header-stream-archived {
        color: var(--color-text-message-header-archived);
    }
}

#inbox-view {
    display: none;
    position: relative;

    #inbox-dm-header {
        background-color: var(--color-background-private-message-header);
    }

    .hidden_by_filters,
    .collapsed_container {
        display: none !important;
    }
}

.inbox-container #inbox-pane #inbox-empty-without-search {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.inbox-empty-illustration {
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    background-color: var(--color-background-inbox-no-unreads-illustration);
    mask: url("../images/empty-view-illustrations/inbox-done.svg") no-repeat
        center;
}

.inbox-empty-title {
    /* Matches the font-size used for .empty-list-message */
    font-size: 1.5em;
    color: var(--color-background-inbox-no-unreads-illustration);
}

.inbox-empty-action {
    font-size: 1.3em;
    padding-top: 0.5em;
}

.inbox-container #inbox-pane .inbox-empty-action-link {
    text-decoration: underline;
    color: var(--color-text-url);
}

#inbox-filter_widget {
    margin-right: 0.3571em; /* 5px / 14px em */
    height: 2.1428em; /* 30px / 14px em */
    max-width: var(--width-inbox-filters-dropdown);
    border: 1px solid var(--color-border-inbox-search);
    background-color: var(--color-background-inbox-search);
    gap: 0.3571em; /* 5px / 14px em */
    padding: 0.2857em 0.4285em; /* 4px 6px / 14px em */

    &:hover {
        background-color: var(--color-background-inbox-search-hover);
        border: 1px solid var(--color-border-inbox-search-hover);
    }

    &:focus {
        outline: none;
    }

    &:focus-visible {
        outline: 2px solid var(--color-outline-focus);
    }
}

#recent-view-filter_widget .dropdown_widget_value,
#inbox-filter_widget .dropdown_widget_value {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: left;
}

#recent-view-filter_widget .zulip-icon-chevron-down,
#inbox-filter_widget .zulip-icon-chevron-down {
    color: var(--color-icons-inbox);
    opacity: 0.4;
}

.dropdown-list-item-common-styles .dropdown-list-bold-selected {
    font-weight: 700;
}

.recent-view-filter-dropdown-list-container .dropdown-list-wrapper,
.inbox-filter-dropdown-list-container .dropdown-list-wrapper {
    width: 15.7142em; /* 220px at 14px em */
}

.recent-view-filter-dropdown-list-container
    .dropdown-list
    .dropdown-list-item-common-styles,
.inbox-filter-dropdown-list-container
    .dropdown-list
    .dropdown-list-item-common-styles {
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    /* For columnar flex items, we need
       to make set alignment to the start
       of the flex container. This pushes
       back against non-columnar flexboxes
       that require centered alignment. */
    align-items: flex-start;
}

.recent-view-filter-dropdown-list-container .dropdown-list-item-name,
.inbox-filter-dropdown-list-container .dropdown-list-item-name {
    white-space: nowrap;
    font-weight: 500;
    padding: 0;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

.recent-view-filter-dropdown-list-container .dropdown-list-item-description,
.inbox-filter-dropdown-list-container .dropdown-list-item-description {
    white-space: nowrap;
    font-weight: 400;
    font-size: 0.9285em; /* 13px at 14px em */
    opacity: 0.8;
    padding: 0;
    text-overflow: ellipsis;
    overflow: hidden;
}