1
0
Fork 0
mirror of https://github.com/anyproto/anytype-ts.git synced 2025-06-08 05:57:02 +09:00

refactoring

This commit is contained in:
Andrew Simachev 2023-08-20 18:48:33 +02:00
parent b321dd694f
commit 5c8b0aac00
No known key found for this signature in database
GPG key ID: 49A163D0D14E6FD8
17 changed files with 98 additions and 57 deletions

View file

@ -1 +0,0 @@
body { width: 400px; height: 800px; }

View file

@ -1,2 +0,0 @@
(() => {
})();

View file

@ -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>

View file

@ -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
View 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';
})();

View file

@ -24,7 +24,7 @@
},
"content_scripts": [
{
"js": [ "js/main.js" ],
"js": [ "js/foreground.js" ],
"matches": [ "<all_urls>" ]
}
],

View file

@ -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>

View file

@ -1 +0,0 @@
body { width: 400px; height: 800px; }

View file

@ -1,2 +0,0 @@
(() => {
})();

View file

@ -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));

View file

@ -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;

View file

@ -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 = [

View file

@ -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 = [

View file

@ -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);
};
});

View 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; }
}

View file

@ -0,0 +1,2 @@
#anytypeWebclipper-iframe {
}

12
extension/scss/popup.scss Normal file
View 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; }
}
}