Update webpack config
- write bundle to `/build` - add support for SASS - improve options view as a proof o concept for styling
This commit is contained in:
Manuel Bouza
63
src/css/_form.scss
Normal file
63
src/css/_form.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
#moco-bx-container {
|
||||
.form-group {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
text-muted {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
position: relative;
|
||||
display: table;
|
||||
border-collapse: separate;
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.input-group-addon {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-weight: normal;
|
||||
color: #555555;
|
||||
text-align: center;
|
||||
background-color: #eeeeee;
|
||||
border: 1px solid #cccccc;
|
||||
border-left: none;
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
color: white;
|
||||
background-image: none;
|
||||
background-color: #7dc332;
|
||||
border-color: #7dc332;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #639a28;
|
||||
border-color: #639a28;
|
||||
}
|
||||
}
|
||||
}
|
||||
63
src/css/_mixins.scss
Normal file
63
src/css/_mixins.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
$spacer: 1rem !default;
|
||||
$spacers: (
|
||||
0: 0,
|
||||
1: (
|
||||
$spacer * 0.25
|
||||
),
|
||||
2: (
|
||||
$spacer * 0.5
|
||||
),
|
||||
3: $spacer,
|
||||
4: (
|
||||
$spacer * 1.5
|
||||
),
|
||||
5: (
|
||||
$spacer * 3
|
||||
)
|
||||
);
|
||||
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
@each $size, $length in $spacers {
|
||||
.#{$abbrev}-#{$size} {
|
||||
#{$prop}: $length !important;
|
||||
}
|
||||
.#{$abbrev}t-#{$size},
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-top: $length !important;
|
||||
}
|
||||
.#{$abbrev}r-#{$size},
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-right: $length !important;
|
||||
}
|
||||
.#{$abbrev}b-#{$size},
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-bottom: $length !important;
|
||||
}
|
||||
.#{$abbrev}l-#{$size},
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-left: $length !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $size, $length in $spacers {
|
||||
.m-auto {
|
||||
margin: auto !important;
|
||||
}
|
||||
.mt-auto,
|
||||
.my-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
.mr-auto,
|
||||
.mx-auto {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
.mb-auto,
|
||||
.my-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
.ml-auto,
|
||||
.mx-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
45
src/css/main.scss
Normal file
45
src/css/main.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
@import "mixins";
|
||||
@import "form";
|
||||
|
||||
#moco-bx-bubble {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
margin-left: -30px;
|
||||
z-index: 1000;
|
||||
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
box-shadow: -1px -1px 15px 4px rgba(0, 0, 0, 0.05),
|
||||
2px 2px 15px 4px rgba(0, 0, 0, 0.05);
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#moco-bx-container {
|
||||
.moco-bx-modal {
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 2000; /* Sit on top */
|
||||
padding-top: 100px; /* Location of the box */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0, 0, 0); /* Fallback color */
|
||||
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
.moco-bx-modal-content {
|
||||
background-color: white;
|
||||
width: 600px;
|
||||
padding: 40px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -1,19 +1,16 @@
|
||||
import DomainCheck from './services/DomainCheck'
|
||||
import DomainCheck from "./services/DomainCheck";
|
||||
|
||||
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
|
||||
// inject files only after the page is fully loaded
|
||||
if (changeInfo.status != 'complete') return
|
||||
if (changeInfo.status != "complete") return;
|
||||
|
||||
// inject files only for supported websites
|
||||
const domainCheck = new DomainCheck(tab.url)
|
||||
if (!domainCheck.hasMatch) return
|
||||
const domainCheck = new DomainCheck(tab.url);
|
||||
if (!domainCheck.hasMatch) return;
|
||||
|
||||
// inject css + js
|
||||
chrome.tabs.insertCSS(tabId, {file: "/styles.css"}, () => {
|
||||
chrome.tabs.executeScript(tabId, {file: "/bubble.js"}, () => {
|
||||
// chrome.tabs.executeScript(tabId, {file: "/popup.js"}, () => {
|
||||
console.log("injected bubble.js")
|
||||
// })
|
||||
})
|
||||
})
|
||||
})
|
||||
chrome.tabs.executeScript(tabId, { file: "/bubble.js" }, () => {
|
||||
// chrome.tabs.executeScript(tabId, {file: "/popup.js"}, () => {
|
||||
console.log("injected bubble.js");
|
||||
// })
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
import { createElement } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import Bubble from './components/Bubble'
|
||||
import { createElement } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import Bubble from "./components/Bubble";
|
||||
import "../css/main.scss";
|
||||
|
||||
// don't initiate bubble twice
|
||||
if (!document.querySelector('#moco-bx-container')) {
|
||||
const domContainer = document.createElement('div')
|
||||
domContainer.setAttribute('id', 'moco-bx-container')
|
||||
document.body.appendChild(domContainer)
|
||||
if (!document.querySelector("#moco-bx-container")) {
|
||||
const domContainer = document.createElement("div");
|
||||
domContainer.setAttribute("id", "moco-bx-container");
|
||||
document.body.appendChild(domContainer);
|
||||
|
||||
const domBubble = document.createElement('div')
|
||||
domBubble.setAttribute('id', 'moco-bx-bubble')
|
||||
document.body.appendChild(domBubble)
|
||||
const domBubble = document.createElement("div");
|
||||
domBubble.setAttribute("id", "moco-bx-bubble");
|
||||
document.body.appendChild(domBubble);
|
||||
|
||||
ReactDOM.render(createElement(Bubble), domBubble)
|
||||
ReactDOM.render(createElement(Bubble), domBubble);
|
||||
}
|
||||
|
||||
@@ -1,43 +1,44 @@
|
||||
import React, { Component, Fragment } from 'react'
|
||||
import Modal, { Content } from 'components/Modal'
|
||||
import Form from 'components/Form'
|
||||
import { observable } from 'mobx'
|
||||
import { observer } from 'mobx-react'
|
||||
import React, { Component } from "react";
|
||||
import Modal, { Content } from "components/Modal";
|
||||
import Form from "components/Form";
|
||||
import { observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import logoUrl from "../../images/logo.png";
|
||||
|
||||
@observer
|
||||
class Bubble extends Component {
|
||||
@observable open = false
|
||||
@observable open = false;
|
||||
|
||||
onOpen = (_e) => {
|
||||
this.open = true
|
||||
}
|
||||
onOpen = _e => {
|
||||
this.open = true;
|
||||
};
|
||||
|
||||
onClose = (_e) => {
|
||||
this.open = false
|
||||
}
|
||||
onClose = _e => {
|
||||
this.open = false;
|
||||
};
|
||||
|
||||
// RENDER -------------------------------------------------------------------
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<>
|
||||
<img
|
||||
onClick={this.onOpen}
|
||||
src={chrome.extension.getURL('src/images/logo.png')}
|
||||
src={chrome.extension.getURL(logoUrl)}
|
||||
width="50%"
|
||||
/>
|
||||
|
||||
{this.open &&
|
||||
{this.open && (
|
||||
<Modal>
|
||||
<Content>
|
||||
<Form />
|
||||
<button onClick={this.onClose}>Close</button>
|
||||
</Content>
|
||||
</Modal>
|
||||
}
|
||||
</Fragment>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Bubble
|
||||
export default Bubble;
|
||||
|
||||
@@ -1,57 +1,74 @@
|
||||
import React, { Component } from 'react'
|
||||
import { observable } from 'mobx'
|
||||
import { observer } from 'mobx-react'
|
||||
import React, { Component } from "react";
|
||||
import { observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
|
||||
@observer
|
||||
class Setup extends Component {
|
||||
@observable loading = true
|
||||
@observable subdomain = ""
|
||||
@observable apiKey = ""
|
||||
@observable loading = true;
|
||||
@observable subdomain = "";
|
||||
@observable apiKey = "";
|
||||
|
||||
componentDidMount() {
|
||||
chrome.storage.sync.get(null, (store) => {
|
||||
this.loading = false
|
||||
this.subdomain = store.subdomain || ""
|
||||
this.apiKey = store.api_key || ""
|
||||
})
|
||||
chrome.storage.sync.get(null, store => {
|
||||
this.loading = false;
|
||||
this.subdomain = store.subdomain || "";
|
||||
this.apiKey = store.api_key || "";
|
||||
});
|
||||
}
|
||||
|
||||
// EVENTS
|
||||
|
||||
onChange = (e) => {
|
||||
this[e.target.name] = e.target.value
|
||||
}
|
||||
onChange = event => {
|
||||
this[event.target.name] = event.target.value;
|
||||
};
|
||||
|
||||
onSubmit = (_e) => {
|
||||
chrome.storage.sync.set({
|
||||
subdomain: this.subdomain.trim(),
|
||||
api_key: this.apiKey.trim(),
|
||||
}, () => window.close())
|
||||
}
|
||||
onSubmit = _event => {
|
||||
chrome.storage.sync.set(
|
||||
{
|
||||
subdomain: this.subdomain.trim(),
|
||||
api_key: this.apiKey.trim()
|
||||
},
|
||||
() => window.close()
|
||||
);
|
||||
};
|
||||
|
||||
// RENDER -------------------------------------------------------------------
|
||||
|
||||
render() {
|
||||
if (this.loading) return null
|
||||
if (this.loading) return null;
|
||||
|
||||
return (
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<input
|
||||
type="text"
|
||||
name="subdomain"
|
||||
value={this.subdomain}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
name="apiKey"
|
||||
value={this.apiKey}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<h2>Einstellungen</h2>
|
||||
<div className="form-group">
|
||||
<label>Internetadresse</label>
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
name="subdomain"
|
||||
value={this.subdomain}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<span className="input-group-addon">.mocoapp.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>API Key</label>
|
||||
<input
|
||||
type="text"
|
||||
name="apiKey"
|
||||
value={this.apiKey}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
<div className="text-muted mt-1">
|
||||
Deinen API-Schlüssel findest du in der MOCO-App unter
|
||||
Profil/Integrationen.
|
||||
</div>
|
||||
</div>
|
||||
<button>Save</button>
|
||||
</form>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Setup
|
||||
export default Setup;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createElement } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import Setup from './components/Setup'
|
||||
import { createElement } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import Setup from "./components/Setup";
|
||||
import "../css/main.scss";
|
||||
|
||||
const domContainer = document.querySelector('#moco-bx-container')
|
||||
ReactDOM.render(createElement(Setup), domContainer)
|
||||
const domContainer = document.querySelector("#moco-bx-container");
|
||||
ReactDOM.render(createElement(Setup), domContainer);
|
||||
|
||||
42
src/manifest.json
Normal file
42
src/manifest.json
Normal file
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "MOCO Zeiterfassung",
|
||||
"short_name": "MOCO",
|
||||
"description": "MOCO Zeiterfassung Plugin",
|
||||
"version": "0.9.20",
|
||||
"manifest_version": 2,
|
||||
"description": "MOCO Time Tracking Plugin",
|
||||
"icons": {
|
||||
"16": "src/images/logo.png",
|
||||
"48": "src/images/logo.png",
|
||||
"128": "src/images/logo.png"
|
||||
},
|
||||
"options_ui": {
|
||||
"page": "options.html",
|
||||
"chrome_style": true
|
||||
},
|
||||
"permissions": [
|
||||
"https://*.mocoapp.com/*",
|
||||
"background",
|
||||
"storage",
|
||||
"tabs",
|
||||
"https://*/"
|
||||
],
|
||||
"optional_permissions": ["*://*/"],
|
||||
"background": {
|
||||
"scripts": ["background.js"]
|
||||
},
|
||||
"browser_action": {
|
||||
"default_icon": "src/images/logo.png",
|
||||
"default_title": "MOCO Time Tracking",
|
||||
"default_popup": "popup.html"
|
||||
},
|
||||
"web_accessible_resources": ["src/images/*"],
|
||||
"commands": {
|
||||
"_execute_browser_action": {
|
||||
"suggested_key": {
|
||||
"default": "Ctrl+M",
|
||||
"mac": "Command+M"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
9
src/options.html
Normal file
9
src/options.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="moco-bx-container"></div>
|
||||
</body>
|
||||
</html>
|
||||
9
src/popup.html
Normal file
9
src/popup.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="moco-bx-container"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user