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": {
|
||||
"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",
|
||||
"main": "./lib/wordcount",
|
||||
"main": "./lib/commandpalette",
|
||||
"version": "0.0.1",
|
||||
"description": "A command palette for inkdrop",
|
||||
"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