mirror of
https://github.com/anyproto/anytype-ts.git
synced 2025-06-08 05:57:02 +09:00
refactoring
This commit is contained in:
parent
b321dd694f
commit
5c8b0aac00
17 changed files with 98 additions and 57 deletions
1
dist/extension/iframe/iframe.css
vendored
1
dist/extension/iframe/iframe.css
vendored
|
@ -1 +0,0 @@
|
|||
body { width: 400px; height: 800px; }
|
2
dist/extension/iframe/iframe.js
vendored
2
dist/extension/iframe/iframe.js
vendored
|
@ -1,2 +0,0 @@
|
|||
(() => {
|
||||
})();
|
4
dist/extension/iframe/index.html
vendored
4
dist/extension/iframe/index.html
vendored
|
@ -1,10 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./iframe.css" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>Anytype Web Clipper</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="./iframe.js"></script>
|
||||
<script type="text/javascript" src="../js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
4
dist/extension/js/background.js
vendored
4
dist/extension/js/background.js
vendored
|
@ -45,8 +45,8 @@
|
|||
};
|
||||
|
||||
chrome.contextMenus.create({
|
||||
id: 'workTime',
|
||||
title: 'WorkTime',
|
||||
id: 'webclipper',
|
||||
title: 'Anytype Web Clipper',
|
||||
contexts: [ 'selection' ]
|
||||
});
|
||||
|
||||
|
|
26
dist/extension/js/foreground.js
vendored
Normal file
26
dist/extension/js/foreground.js
vendored
Normal file
|
@ -0,0 +1,26 @@
|
|||
(() => {
|
||||
|
||||
const body = document.querySelector('body');
|
||||
const iframe = document.createElement('iframe');
|
||||
|
||||
if (body && !document.getElementById(iframe.id)) {
|
||||
body.appendChild(iframe);
|
||||
};
|
||||
|
||||
iframe.id = 'anytypeWebclipper-iframe';
|
||||
iframe.src = chrome.runtime.getURL('iframe/index.html');
|
||||
iframe.style.position = 'fixed';
|
||||
iframe.style.zIndex = 100000;
|
||||
iframe.style.width = '800px';
|
||||
iframe.style.height = '600px';
|
||||
iframe.style.background = '#fff';
|
||||
iframe.style.borderRadius = '12px';
|
||||
iframe.style.left = '50%';
|
||||
iframe.style.top = '50%';
|
||||
iframe.style.marginTop = '-300px';
|
||||
iframe.style.marginLeft = '-400px';
|
||||
iframe.style.border = 0;
|
||||
iframe.style.boxShadow = '0px 2px 28px rgba(0, 0, 0, 0.2)';
|
||||
iframe.style.display = 'none';
|
||||
|
||||
})();
|
2
dist/extension/manifest.json
vendored
2
dist/extension/manifest.json
vendored
|
@ -24,7 +24,7 @@
|
|||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
"js": [ "js/main.js" ],
|
||||
"js": [ "js/foreground.js" ],
|
||||
"matches": [ "<all_urls>" ]
|
||||
}
|
||||
],
|
||||
|
|
4
dist/extension/popup/index.html
vendored
4
dist/extension/popup/index.html
vendored
|
@ -1,10 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="./popup.css" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>Anytype Web Clipper</title>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="./popup.js"></script>
|
||||
<script type="text/javascript" src="../js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
1
dist/extension/popup/popup.css
vendored
1
dist/extension/popup/popup.css
vendored
|
@ -1 +0,0 @@
|
|||
body { width: 400px; height: 800px; }
|
2
dist/extension/popup/popup.js
vendored
2
dist/extension/popup/popup.js
vendored
|
@ -1,2 +0,0 @@
|
|||
(() => {
|
||||
})();
|
|
@ -2,27 +2,29 @@ import * as React from 'react';
|
|||
import * as ReactDOM from 'react-dom';
|
||||
import $ from 'jquery';
|
||||
import Popup from './popup';
|
||||
import Foreground from './foreground';
|
||||
import Iframe from './iframe';
|
||||
import Util from './lib/util';
|
||||
import Extension from 'json/extension.json';
|
||||
|
||||
const rootId = `${Extension.clipper.prefix}-root`;
|
||||
import './scss/common.scss';
|
||||
|
||||
let rootId = '';
|
||||
let component: any = null;
|
||||
|
||||
if (Util.isPopup()) {
|
||||
rootId = `${Extension.clipper.prefix}-popup`;
|
||||
component = <Popup />;
|
||||
} else
|
||||
if (Util.isIframe()) {
|
||||
rootId = `${Extension.clipper.prefix}-iframe`;
|
||||
component = <Iframe />;
|
||||
};
|
||||
|
||||
const body = $('body');
|
||||
const root = $(`<div id="${rootId}"></div>`);
|
||||
|
||||
if (!$(`#${rootId}`).length) {
|
||||
body.append(root);
|
||||
};
|
||||
|
||||
let component: any = null;
|
||||
if (Util.isPopup()) {
|
||||
component = <Popup />;
|
||||
} else
|
||||
if (Util.isIframe()) {
|
||||
component = <Iframe />;
|
||||
} else {
|
||||
component = <Foreground />;
|
||||
body.append(root).addClass(rootId);
|
||||
};
|
||||
|
||||
ReactDOM.render(component, root.get(0));
|
|
@ -1,30 +0,0 @@
|
|||
import * as React from 'react';
|
||||
|
||||
class Foreground extends React.Component {
|
||||
|
||||
render () {
|
||||
/* @ts-ignore */
|
||||
const url = chrome.runtime.getURL('iframe/index.html');
|
||||
const style: any = {
|
||||
position: 'fixed',
|
||||
zIndex: 10000,
|
||||
width: 800,
|
||||
height: 600,
|
||||
background: '#fff',
|
||||
borderRadius: 12,
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
marginTop: -300,
|
||||
marginLeft: -400,
|
||||
border: 0,
|
||||
boxShadow: '0px 2px 28px rgba(0, 0, 0, 0.2)',
|
||||
};
|
||||
|
||||
return (
|
||||
<iframe src={url} style={style} />
|
||||
);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
export default Foreground;
|
|
@ -9,6 +9,8 @@ import { commonStore, authStore, blockStore, detailStore, dbStore, menuStore, po
|
|||
import Index from './iframe/index';
|
||||
import Util from './lib/util';
|
||||
|
||||
require('./scss/iframe.scss');
|
||||
|
||||
configure({ enforceActions: 'never' });
|
||||
|
||||
const Routes = [
|
||||
|
|
|
@ -9,6 +9,8 @@ import { commonStore, authStore, blockStore, detailStore, dbStore, menuStore, po
|
|||
import Index from './popup/index';
|
||||
import Util from './lib/util';
|
||||
|
||||
import './scss/popup.scss';
|
||||
|
||||
configure({ enforceActions: 'never' });
|
||||
|
||||
const Routes = [
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Label, Button, Frame } from 'Component';
|
||||
import { I } from 'Lib';
|
||||
import Url from 'json/url.json';
|
||||
|
||||
interface State {
|
||||
error: string;
|
||||
|
@ -10,15 +12,33 @@ const Index = observer(class Index extends React.Component<I.PageComponent, Stat
|
|||
|
||||
constructor (props: I.PageComponent) {
|
||||
super(props);
|
||||
|
||||
this.onLogin = this.onLogin.bind(this);
|
||||
this.onDownload = this.onDownload.bind(this);
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className={`page pageIndex`}>
|
||||
<div className="page pageIndex">
|
||||
<Frame>
|
||||
<Label text="To save in Anytype you need to Pair with app" />
|
||||
|
||||
<div className="buttons">
|
||||
<Button color="orange" className="c28" text="Pair with app" onClick={this.onLogin} />
|
||||
<Button color="blank" className="c28" text="Download app" onClick={this.onDownload} />
|
||||
</div>
|
||||
</Frame>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
onLogin () {
|
||||
};
|
||||
|
||||
onDownload () {
|
||||
window.open(Url.download);
|
||||
};
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
|
11
extension/scss/common.scss
Normal file
11
extension/scss/common.scss
Normal file
|
@ -0,0 +1,11 @@
|
|||
@import "~scss/font.scss";
|
||||
|
||||
body.anytypeWebclipper-iframe,
|
||||
body.anytypeWebclipper-popup {
|
||||
font-family: 'Inter'; font-size: 14px; line-height: 20px; letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
#anytypeWebclipper-iframe,
|
||||
#anytypeWebclipper-popup {
|
||||
* { box-sizing: border-box; border: 0px; margin: 0px; padding: 0px; }
|
||||
}
|
2
extension/scss/iframe.scss
Normal file
2
extension/scss/iframe.scss
Normal file
|
@ -0,0 +1,2 @@
|
|||
#anytypeWebclipper-iframe {
|
||||
}
|
12
extension/scss/popup.scss
Normal file
12
extension/scss/popup.scss
Normal file
|
@ -0,0 +1,12 @@
|
|||
body.anytypeWebclipper-popup { width: 268px; font-family: 'Inter'; font-size: 14px; line-height: 20px; letter-spacing: 0.2px; }
|
||||
|
||||
#anytypeWebclipper-popup {
|
||||
@import "~scss/form/button.scss";
|
||||
@import "~scss/component/frame.scss";
|
||||
|
||||
.page.pageIndex { height: 232px; }
|
||||
.page.pageIndex {
|
||||
.buttons { display: flex; flex-direction: column; gap: 8px 0px; }
|
||||
.frame { padding: 0px 32px; width: 100%; display: flex; flex-direction: column; gap: 24px 0px; justify-content: center; text-align: center; }
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue