siyuan-note / siyuan

A privacy-first, self-hosted, fully open source personal knowledge management software, written in typescript and golang.
https://b3log.org/siyuan
GNU Affero General Public License v3.0
22.97k stars 1.62k forks source link

改变数据库 `添加条目` `加载更多` 按钮的结构 #13206

Closed TCOTC closed 2 days ago

TCOTC commented 3 days ago

我的需求是使用这个代码片段:

.av__container {
    width: 100%;

    .av__body {
        min-width: 100%;

        .av__row--header {
            .block__icons {
                padding: unset;
                flex-direction: row; /* "添加字段"和"更多"按钮调换顺序 */
                flex-grow: 1;
                align-items: stretch; /* 使子元素在垂直方向上填满父容器 */

                .block__icon {
                    border-radius: unset;
                    padding: 0 10px;

                    &:nth-child(1) {
                        order: 1;
                        flex-grow: 1;
                    }

                    &:nth-child(3) {
                        order: 0; /* 添加字段按钮排在前面 */
                    }
                }

                >.fn__space {
                    display: none;
                }
            }
        }

        .av__row--util {
            .av__colsticky {
                width: 100%;
                flex-direction: column; /* "添加条目"和"加载更多"按钮分成两行显示 */

                >.b3-button {
                    border-radius: unset;
                    margin: unset;
                    padding: unset;
                    height: 2.7em;
                    justify-content: flex-start;
                    border-bottom: 1px solid var(--b3-theme-surface-lighter);
                    position: sticky;
                    left: 5px;

                    span {
                        position: sticky;
                        left: 28px;
                    }

                    svg {
                        position: sticky;
                        left: 5px;
                        padding-right: 10px;

                        &[data-type="set-page-size"] {
                            margin-left: auto;
                            padding: 2px 6px;
                            right: 5px;

                            &:hover {
                                background-color: var(--b3-list-hover);
                            }
                        }
                    }
                }

                > .b3-button:first-of-type {
                    order: 2; /* 将 "添加条目" 按钮放在底部 */
                }

                > .b3-button:last-of-type {
                    order: 1; /* 将 "加载更多" 按钮放在顶部 */
                }

                >.fn__space {
                    display: none;
                }
            }
        }

        .av__row--footer {
            border-top: unset;
        }
    }
}

实现这个类似 Notion 的样式:#12950

video.webm

但目前的结构实现不了,必须要改动一点