Code Monkey home page Code Monkey logo

Comments (19)

SsparKluo avatar SsparKluo commented on May 22, 2024

BTW,不知道作者大大有没有兴趣参考下隔壁notion的悬浮状态栏之类的

from rem-craft.

svchord avatar svchord commented on May 22, 2024
  1. 已修复,请等待版本更新
  2. notion主题是把 隐藏边栏 按钮融入边栏,不适合我的主题,所以在无法解决这个按钮的情况下,无法将其他按钮的样式直接抄过来。我目前没想到怎么搞,你有什么解决的建议吗?

from rem-craft.

SsparKluo avatar SsparKluo commented on May 22, 2024

image
不知道把 隐藏边栏按钮 安排在这个位置可不可以?

from rem-craft.

svchord avatar svchord commented on May 22, 2024

css只能做到以屏幕四角为原点确定位置,放在这里的话,移动分割线的时候,这个按钮不会跟着移动,看起来会很奇怪

from rem-craft.

SsparKluo avatar SsparKluo commented on May 22, 2024

想了想,确实是不太好处理。
还有个小问题,
image
image
这两个菜单的位置没有对齐。

from rem-craft.

svchord avatar svchord commented on May 22, 2024

这个不是bug,主要是为了解决帮助按钮悬浮菜单很难点到的问题,所以把菜单下移了

from rem-craft.

SsparKluo avatar SsparKluo commented on May 22, 2024

这样!还有一点小问题
image
这个备注,因为引用的样式的边框是圆角,所以和普通的文本会有割裂

from rem-craft.

svchord avatar svchord commented on May 22, 2024

我这边不是圆角,你看看是不是缓存问题

from rem-craft.

SsparKluo avatar SsparKluo commented on May 22, 2024

删掉重新下载了一遍,似乎还是圆角?
image
不过这个问题感觉不太重要..毕竟同时备注普通文本和引用挺难用的。

from rem-craft.

svchord avatar svchord commented on May 22, 2024

啊,原来你是说同时备注和引用啊,那确实没改过,不过像你说的那样,也没必要改了

from rem-craft.

SsparKluo avatar SsparKluo commented on May 22, 2024
  1. 已修复,请等待版本更新
  2. notion主题是把 隐藏边栏 按钮融入边栏,不适合我的主题,所以在无法解决这个按钮的情况下,无法将其他按钮的样式直接抄过来。我目前没想到怎么搞,你有什么解决的建议吗?

image
我觉得加到这个list里应该可以?

我自己是用代码片段加到这里了,似乎没什么问题
image

from rem-craft.

svchord avatar svchord commented on May 22, 2024

请教一下怎么改的,能贴一下代码片段就更好了

from rem-craft.

SsparKluo avatar SsparKluo commented on May 22, 2024

基本上就是借用的 notion-theme 里的代码(CSS 都是直接用的 notion-theme 的)

function loadStyle(url, id, cssName) {
    var headElement = document.head;

    let style = document.getElementById(id);
    if (id != null) {
        if (style) headElement.removeChild(style);
    }

    style = document.createElement("link");
    if (id != null) style.id = id;

    style.setAttribute("type", "text/css");
    style.setAttribute("rel", "stylesheet");
    style.setAttribute("href", url);
    if (cssName != null) style.setAttribute("class", cssName);
    headElement.appendChild(style);
    return style;
}

function addButton() {
    var buttonList = document
        .getElementById("barHelp")
        .getElementsByTagName("div")[0];
    var buttonElement = document.createElement("button");
    buttonElement.id = "hide_left_column";
    buttonElement.setAttribute("class", "b3-menu__item");
    buttonList.appendChild(buttonElement);
    buttonElement.innerHTML =
        "<svg class='b3-menu__icon'><use xlink:href='#iconLeft'></use></svg><span class='b3-menu__label'>隐藏左侧菜单</span>";

    var offNo = localStorage.getItem("hide_left_column");
    if (offNo == "1") {
        loadStyle(
            "/appearance/themes/notion-theme/style/topbar/leftcolumn.css",
            "leftColumn悬浮"
        ).setAttribute("topBarcss", "leftColumn悬浮");
        localStorage.setItem("hide_left_column", "1");
        var btn = document.getElementById("hide_left_column");
        btn.removeAttribute("class");
        btn.setAttribute("class", "b3-menu__item b3-menu__item--selected");
    } else if (offNo != "0") {
        localStorage.setItem("hide_left_column", "0");
        document.getElementById("leftColumn悬浮").remove();
        localStorage.setItem("hide_left_column", "0");
        btn.removeAttribute("class");
        btn.setAttribute("class", "b3-menu__item");
    }

    buttonElement.addEventListener("click", () => {
        var offNo = localStorage.getItem("hide_left_column");
        var btn = document.getElementById("hide_left_column");
        if (offNo == "0") {
            loadStyle(
                "/appearance/themes/notion-theme/style/topbar/leftcolumn.css",
                "leftColumn悬浮"
            ).setAttribute("topBarcss", "leftColumn悬浮");
            localStorage.setItem("hide_left_column", "1");
            btn.removeAttribute("class");
            btn.setAttribute("class", "b3-menu__item b3-menu__item--selected");
            offNo = "1";
            return;
        }

        if (offNo == "1") {
            document.getElementById("leftColumn悬浮").remove();
            localStorage.setItem("hide_left_column", "0");
            btn.removeAttribute("class");
            btn.setAttribute("class", "b3-menu__item");
            offNo = "0";
            return;
        }
    });
}

addButton();

没怎么写过 js 和 css,应该有不少可以改进的lol

from rem-craft.

svchord avatar svchord commented on May 22, 2024

js对我来说也有点困难,而且看里面还引用了notion-theme的css文件,我慢慢试着改吧,先发个版

from rem-craft.

SsparKluo avatar SsparKluo commented on May 22, 2024

简单的js,像是添加按钮之类的,我倒是可以帮忙写 ... 不过css我是真心不会了,所以就直接用了notion-theme的css

from rem-craft.

SsparKluo avatar SsparKluo commented on May 22, 2024

话说..新的版本似乎性能有一点问题?滚动起来卡卡的,打开设置的动画也不太顺滑

from rem-craft.

svchord avatar svchord commented on May 22, 2024

这些应该不是主题的问题,我应该只是在打开边栏的动画有问题…

from rem-craft.

SsparKluo avatar SsparKluo commented on May 22, 2024

emm...用其他主题的时候似乎没有问题,重装似乎也没有什么帮助
用了 恢复默认窗口 选项之后好像正常了... 如果有人卡了可以建议试试

from rem-craft.

svchord avatar svchord commented on May 22, 2024

最新版已修改并上传,请等待集市打包上架或自行下载仓库到主题文件夹使用

from rem-craft.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.