From b671451261f7e7adf655fd51c8e86ff912f1dafc Mon Sep 17 00:00:00 2001 From: Alexa B Date: Tue, 3 Nov 2020 06:45:40 -0500 Subject: [PATCH 1/2] docs: README installation clarification (#189) * docs: Fixed link to dev build instructions * docs: README installation clarification * docs: README installation clarification * update windows keystroke for task manager * More README alterations * Add bullet condensing & bullet lines tweaks Co-authored-by: Tom --- README.md | 65 +++++++++++++++++++++++++------------------------------ 1 file changed, 30 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index 06e883b..5cc7adb 100644 --- a/README.md +++ b/README.md @@ -28,42 +28,37 @@ a chrome extension may be coming soon for web client support. ## installation -> coming from <= v0.7.0? things are a bit different - have a read of [the update guide](UPDATING.md) -> before following these instructions. +> **if you are updating from v0.7.0,** things have changed, more information is available +> in this [update guide](UPDATING.md). please read that before following these instructions. -during installation/removal, make sure no notion processes are running! (check your task manager.) - -**win10** - -[install node.js](https://nodejs.org/en/download/) (_a computer restart may be required here_), -then execute `npm i -g notion-enhancer` in the command prompt. - -**macOS** - -[install node.js](https://nodejs.org/en/download/) (_a computer restart may be required here_), -then execute the following lines in the terminal: - -``` -sudo chmod -R a+wr /usr/local/lib/node_modules -sudo chmod -R a+wr /usr/local/bin -sudo chmod -R a+wr /Applications/Notion.app/Contents/Resources -npm i -g notion-enhancer -``` - -**debian/ubuntu, chromeOS, WSL (to modify the win10 app)** - -execute the following lines in the terminal: - -``` -bash curl -sL https://deb.nodesource.com setup_current.x | sudo -E bash - -sudo apt-get install -y nodejs -npm i -g notion-enhancer -``` - -**arch linux, manjaro** - -install the [aur package](https://aur.archlinux.org/packages/notion-enhancer) -with your aur helper (e.g. `yay -S notion-enhancer`). +- ensure that no notion windows/processes are running by ending all Notion processes in your task manager. + - `CMD + ALT + ESC` on mac and `CTRL + SHIFT + ESC` on windows/linux to open task manager +- [install node.js](https://nodejs.org/en/download/) + - you may need to restart your computer + - notion-enhancer will use node.js, you do not need to interact with it aside from downloading to install notion-enhancer +- open your computer's terminal, **not Node.js command prompt** + - **windows 10:** search in your start menu (click windows key or icon in bottom left of screen) for *'cmd'* or *'command prompt'* + - **mac:** search in spotlight (magnifying glass in top right of screen) for `*terminal*' +- type and enter the following line(s) based on your operating system, if there are multiple lines, make sure to enter them *one by one* + - **windows 10:** + ``` + npm i -g notion-enhancer + ``` + - **mac:** This may ask you to enter your password, instead of hiding your password with *** symbols, mac terminal hides it by making it invisible. Simply type your password and click enter. + ``` + sudo chmod -R a+wr /usr/local/lib/node_modules + sudo chmod -R a+wr /usr/local/bin + sudo chmod -R a+wr /Applications/Notion.app/Contents/Resources + npm i -g notion-enhancer + ``` + - **debian/ubuntu, chromeOS, WSL (to modify the win10 app):** + ``` + bash curl -sL https://deb.nodesource.com setup_current.x | sudo -E bash - + sudo apt-get install -y nodejs + npm i -g notion-enhancer + ``` + - **arch linux, manjaro:** + - install the [aur package](https://aur.archlinux.org/packages/notion-enhancer) with your aur helper (e.g. `yay -S notion-enhancer`). ### command-line interface From f1dd72cf118c940920ede572406ce3da1b8e9b21 Mon Sep 17 00:00:00 2001 From: Ryo Hilmawan <54142180+CloudHill@users.noreply.github.com> Date: Tue, 3 Nov 2020 18:51:47 +0700 Subject: [PATCH 2/2] Property Layout Modification (#201) * Update mod.js * Update styles.css --- mods/property-layout/mod.js | 25 +++++++++++++++++++------ mods/property-layout/styles.css | 24 +++++++++++++++++++----- 2 files changed, 38 insertions(+), 11 deletions(-) diff --git a/mods/property-layout/mod.js b/mods/property-layout/mod.js index 10539da..5b5426a 100644 --- a/mods/property-layout/mod.js +++ b/mods/property-layout/mod.js @@ -43,16 +43,29 @@ module.exports = { 'propertylayout-hidden' ); const toggle = createElement( - '' + '' + ); + toggle.prepend( + createElement('') ); toggle.addEventListener('click', (event) => { - properties.classList.toggle('propertylayout-hidden'); - toggle.setAttribute( - 'data-action', - properties.classList.contains('propertylayout-hidden') + properties.style.maxHeight = properties.children[0].offsetHeight + 'px'; + setTimeout(() => { + properties.classList.toggle('propertylayout-hidden'); + toggle.setAttribute( + 'data-action', + properties.classList.contains('propertylayout-hidden') ? 'show' : 'hide' - ); + ); + }, 0); + }); + const propObserver = new MutationObserver(() => { + properties.style.maxHeight = ''; + }); + propObserver.observe(properties, { + childList: true, + subtree: true, }); if (properties.previousElementSibling) { properties.previousElementSibling.append(toggle); diff --git a/mods/property-layout/styles.css b/mods/property-layout/styles.css index 8ebf4c1..96016ee 100644 --- a/mods/property-layout/styles.css +++ b/mods/property-layout/styles.css @@ -5,20 +5,26 @@ * under the MIT license */ +.propertylayout-enhanced { + overflow: hidden; + transition: max-height 200ms ease-in, opacity 200ms ease-in; +} .propertylayout-hidden { - display: none; + max-height: 0 !important; + opacity: 0; } .propertylayout-toggle { width: 100%; text-align: left; font-size: 0.85em; + font-weight: 600; padding: 0.25em; background: transparent; color: var(--theme--text_ui); border: none; border-radius: 2px; - transition: background 200ms; + transition: background 200ms, margin-bottom 200ms ease-in; } .notion-scroller.vertical > div > :first-child .propertylayout-toggle { margin-top: 1em; @@ -26,9 +32,17 @@ .propertylayout-toggle[data-action='show'] { margin-bottom: 1em; } -.propertylayout-toggle::before { - content: '→ ' attr(data-action) ' '; -} .propertylayout-toggle:hover { background: var(--theme--interactive_hover); } + +.propertylayout-toggle .triangle { + width: 0.6875em; + height: 0.6875em; + margin: 0 0.75em 0 0.5em; + transition: transform 200ms ease-out 0s; + transform: rotateZ(90deg); +} +.propertylayout-toggle[data-action="hide"] .triangle { + transform: rotateZ(180deg); +}