mirror of
https://github.com/ryanamay/inkdrop-command-palette.git
synced 2024-09-20 01:40:34 +00:00
style: styled from template
This commit is contained in:
parent
6da28ef810
commit
2c6a630093
12 changed files with 111 additions and 91 deletions
|
@ -1,3 +0,0 @@
|
||||||
## 0.1.0 - First Release
|
|
||||||
* Every feature added
|
|
||||||
* Every bug fixed
|
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"body": {
|
"body": {
|
||||||
"ctrl-alt-o": "wordcount:toggle"
|
"ctrl-shift-,": "commandpalette:toggle"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
15
lib/commandpalette.js
Normal file
15
lib/commandpalette.js
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
"use babel";
|
||||||
|
|
||||||
|
import CommandPalette from "./components/palette";
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
activate() {
|
||||||
|
inkdrop.components.registerClass(CommandPalette);
|
||||||
|
inkdrop.layouts.addComponentToLayout("modal", "CommandPalette");
|
||||||
|
},
|
||||||
|
|
||||||
|
deactivate() {
|
||||||
|
inkdrop.layouts.removeComponentFromLayout("modal", "CommandPalette");
|
||||||
|
inkdrop.components.deleteClass(CommandPalette);
|
||||||
|
},
|
||||||
|
};
|
63
lib/components/palette.js
Normal file
63
lib/components/palette.js
Normal file
|
@ -0,0 +1,63 @@
|
||||||
|
"use babel";
|
||||||
|
|
||||||
|
import React, { useEffect, useCallback, useRef, useLayoutEffect } from "react";
|
||||||
|
import { logger, useModal } from "inkdrop";
|
||||||
|
|
||||||
|
const CommandPalette = (props) => {
|
||||||
|
const modal = useModal();
|
||||||
|
const { Dialog } = inkdrop.components.classes;
|
||||||
|
|
||||||
|
const searchRef = useRef(null);
|
||||||
|
|
||||||
|
const toggle = useCallback(() => {
|
||||||
|
modal.show();
|
||||||
|
logger.debug("Dialog was toggled!");
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const sub = inkdrop.commands.add(document.body, {
|
||||||
|
"commandpalette:toggle": toggle,
|
||||||
|
});
|
||||||
|
return () => sub.dispose();
|
||||||
|
}, [toggle]);
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
document
|
||||||
|
.getElementById("cpInput")
|
||||||
|
.addEventListener("visibilitychange", onVisibilityChange);
|
||||||
|
|
||||||
|
return () =>
|
||||||
|
document
|
||||||
|
.getElementById("cpInput")
|
||||||
|
.removeEventListener("visibilitychange", onVisibilityChange);
|
||||||
|
});
|
||||||
|
|
||||||
|
const onVisibilityChange = () => {
|
||||||
|
if (element.classList.contains("visible")) {
|
||||||
|
document.getElementById("cpInput").focus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog {...modal.state} onBackdropClick={modal.close}>
|
||||||
|
<Dialog.Content className="commandpalette">
|
||||||
|
<div role="dialog" aria-modal="true">
|
||||||
|
<div>
|
||||||
|
<div className="ui small input">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search files by name (append > for actions or ! for formatting)"
|
||||||
|
spellCheck="false"
|
||||||
|
className="cpInput"
|
||||||
|
id="cpInput"
|
||||||
|
ref={searchRef}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CommandPalette;
|
|
@ -1,35 +0,0 @@
|
||||||
'use babel';
|
|
||||||
|
|
||||||
import React, { useEffect, useCallback } from 'react'
|
|
||||||
import { logger, useModal } from 'inkdrop'
|
|
||||||
|
|
||||||
const WordcountMessageDialog = (props) => {
|
|
||||||
const modal = useModal()
|
|
||||||
const { Dialog } = inkdrop.components.classes
|
|
||||||
|
|
||||||
const toggle = useCallback(() => {
|
|
||||||
modal.show()
|
|
||||||
logger.debug('Wordcount was toggled!')
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const sub = inkdrop.commands.add(document.body, {
|
|
||||||
'wordcount:toggle': toggle
|
|
||||||
})
|
|
||||||
return () => sub.dispose()
|
|
||||||
}, [toggle])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog {...modal.state} onBackdropClick={modal.close}>
|
|
||||||
<Dialog.Title>Wordcount</Dialog.Title>
|
|
||||||
<Dialog.Content>Wordcount was toggled!</Dialog.Content>
|
|
||||||
<Dialog.Actions>
|
|
||||||
<button className="ui button" onClick={modal.close}>
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
</Dialog.Actions>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default WordcountMessageDialog
|
|
|
@ -1,23 +0,0 @@
|
||||||
'use babel';
|
|
||||||
|
|
||||||
import WordcountMessageDialog from './wordcount-message-dialog';
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
|
|
||||||
activate() {
|
|
||||||
inkdrop.components.registerClass(WordcountMessageDialog);
|
|
||||||
inkdrop.layouts.addComponentToLayout(
|
|
||||||
'modal',
|
|
||||||
'WordcountMessageDialog'
|
|
||||||
)
|
|
||||||
},
|
|
||||||
|
|
||||||
deactivate() {
|
|
||||||
inkdrop.layouts.removeComponentFromLayout(
|
|
||||||
'modal',
|
|
||||||
'WordcountMessageDialog'
|
|
||||||
)
|
|
||||||
inkdrop.components.deleteClass(WordcountMessageDialog);
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
18
menus/commandpalette.json
Normal file
18
menus/commandpalette.json
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"menu": [
|
||||||
|
{
|
||||||
|
"label": "Plugins",
|
||||||
|
"submenu": [
|
||||||
|
{
|
||||||
|
"label": "Command Palette",
|
||||||
|
"submenu": [
|
||||||
|
{
|
||||||
|
"label": "Show/Hide Command Palette",
|
||||||
|
"command": "commandpalette:toggle"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
|
@ -1,26 +0,0 @@
|
||||||
{
|
|
||||||
"context-menu": {
|
|
||||||
".CodeMirror": [
|
|
||||||
{
|
|
||||||
"label": "Toggle wordcount",
|
|
||||||
"command": "wordcount:toggle"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"menu": [
|
|
||||||
{
|
|
||||||
"label": "Plugins",
|
|
||||||
"submenu": [
|
|
||||||
{
|
|
||||||
"label": "wordcount",
|
|
||||||
"submenu": [
|
|
||||||
{
|
|
||||||
"label": "Toggle",
|
|
||||||
"command": "wordcount:toggle"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "command-palette",
|
"name": "command-palette",
|
||||||
"main": "./lib/wordcount",
|
"main": "./lib/commandpalette",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"description": "A command palette for inkdrop",
|
"description": "A command palette for inkdrop",
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
|
|
9
styles/palettemodal.less
Normal file
9
styles/palettemodal.less
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
.commandpalette {
|
||||||
|
padding: 0rem !important ;
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cpInput {
|
||||||
|
width: 400px;
|
||||||
|
background-color: var(--page-background) !important ;
|
||||||
|
}
|
|
@ -1,2 +0,0 @@
|
||||||
.wordcount {
|
|
||||||
}
|
|
4
yarn.lock
Normal file
4
yarn.lock
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||||
|
# yarn lockfile v1
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue