7 |
8 | 
9 |
10 | 
11 |
12 | # Download
13 |
14 |
15 | [**Flawesome v0.2.3 Pre-Release For Linux (.deb)**](https://github.com/ashishBharadwaj/flawesome/releases/download/v0.2.3/flawesome_0.2.3_amd64.deb)
16 |
17 | [**Flawesome v0.2.3 Pre-Release For Linux (.AppImage)**](https://github.com/ashishBharadwaj/flawesome/releases/download/v0.2.3/Flawesome-0.2.3.AppImage)
18 |
19 | [**Flawesome v0.2.3 Pre-Release For Windows 64-Bit**](https://github.com/ashishBharadwaj/flawesome/releases/download/v0.2.3/Flawesome.Setup.0.2.3.exe)
20 |
21 | Go to [**Releases**](https://github.com/ashishBharadwaj/flawesome/releases) to see all the releases.
22 |
23 | ** Currently I have only generated the package for Linux and Windows, soon it will be available for macos.
24 |
25 | # Build the setup yourself:
26 |
27 | ** Prequisite: Git, Node, Yarn package manager
28 |
29 | - Clone the repo:
30 |
31 | ```bash
32 | $ git clone https://github.com/ashishBharadwaj/flawesome.git
33 | ```
34 |
35 | - Install the dependencies:
36 |
37 | ```bash
38 | $ yarn install
39 | ```
40 |
41 | - Build for production:
42 |
43 | ```bash
44 | $ yarn build
45 | ```
46 |
47 | - Create Package:
48 |
49 | ```bash
50 | $ yarn package
51 | ```
52 |
53 | ## License
54 | GNU General Public License v3.0 (c) 2020 Ashish Bharadwaj J
55 | Refer to License.md file for details
56 |
--------------------------------------------------------------------------------
/assets/ScreenShotTab2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishBharadwaj/flawesome/731d4caf9a00754d39c150e1af457c787f8dee4b/assets/ScreenShotTab2.png
--------------------------------------------------------------------------------
/assets/ScreenShotTab3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishBharadwaj/flawesome/731d4caf9a00754d39c150e1af457c787f8dee4b/assets/ScreenShotTab3.png
--------------------------------------------------------------------------------
/assets/ScreenShotsTab1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishBharadwaj/flawesome/731d4caf9a00754d39c150e1af457c787f8dee4b/assets/ScreenShotsTab1.png
--------------------------------------------------------------------------------
/assets/ScreenshotRelease.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishBharadwaj/flawesome/731d4caf9a00754d39c150e1af457c787f8dee4b/assets/ScreenshotRelease.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "flawesome",
3 | "version": "0.2.3",
4 | "private": false,
5 | "license": "GNU General Public License v3.0",
6 | "author": {
7 | "name": "Ashish Bharadwaj J",
8 | "email": "ashishbharadwaj@icloud.com"
9 | },
10 | "main": "public/electron.js",
11 | "homepage": "./",
12 | "icon": "public/icon.png",
13 | "description": "Flawesome is a modern productivity tool that will help you organise your day-today work and thoughts.",
14 | "dependencies": {
15 | "@testing-library/jest-dom": "^4.2.4",
16 | "@testing-library/react": "^9.3.2",
17 | "@testing-library/user-event": "^7.1.2",
18 | "quill": "1.3.7",
19 | "react": "^16.12.0",
20 | "react-dom": "^16.12.0",
21 | "react-scripts": "^3.4.0",
22 | "styled-components": "^5.0.1"
23 | },
24 | "scripts": {
25 | "start": "PORT=4041 rescripts start",
26 | "build": "rescripts build",
27 | "test": "react-scripts test",
28 | "electron-start": "set ELECTRON_START_URL=http://localhost:4041 && set IS_DEV=true && electron .",
29 | "electron-start-mac": "export ELECTRON_START_URL=http://localhost:4041 && export IS_DEV=true && electron .",
30 | "electron-start-linux": "export ELECTRON_START_URL=http://localhost:4041 && export IS_DEV=true && electron .",
31 | "pre-package": "yarn build",
32 | "package": "electron-builder build --win --publish never",
33 | "package-linux": "electron-builder build --linux --publish never",
34 | "package-publish": "electron-builder build --win --mac --linux --publish always"
35 | },
36 | "eslintConfig": {
37 | "extends": "react-app"
38 | },
39 | "browserslist": {
40 | "production": [
41 | ">0.2%",
42 | "not dead",
43 | "not op_mini all"
44 | ],
45 | "development": [
46 | "last 1 chrome version",
47 | "last 1 firefox version",
48 | "last 1 safari version"
49 | ]
50 | },
51 | "devDependencies": {
52 | "@blueprintjs/core": "^3.25.0",
53 | "@fortawesome/fontawesome-svg-core": "^1.2.27",
54 | "@fortawesome/free-solid-svg-icons": "^5.12.1",
55 | "@fortawesome/react-fontawesome": "^0.1.9",
56 | "@reach/accordion": "^0.10.0",
57 | "@rescripts/cli": "^0.0.14",
58 | "@rescripts/rescript-env": "^0.0.12",
59 | "draft-js": "^0.11.4",
60 | "electron": "^9.4.0",
61 | "electron-builder": "^22.7.0",
62 | "flatpickr": "^4.6.3",
63 | "lodash-es": "^4.17.15",
64 | "node-sass": "^4.13.1",
65 | "quill-image-drop-module": "https://github.com/ashishBharadwaj/quill-image-drop-module",
66 | "react-quill": "^1.3.5"
67 | },
68 | "pre-push": [],
69 | "build": {
70 | "appId": "com.flawesome.app",
71 | "productName": "Flawesome",
72 | "copyright": "Copyright © 2020 Ashish Bharadwaj J",
73 | "files": [
74 | "build/**/*",
75 | "node_modules/**/*",
76 | "build/icon.*"
77 | ],
78 | "publish": {
79 | "provider": "github",
80 | "repo": "flawesome",
81 | "owner": "ashishbharadwaj",
82 | "private": false
83 | },
84 | "win": {
85 | "target": "NSIS",
86 | "icon": "./build/icon.png"
87 | },
88 | "mac": {
89 | "category": "public.app-category.productivity",
90 | "icon": "./build/icon.icns"
91 | },
92 | "linux": {
93 | "icon": "./build/icon.icns",
94 | "category": "Productivity",
95 | "packageCategory": "Productivity",
96 | "target": [
97 | {
98 | "target": "deb"
99 | },
100 | {
101 | "target": "AppImage"
102 | }
103 | ]
104 | }
105 | },
106 | "rescripts": [
107 | "env"
108 | ]
109 | }
110 |
--------------------------------------------------------------------------------
/public/electron.js:
--------------------------------------------------------------------------------
1 | const {app, BrowserWindow, Menu, ipcMain, screen } = require('electron');
2 |
3 | const Store = require('./store');
4 | const join = require('path').join;
5 | let store = new Store({
6 | name: process.env.IS_DEV ? 'flawesomeDbDev' : 'flawesomeDb'
7 | });
8 | app.on('ready', createWindow);
9 | app.on('window-all-closed', () => {
10 | if (process.platform !== 'darwin') {
11 | app.quit();
12 | }
13 | })
14 | function createWindow () {
15 | var win = new BrowserWindow({
16 | width: 1200,
17 | height: 810,
18 | show: false,
19 | webPreferences: { nodeIntegration: true},
20 | frame: false,
21 | titleBarStyle: 'hidden',
22 | resizable:true,
23 | icon: join(__dirname, 'icon.png')
24 | });
25 |
26 | const startUrl = process.env.ELECTRON_START_URL || join('file://',__dirname, './index.html')
27 | win.loadURL(startUrl);
28 | win.webContents.on('did-finish-load', () => {
29 | win.show();
30 | });
31 | win.on('closed', () => {
32 | store.save();
33 | win = null;
34 | });
35 | ipcMain.on('getAppState', (event, arg) => {
36 | event.returnValue = store.get(arg);
37 | });
38 | ipcMain.on('storeAppState', (event,dateKey, appState) =>{
39 | // console.log(appState)
40 | store.set(dateKey, appState);
41 | });
42 | // Event handler for asynchronous incoming messages
43 | ipcMain.handle('getSearchResult', async (event, searchTerm) => {
44 | const result = await filterSearchTerm(searchTerm)
45 | return result
46 | })
47 |
48 | ipcMain.on('getSavedDates', (event, arg) => {
49 | let data = store.getAll();
50 | event.returnValue = Object.keys(data);
51 | });
52 | const selectionMenu = Menu.buildFromTemplate([
53 | {role: 'copy'},
54 | {type: 'separator'},
55 | {role: 'selectall'},
56 | ])
57 |
58 | const inputMenu = Menu.buildFromTemplate([
59 | {role: 'undo'},
60 | {role: 'redo'},
61 | {type: 'separator'},
62 | {role: 'cut'},
63 | {role: 'copy'},
64 | {role: 'paste'},
65 | {type: 'separator'},
66 | {role: 'selectall'},
67 | ])
68 |
69 | win.webContents.on('context-menu', (e, props) => {
70 | const { selectionText, isEditable } = props;
71 | if (isEditable) {
72 | inputMenu.popup(win);
73 | } else if (selectionText && selectionText.trim() !== '') {
74 | selectionMenu.popup(win);
75 | }
76 | })
77 | if(process.env.IS_DEV){
78 | //win.webContents.openDevTools();
79 | }
80 | // and load the index.html of the app. win.loadFile('index.html')
81 | }
82 | async function filterSearchTerm(searchTerm){
83 | let data = store.getAll();
84 | data = getArrangedData(data);
85 | data = data.filter((dat)=>{
86 | return dat.searchContent.toLowerCase().includes(searchTerm.toLowerCase())
87 | })
88 | return data;
89 | }
90 | function getArrangedData(data){
91 | let newData = [];
92 | for(let key in data)
93 | {
94 | if(data.hasOwnProperty(key)){
95 | let dat = data[key];
96 | if(dat.editorState)
97 | {
98 | let cleanState = dat.editorState.replace(/\s*\<.*?\>\s*/g, " ");
99 | if(cleanState){
100 | newData.push(
101 | {
102 | dateKey: key,
103 | searchContent: cleanState,
104 | elementType: 'noteBook',
105 | elementProps:{}
106 | }
107 | );
108 | }
109 | }
110 | for(let todoKey in dat.todoState){
111 | if(dat.todoState.hasOwnProperty(todoKey)){
112 | if(dat.todoState[todoKey].text){
113 | newData.push(
114 | {
115 | dateKey: key,
116 | searchContent: dat.todoState[todoKey].text,
117 | elementType: 'toDo',
118 | elementProps: {
119 | index: todoKey,
120 | status: dat.todoState[todoKey].status
121 | }
122 | }
123 | );
124 | }
125 | }
126 | }
127 | for(let noteKey in dat.notes){
128 | if(dat.notes.hasOwnProperty(noteKey)){
129 | let note = dat.notes[noteKey];
130 | if(note.text){
131 | newData.push(
132 | {
133 | dateKey: key,
134 | searchContent: note.text,
135 | elementType: 'stickyNotes',
136 | elementProps: {
137 | id: note.id,
138 | index: noteKey
139 | }
140 | }
141 | );
142 | }
143 | }
144 | }
145 |
146 | }
147 | }
148 |
149 | return newData;
150 | }
--------------------------------------------------------------------------------
/public/icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishBharadwaj/flawesome/731d4caf9a00754d39c150e1af457c787f8dee4b/public/icon.icns
--------------------------------------------------------------------------------
/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishBharadwaj/flawesome/731d4caf9a00754d39c150e1af457c787f8dee4b/public/icon.png
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
11 | completeTask(index)}/>
12 | {task.title}
13 |
14 |
15 | );
16 | }
17 |
18 | function CreateTask({ addTask }) {
19 | const [value, setValue] = useState("");
20 |
21 | const handleSubmit = e => {
22 | e.preventDefault();
23 | if (!value) return;
24 | addTask(value);
25 | setValue("");
26 | }
27 | return (
28 |
37 | );
38 | }
39 |
40 | function Todo(props) {
41 | const [tasksRemaining, setTasksRemaining] = useState(props.todoContent.tasksRemaining);
42 | const [tasks, setTasks] = useState(props.todoContent.tasks);
43 |
44 | useEffect(() => { setTasksRemaining(tasks.filter(task => !task.completed).length) }, [tasks]);
45 |
46 | useEffect(() => {
47 | setTasks(props.todoContent.tasks);
48 | }, [props.todoContent.tasks]);
49 |
50 |
51 | const addTask = title => {
52 | const newTasks = [...tasks, { title, completed: false }];
53 | setTasks(newTasks);
54 | props.taskChanged({tasksRemaining:newTasks.filter(task => !task.completed).length, tasks:newTasks})
55 | };
56 |
57 | const completeTask = index => {
58 | const newTasks = [...tasks];
59 | newTasks[index].completed = !newTasks[index].completed;
60 | setTasks(newTasks);
61 | props.taskChanged({tasksRemaining:newTasks.filter(task => !task.completed).length, tasks:newTasks})
62 | };
63 |
64 | const removeTask = index => {
65 | const newTasks = [...tasks];
66 | newTasks.splice(index, 1);
67 | setTasks(newTasks);
68 | props.taskChanged({tasksRemaining:newTasks.filter(task => !task.completed), tasks:newTasks})
69 | };
70 | return (
71 |
72 |
88 | );
89 | }
90 |
91 | export default Todo;
--------------------------------------------------------------------------------
/src/components/imge-resize/DefaultOptions.js:
--------------------------------------------------------------------------------
1 | export default {
2 | modules: [
3 | 'DisplaySize',
4 | 'Toolbar',
5 | 'Resize',
6 | ],
7 | overlayStyles: {
8 | position: 'absolute',
9 | boxSizing: 'border-box',
10 | border: '1px dashed #444',
11 | },
12 | handleStyles: {
13 | position: 'absolute',
14 | height: '12px',
15 | width: '12px',
16 | backgroundColor: 'white',
17 | border: '1px solid #777',
18 | boxSizing: 'border-box',
19 | opacity: '0.80',
20 | },
21 | displayStyles: {
22 | position: 'absolute',
23 | font: '12px/1.0 Arial, Helvetica, sans-serif',
24 | padding: '4px 8px',
25 | textAlign: 'center',
26 | backgroundColor: 'white',
27 | color: '#333',
28 | border: '1px solid #777',
29 | boxSizing: 'border-box',
30 | opacity: '0.80',
31 | cursor: 'default',
32 | },
33 | toolbarStyles: {
34 | position: 'absolute',
35 | top: '-12px',
36 | right: '0',
37 | left: '0',
38 | height: '0',
39 | minWidth: '100px',
40 | font: '12px/1.0 Arial, Helvetica, sans-serif',
41 | textAlign: 'center',
42 | color: '#333',
43 | boxSizing: 'border-box',
44 | cursor: 'default',
45 | },
46 | toolbarButtonStyles: {
47 | display: 'inline-block',
48 | width: '24px',
49 | height: '24px',
50 | background: 'white',
51 | border: '1px solid #999',
52 | verticalAlign: 'middle',
53 | },
54 | toolbarButtonSvgStyles: {
55 | fill: '#444',
56 | stroke: '#444',
57 | strokeWidth: '2',
58 | },
59 | };
60 |
--------------------------------------------------------------------------------
/src/components/imge-resize/ImageResize.js:
--------------------------------------------------------------------------------
1 | import defaultsDeep from 'lodash/defaultsDeep';
2 | import DefaultOptions from './DefaultOptions';
3 | import { DisplaySize } from './modules/DisplaySize';
4 | import { Toolbar } from './modules/Toolbar';
5 | import { Resize } from './modules/Resize';
6 |
7 | const knownModules = { DisplaySize, Toolbar, Resize };
8 |
9 | /**
10 | * Custom module for quilljs to allow user to resize Pending tasks ({tasksRemaining})
73 |
74 | {tasks.map((task, index) => (
75 |
84 |
85 |
87 | '):''; 3 | } -------------------------------------------------------------------------------- /src/components/react-sticky-notes/utils/parse-csv.js: -------------------------------------------------------------------------------- 1 | export function parseCSV(str) { 2 | var arr = []; 3 | var quote = false; 4 | 5 | for (var row = 0, col = 0, c = 0; c < str.length; c++) { 6 | var currentCharacter = str[c], nextCharacter = str[c+1]; 7 | arr[row] = arr[row] || []; 8 | arr[row][col] = arr[row][col] || ''; 9 | 10 | if (currentCharacter == '"' && quote && nextCharacter == '"') { 11 | arr[row][col] += currentCharacter; 12 | ++c; 13 | continue; 14 | } 15 | 16 | if (currentCharacter == '"') { 17 | quote = !quote; 18 | continue; 19 | } 20 | 21 | if (currentCharacter == ',' && !quote) { 22 | ++col; 23 | continue; 24 | } 25 | 26 | if (currentCharacter == '\r' && nextCharacter == '\n' && !quote) { 27 | col = 0; 28 | ++row; 29 | ++c; 30 | continue; 31 | } 32 | 33 | if ( ( currentCharacter == '\r' || currentCharacter == '\n' )&& !quote) { 34 | ++row; 35 | col = 0; 36 | continue; 37 | } 38 | 39 | arr[row][col] += currentCharacter; 40 | } 41 | const results = []; 42 | const headers = arr[0]; 43 | for(let i = 1;i
-
54 |
-
62 |
{hitKey} 63 |-
64 | {hits[hitKey].map(hit => (
65 |
70 | {hit.searchContent} 71 | 72 | ))} 73 |
75 | );
76 | })}
77 |
-
55 | {Object.keys(hits).map(hitKey => {
56 | if (hits[hitKey].length === 0) {
57 | return null;
58 | }
59 |
60 | return (
61 |
60 |
65 | );
66 | }
67 | }
--------------------------------------------------------------------------------
/src/components/title-bar/modules/OptionsMenu.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Menu, MenuItem, Popover, Position} from "@blueprintjs/core";
3 | import "@blueprintjs/core/lib/css/blueprint.css";
4 | const shell = window.electron.shell;
5 | export default class OptionsMenu extends React.PureComponent{
6 | constructor(props){
7 | super(props);
8 | this.handleOpenAboutWindow = this.handleOpenAboutWindow.bind(this);
9 | this.handleReportBug = this.handleReportBug.bind(this);
10 | }
11 | handleOpenAboutWindow(e){
12 | this.props.openAbout(true);
13 | }
14 |
15 | handleReportBug(e){
16 | shell.openExternal("https://docs.google.com/forms/d/e/1FAIpQLSeUpOj6hMS8H8sfiju7OzADnb8Q7Frw5Bw55tmYMSIuA4NJpQ/viewform?usp=sf_link");
17 | }
18 |
19 | render(){
20 | const exampleMenu = (
21 |
25 | );
26 | return(
27 | { this.props.dateChangeCallBack(this.yesterday(this.state.date)) }}>
61 |
62 | { this.props.dateChangeCallBack(this.tomorrow(this.state.date)) }}>
63 | { this.props.dateChangeCallBack(new Date()) }}>
64 |
22 |
23 |
28 | );
29 | }
30 | }
31 | export default TitleBar;
--------------------------------------------------------------------------------
/src/components/title-bar/modules/WindowsControl.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | const remote = window.electron.remote;
3 | export default class WindowsControl extends React.Component{
4 | constructor(props){
5 | super(props)
6 | this.getCurrentWindow = this.getCurrentWindow.bind(this);
7 | this.minimizeWindow = this.minimizeWindow.bind(this);
8 | this.maxUnmaxWindow = this.maxUnmaxWindow.bind(this);
9 | this.closeWindow = this.closeWindow.bind(this);
10 | this.isWindowMaximized = this.isWindowMaximized.bind(this);
11 | this.state = {
12 | isMaximized : this.isWindowMaximized()
13 | };
14 | }
15 | getCurrentWindow() {
16 | return remote.getCurrentWindow();
17 | }
18 | minimizeWindow(browserWindow = this.getCurrentWindow()) {
19 | if (browserWindow.minimizable) {
20 | browserWindow.minimize();
21 | }
22 | }
23 | maxUnmaxWindow(browserWindow = this.getCurrentWindow()) {
24 | if (browserWindow.isMaximized()) {
25 | browserWindow.unmaximize();
26 | } else {
27 | browserWindow.maximize();
28 | }
29 | this.setState({isMaximized: this.isWindowMaximized()})
30 | }
31 | closeWindow(browserWindow = this.getCurrentWindow()) {
32 | browserWindow.close();
33 | }
34 | isWindowMaximized(browserWindow = this.getCurrentWindow()) {
35 | return browserWindow.isMaximized();
36 | }
37 | render(){
38 | return(
39 |
24 |
25 |
26 |
40 |
44 | );
45 | }
46 | }
--------------------------------------------------------------------------------
/src/components/title-bar/styles/TitleBar.css:
--------------------------------------------------------------------------------
1 | .ab_TitleBar{
2 | background-color: #182026;
3 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
4 | display: grid;
5 | grid-template-columns: 50px auto 138px;
6 | box-sizing: border-box;
7 | -webkit-app-region: drag;
8 | }
9 |
10 | .ab_TitleBar .bp3-popover-wrapper{
11 | height: 35px;
12 | }
13 |
14 | /* Window control Styles */
15 | .ab_TB_WinControls
16 | {
17 | -webkit-app-region: no-drag;
18 | display: flex;
19 | flex-direction: row;
20 | }
21 | .ab_icons
22 | {
23 | justify-content: center;
24 | align-items: center;
25 | width: 46px;
26 | }
27 | .ab_minimizeIcon
28 | {
29 | background: url('../media/minimize.svg');
30 | background-repeat: no-repeat;
31 | background-position: center center;
32 | }
33 | .ab_minimizeIcon:hover{
34 | filter: brightness(3.5);
35 | background-color: rgba(255, 255, 255, 0.1);
36 | }
37 | .ab_maximizeIcon
38 | {
39 | background: url('../media/maximize.svg');
40 | background-repeat: no-repeat;
41 | background-position: center center;
42 | }
43 | .ab_maximizeIcon:hover{
44 | filter: brightness(3.5);
45 | background-color: rgba(255, 255, 255, 0.1);
46 | }
47 | .ab_restoreIcon
48 | {
49 | background: url('../media/restore.svg');
50 | background-repeat: no-repeat;
51 | background-position: center center;
52 | }
53 | .ab_restoreIcon:hover{
54 | filter: brightness(3.5);
55 | background-color: rgba(255, 255, 255, 0.1);
56 | }
57 | .ab_closeIcon
58 | {
59 | background: url('../media/close.svg');
60 | background-repeat: no-repeat;
61 | background-position: center center;
62 | }
63 | .ab_closeIcon:hover{
64 | background: url('../media/closeLight.svg');
65 | background-color: rgba(232, 17, 35, 0.9);
66 | background-repeat: no-repeat;
67 | background-position: center center;
68 | }
69 |
70 | /* Hamburger Options Styles */
71 |
72 | .ab_TB_Options{
73 | -webkit-app-region: no-drag;
74 | background: url('../media/hamburger.svg');
75 | background-repeat: no-repeat;
76 | background-position: center center;
77 | cursor: pointer;
78 | width: 50px;
79 | height: 35px;
80 | }
81 |
82 | .ab_TB_Options:hover{
83 | filter: brightness(3.5);
84 | }
85 |
86 | /* Date Picker Styles */
87 | .ab_TB_DatePicker
88 | {
89 | box-sizing: border-box;
90 | text-align: center;
91 | justify-items: center;
92 | }
93 | .ab_TB_DatePicker input{
94 | -webkit-app-region: no-drag;
95 | margin-top:8px;
96 | text-align: center;
97 | border: none;
98 | border-radius: 3px;
99 | height: 22px;
100 | background-color: #394B59;
101 | color: #d4d2d2 ;
102 | }
103 | .ab_TB_DatePicker input:hover{
104 | color: #ffff;
105 | filter: brightness(1.3);
106 | }
107 | .ab_TB_flatpickr{
108 | display: inline-flex;
109 | }
110 | .ab_TB_resetDate{
111 | -webkit-app-region: no-drag;
112 | cursor: pointer;
113 | height: 22px;
114 | width: 32px;
115 | border: none;
116 | border-radius: 3px;
117 | background: url("../media/history.svg");
118 | background-repeat: no-repeat;
119 | background-position: center center;
120 | margin-top: 8px;
121 | margin-left: 5px;
122 | background-color: #394B59;
123 | }
124 | .ab_TB_resetDate:hover{
125 | filter: brightness(1.3);
126 | }
127 |
128 | .ab_TB_PreviousDate{
129 | -webkit-app-region: no-drag;
130 | cursor: pointer;
131 | height: 22px;
132 | width: 32px;
133 | border: none;
134 | border-radius: 3px;
135 | background: url("../media/previous.svg");
136 | background-repeat: no-repeat;
137 | background-position: center center;
138 | background-size: 20px 20px;
139 | margin-top: 8px;
140 | margin-right: 5px;
141 | background-color: #394B59;
142 | }
143 | .ab_TB_PreviousDate:hover{
144 | filter: brightness(1.3);
145 | }
146 | .ab_TB_NextDate{
147 | -webkit-app-region: no-drag;
148 | cursor: pointer;
149 | height: 22px;
150 | width: 32px;
151 | border: none;
152 | border-radius: 3px;
153 | background: url("../media/next.svg");
154 | background-repeat: no-repeat;
155 | background-position: center center;
156 | background-size: 20px 20px;
157 | margin-top: 8px;
158 | margin-left: 5px;
159 | background-color: #394B59;
160 | }
161 | .ab_TB_NextDate:hover{
162 | filter: brightness(1.3);
163 | }
164 | .ab_contentIndicator::before{
165 | content: "";
166 | position: absolute;
167 | width: 5px;
168 | height: 5px;
169 | background-color: red;
170 | border-radius: 50%;
171 | bottom: 0;
172 | left: 45%;
173 | }
--------------------------------------------------------------------------------
/src/components/todo-meter/index.js:
--------------------------------------------------------------------------------
1 | import TodoMeter from './modules/TodoMeter';
2 | export default TodoMeter;
--------------------------------------------------------------------------------
/src/components/todo-meter/media/alldone.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
--------------------------------------------------------------------------------
/src/components/todo-meter/media/arrow.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
--------------------------------------------------------------------------------
/src/components/todo-meter/media/check.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
--------------------------------------------------------------------------------
/src/components/todo-meter/media/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
--------------------------------------------------------------------------------
/src/components/todo-meter/media/pause.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/todo-meter/media/plus.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/todo-meter/media/resume.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
--------------------------------------------------------------------------------
/src/components/todo-meter/media/x.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/todo-meter/modules/AddItemForm.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import styles from "../styles/AddItemForm.module.scss";
4 |
5 | // Form to populate todo items
6 | export default class AddItemForm extends React.Component{
7 | constructor(props){
8 | super(props);
9 | this.inputRef = React.createRef();
10 | this.addItem = this.addItem.bind(this);
11 | }
12 |
13 | addItem(e) {
14 | const newItem = {
15 | text: this.inputRef.current.value,
16 | key: Date.now(),
17 | status: "pending"
18 | };
19 | if (!!newItem.text.trim()) {
20 | this.props.addItemCallback(newItem)
21 | }
22 | e.preventDefault();
23 | this.inputRef.current.value = "";
24 | this.inputRef.current.focus();
25 | }
26 |
27 | render(){
28 | return (
29 |
33 | );
34 | }
35 | }
36 |
37 |
--------------------------------------------------------------------------------
/src/components/todo-meter/modules/Item.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styles from "../styles/Item.module.scss";
3 |
4 | // Individual todo item
5 | export default class Item extends React.Component{
6 | constructor(props){
7 | super(props);
8 | this.state = {
9 | item: props.item,
10 | text: props.item.text,
11 | paused: props.item.status === "paused",
12 | completed: props.item.status === "completed"
13 | }
14 | }
15 |
16 | componentWillReceiveProps(nextProps){
17 | if(nextProps !== this.props){
18 | this.props = nextProps;
19 | this.setState({
20 | item: nextProps.item,
21 | text: nextProps.item.text,
22 | paused: nextProps.item.status === "paused",
23 | completed: nextProps.item.status === "completed"
24 | })
25 | }
26 | }
27 |
28 | render(){
29 | return (
30 | { this.minimizeWindow() }}>
41 | { this.maxUnmaxWindow() }}>
42 | {this.closeWindow()}}>
43 |
31 |
55 | );
56 | }
57 |
58 |
59 | }
--------------------------------------------------------------------------------
/src/components/todo-meter/modules/ItemList.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | Accordion,
4 | AccordionItem,
5 | AccordionButton,
6 | AccordionPanel
7 | } from "@reach/accordion";
8 | import "@reach/accordion/styles.css";
9 |
10 | import Progress from "./Progress";
11 | import AddItemForm from "./AddItemForm";
12 | import Item from "./Item";
13 | import styles from "../styles/ItemList.module.scss";
14 | import arrow from "../media/arrow.svg";
15 | import alldone from "../media/alldone.svg";
16 | import {Classes} from "@blueprintjs/core";
17 |
18 |
19 | export default class ItemList extends React.Component {
20 | constructor(props){
21 | super(props);
22 | this.state = {
23 | items: props.items,
24 | pending: props.pending,
25 | paused: props.paused,
26 | completed: props.completed
27 | };
28 | }
29 |
30 | componentWillReceiveProps(nextProps){
31 | if(nextProps !== this.props){
32 | this.props = nextProps;
33 | this.setState({
34 | items: nextProps.items,
35 | pending: nextProps.pending,
36 | paused: nextProps.paused,
37 | completed: nextProps.completed
38 | });
39 | }
40 | }
41 |
42 | render(){
43 | return (
44 | {this.state.text}
32 |
35 |
36 | {!this.state.paused && !this.state.completed && (
37 |
38 | )}
39 | {this.state.paused && !this.state.completed && (
40 |
45 | )}
46 | {!this.state.completed && (
47 |
52 | )}
53 |
54 |
45 |
46 |
59 | {this.state.paused.length > 0 && (
60 |
61 |
62 | 
63 | Do Later
64 |
65 |
66 | {this.state.paused &&
67 | this.state.paused.map(item => {
68 | return - ;
69 | })}
70 |
71 |
72 | )}
73 | {this.state.completed.length > 0 && (
74 |
75 |
76 | Completed
77 |
78 |
79 | {this.state.completed &&
80 | this.state.completed.map(item => {
81 | return - ;
82 | })}
83 |
84 |
85 | )}
86 |
87 |
88 | {(this.state.completed.length > 0 || this.state.paused.length > 0) && (
89 |
100 | );
101 | }
102 |
103 | }
104 |
--------------------------------------------------------------------------------
/src/components/todo-meter/modules/Progress.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import styles from "../styles/Progress.module.scss";
4 |
5 | export default class Progress extends React.Component {
6 | constructor(props){
7 | super(props)
8 | this.state = {
9 | items: props.items,
10 | paused: props.paused,
11 | completed: props.completed,
12 | }
13 | }
14 |
15 | componentWillReceiveProps(nextProps){
16 | if(nextProps !== this.props){
17 | this.props = nextProps;
18 | this.setState({
19 | items: nextProps.items,
20 | paused: nextProps.paused,
21 | completed: nextProps.completed,
22 | });
23 | }
24 | }
25 | render(){
26 | const totalAmount = this.state.items.length;
27 | const completedAmount = this.state.completed.length;
28 | const pausedAmount = this.state.paused.length;
29 |
30 | let completedPercentage = completedAmount / totalAmount;
31 | let pausedPercentage = pausedAmount / totalAmount + completedPercentage;
32 |
33 | if (isNaN(completedPercentage)) {
34 | completedPercentage = 0;
35 | }
36 |
37 | if (isNaN(pausedPercentage)) {
38 | pausedPercentage = 0;
39 | }
40 |
41 | return (
42 |
55 | 
56 |
57 | )}
58 |
90 |
97 |
98 | )}
99 |
43 |
47 |
51 |
52 | );
53 | }
54 |
55 |
56 |
57 | }
58 |
59 |
--------------------------------------------------------------------------------
/src/components/todo-meter/modules/TodoMeter.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ItemList from './ItemList';
3 | export default class TodoMeter extends React.Component{
4 | constructor(props){
5 | super(props);
6 | this.state = {
7 | date: props.date,
8 | items: props.toDoItems,
9 | pending: props.toDoItems.filter(item => item.status === "pending"),
10 | paused: props.toDoItems.filter(item => item.status === "paused"),
11 | completed: props.toDoItems.filter(item => item.status === "completed")
12 | };
13 | this.resetItems = this.resetItems.bind(this);
14 | this.deleteItem = this.deleteItem.bind(this);
15 | this.updateItem = this.updateItem.bind(this);
16 | this.addItem = this.addItem.bind(this);
17 | }
18 | componentWillReceiveProps(nextProps){
19 | if(nextProps !== this.props){
20 | this.props = nextProps;
21 | this.setState({
22 | date: nextProps.date,
23 | items: nextProps.toDoItems,
24 | pending: nextProps.toDoItems.filter(item => item.status === "pending"),
25 | paused: nextProps.toDoItems.filter(item => item.status === "paused"),
26 | completed: nextProps.toDoItems.filter(item => item.status === "completed")
27 | })
28 | }
29 | }
30 | resetItems(){
31 | const newItems = this.state.items
32 | .map(i => {
33 | if (i.status === "paused" || i.status === "completed") {
34 | return Object.assign({}, i, {
35 | status: "pending"
36 | });
37 | }
38 | return i;
39 | });
40 | this.setState({items: newItems}, ()=>{ this.props.itemChangeCallback(this.state.items) })
41 | }
42 | deleteItem(item){
43 | this.setState(
44 | {items: this.state.items.filter(itm => itm.key !== item.key)},
45 | ()=>{ this.props.itemChangeCallback(this.state.items) }
46 | )
47 | }
48 | updateItem(item, newStatus){
49 | const newItems = this.state.items.map(i => {
50 | if (i.key === item.key) {
51 | return Object.assign({}, i, {
52 | status: newStatus
53 | });
54 | }
55 | return i;
56 | });
57 | this.setState({items: newItems}, ()=>{ this.props.itemChangeCallback(this.state.items) })
58 | }
59 | addItem(newItem){
60 | this.setState({items: this.state.items.concat(newItem)}, ()=>{ this.props.itemChangeCallback(this.state.items) })
61 | }
62 |
63 | render(){
64 | return(
65 |
66 |
77 | );
78 | }
79 | }
--------------------------------------------------------------------------------
/src/components/todo-meter/styles/AddItemForm.module.scss:
--------------------------------------------------------------------------------
1 | @import "./variables";
2 |
3 | .form {
4 | position: relative;
5 | input {
6 | margin: 0 0 10px 0;
7 | padding: 20px 70px 20px 20px;
8 | width: 100%;
9 | height: 70px;
10 | background: $input-color;
11 | border: none;
12 | border-radius: 3px;
13 | box-sizing: border-box;
14 | color: $font-color;
15 | font-size: $item-font-size;
16 | outline: none;
17 | }
18 | button {
19 | position: absolute;
20 | top: 20px;
21 | right: 20px;
22 | width: 30px;
23 | height: 30px;
24 | background: no-repeat url("../media/plus.svg");
25 | border: none;
26 | &:after {
27 | display: block;
28 | content: "";
29 | position: absolute;
30 | top: 50%;
31 | left: 50%;
32 | background: #fff;
33 | transform: translate(-50%, -50%);
34 | border-radius: 100%;
35 | width: 0;
36 | height: 0;
37 | }
38 | &:focus {
39 | outline: none;
40 | }
41 | &:hover:after {
42 | animation: click 0.5s;
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/todo-meter/styles/Item.module.scss:
--------------------------------------------------------------------------------
1 | @import "./variables";
2 |
3 | .item {
4 | display: flex;
5 | align-items: center;
6 | justify-content: space-between;
7 | margin: 0 0 10px 0;
8 | padding: 20px;
9 | width: 100%;
10 | min-height: 70px;
11 | background: $item-color;
12 | border: none;
13 | border-radius: 3px;
14 | box-sizing: border-box;
15 | font-size: $item-font-size;
16 | @media (max-width: 600px) {
17 | margin: 20px auto;
18 | }
19 | .itemName {
20 | width: calc(100% - 110px);
21 | overflow: auto;
22 |
23 | &::-webkit-scrollbar {
24 | background-color: $item-color;
25 | height: 0.75em;
26 | @media (max-width: 600px) {
27 | height: 0.25em;
28 | }
29 | }
30 |
31 | &::-webkit-scrollbar-thumb:window-inactive,
32 | &::-webkit-scrollbar-thumb {
33 | background: $bg;
34 | border: 3px solid $item-color;
35 | border-left: none;
36 | border-right: none;
37 | border-radius: 3px;
38 | }
39 | }
40 | .buttons {
41 | display: flex;
42 | justify-content: space-between;
43 | width: 100px;
44 |
45 | &.completedButtons {
46 | justify-content: flex-end;
47 | }
48 |
49 | button {
50 | position: relative;
51 | height: 24px;
52 | border: none;
53 | &.delete {
54 | width: 24px;
55 | background: no-repeat url("../media/x.svg");
56 | &:after {
57 | background: $red;
58 | }
59 | }
60 | &.pause {
61 | width: 24px;
62 | background: no-repeat url("../media/pause.svg");
63 | &:after {
64 | background: $yellow;
65 | }
66 | }
67 | &.resume {
68 | width: 24px;
69 | background: no-repeat url("../media/resume.svg");
70 | &:after {
71 | background: $yellow;
72 | }
73 | }
74 | &.complete {
75 | width: 30px;
76 | background: no-repeat url("../media/check.svg");
77 | &:after {
78 | background: $green;
79 | }
80 | }
81 | &:after {
82 | display: block;
83 | content: "";
84 | position: absolute;
85 | top: 50%;
86 | left: 50%;
87 | transform: translate(-50%, -50%);
88 | border-radius: 100%;
89 | width: 0;
90 | height: 0;
91 | }
92 | &:focus {
93 | outline: 1px solid $item-color;
94 | &:after {
95 | animation: click 0.5s;
96 | }
97 | }
98 | &:hover:after {
99 | animation: click 0.5s;
100 | }
101 | }
102 | }
103 | }
104 |
--------------------------------------------------------------------------------
/src/components/todo-meter/styles/ItemList.module.scss:
--------------------------------------------------------------------------------
1 | @import "./variables";
2 |
3 | .alldone {
4 | display: flex;
5 | justify-content: center;
6 | img {
7 | margin: 20px;
8 | width: 100px;
9 | height: 100px;
10 | animation: slidedown 1s;
11 | border-radius:50%;
12 | }
13 | }
14 |
15 | .toggle {
16 | display: flex;
17 | align-items: center;
18 | margin: 1em 0 0.5em;
19 | padding: 0;
20 | border: none;
21 | background: $bg;
22 | color: $font-color;
23 | cursor: pointer;
24 | font-size: 1.5em;
25 | font-weight: bold;
26 | animation: slidedown 1s;
27 | img {
28 | padding: 0 5px 0 0;
29 | width: 1em;
30 | height: 1em;
31 | box-sizing: border-box;
32 | transition: transform 0.2s;
33 | }
34 | &[aria-expanded="true"] img {
35 | padding: 5px 0 0 0;
36 | transform: rotate(90deg);
37 | }
38 | &:focus {
39 | outline: 2px solid $bg;
40 | span {
41 | animation: blink 0.5s;
42 | }
43 | }
44 | &:hover {
45 | opacity: 0.9;
46 | }
47 | }
48 |
49 | .panel {
50 | animation: slidedown 0.2s ease;
51 | }
52 |
53 | .reset {
54 | text-align: center;
55 | button {
56 | height: 40px;
57 | border-radius: 3px;
58 | background: $item-color;
59 | border: none;
60 | color: $font-color;
61 | cursor: pointer;
62 | font-size: $item-font-size;
63 | animation: slidedown 1s;
64 | &:hover {
65 | opacity: 0.9;
66 | }
67 | }
68 | }
69 |
70 | @keyframes slidedown {
71 | 0% {
72 | opacity: 0;
73 | transform: translateY(-10px);
74 | }
75 | 100% {
76 | opacity: 1;
77 | transform: translateY(0);
78 | }
79 | }
80 |
81 | @keyframes blink {
82 | 0% {
83 | text-shadow: 0 0 2px white;
84 | }
85 | 50% {
86 | text-shadow: 0 0 10px white;
87 | }
88 | 100% {
89 | text-shadow: 0 0 2px white;
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/src/components/todo-meter/styles/Progress.module.scss:
--------------------------------------------------------------------------------
1 | @import "./variables";
2 |
3 | .progress {
4 | position: relative;
5 | width: 100%;
6 | height: 15px;
7 | margin: 0 0 20px;
8 | background: $input-color;
9 | border-radius: 3px;
10 | }
11 |
12 | .progressbar {
13 | position: absolute;
14 | top: 0;
15 | width: 100%;
16 | height: 100%;
17 | border-radius: 3px;
18 | transition: width 500ms;
19 | &.paused {
20 | background: $yellow;
21 | }
22 | &.completed {
23 | background: $green;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/todo-meter/styles/variables.scss:
--------------------------------------------------------------------------------
1 | $bg: #173341;
2 | $green: #62dca5;
3 | $yellow: #f7f879;
4 | $red: #e1675a;
5 |
6 | $input-color: #000000;
7 | $item-color: #455c67;
8 | $font-color: #fbfafb;
9 |
10 | $big-font-size: 64px;
11 | $heading-font-size: 24px;
12 | $item-font-size: 20px;
13 |
14 | @keyframes click {
15 | 0% {
16 | opacity: 0;
17 | width: 0;
18 | height: 0;
19 | }
20 | 50% {
21 | opacity: 0.5;
22 | }
23 | 100% {
24 | opacity: 0;
25 | width: 30px;
26 | height: 30px;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/work-space/index.js:
--------------------------------------------------------------------------------
1 | import WorkSpace from './modules/WorkSpace'
2 |
3 | export default WorkSpace;
--------------------------------------------------------------------------------
/src/components/work-space/media/checklist.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
129 |
--------------------------------------------------------------------------------
/src/components/work-space/media/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ashishBharadwaj/flawesome/731d4caf9a00754d39c150e1af457c787f8dee4b/src/components/work-space/media/icon.png
--------------------------------------------------------------------------------
/src/components/work-space/media/list.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/work-space/media/notebook.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
94 |
--------------------------------------------------------------------------------
/src/components/work-space/media/search.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
73 |
--------------------------------------------------------------------------------
/src/components/work-space/media/stickyNotes.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/work-space/modules/AboutWindow.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Overlay, Classes, H4, Button, Intent } from "@blueprintjs/core";
3 | import '../styles/About.scss'
4 | import logo from '../media/icon.png'
5 | const remote = window.electron.remote;
6 | export default class AboutWindow extends React.Component{
7 | constructor(props){
8 | super(props)
9 | this.state = {
10 | isOpen: props.isOpen || false,
11 | usePortal: true,
12 | productVersion: remote.app.getVersion(),
13 | electronVersion: remote.process.versions.electron,
14 | chromeVersion: remote.process.versions.chrome
15 | }
16 | this.handleOpen = this.handleOpen.bind(this);
17 | this.handleClose = this.handleClose.bind(this);
18 | }
19 | handleOpen(){
20 | this.setState({isOpen: true}, ()=>{ this.props.onAboutChange(this.state.isOpen) });
21 | }
22 | handleClose(){
23 | this.setState({isOpen: false}, ()=>{ this.props.onAboutChange(this.state.isOpen) });
24 | }
25 | componentWillReceiveProps(nextProps){
26 | if(nextProps !== this.props){
27 | this.props = nextProps;
28 | this.setState({isOpen: nextProps.isOpen})
29 | }
30 | }
31 | render(){
32 | return(
33 |
35 |
51 |
36 | 
37 |
50 | About Flawesome
38 |Flawesome is a modern productivity tool that will help you organise your day-today work and thoughts.
39 |Product Version : {this.state.productVersion}
40 |Electron Version : {this.state.electronVersion}
41 |Chrome Version : {this.state.chromeVersion}
42 |© Ashish Bharadwaj J
43 |
44 |
45 |
48 |
49 |
78 |
95 |
96 |
97 | );
98 | }
99 | }
--------------------------------------------------------------------------------
/src/components/work-space/styles/About.scss:
--------------------------------------------------------------------------------
1 | @import "./variables.scss";
2 | @import "~@blueprintjs/core/src/common/react-transition";
3 |
4 | .ab_AW_logo{
5 | width: 150px;
6 | height: 150px;
7 | margin-top: -10px;
8 | }
9 | .ab_AW_winContent h4, .ab_AW_winContent h3{
10 | text-align: center;
11 | }
12 | .ab_AW_copyRight{
13 | text-align: center;
14 | color: #182026;
15 | font-size: medium;
16 | font-weight: bold;
17 | }
18 | #ab_AW_description{
19 | text-align: center;
20 | font-size: small;
21 | color: blue;
22 | }
23 | .ab_AW_winContent p{
24 | color: #999;
25 | text-align: center;
26 | font-size: smaller;
27 | }
28 | .ab_AW_winContent img{
29 | margin-left: auto;
30 | margin-right: auto;
31 | display: block;
32 | }
33 | .ab_AW_closeButton{
34 | display: flex;
35 | justify-content: center;
36 | margin-top: 5px;
37 | }
38 | .docs-overlay-example-transition {
39 |
40 | $overlay-example-width: $pt-grid-size * 40;
41 | $enter: (
42 | transform: (translateY(-50vh) rotate(-10deg), translateY(0) rotate(0deg))
43 | );
44 | $leave: (
45 | transform: (translateY(150vh) rotate(-20deg), translateY(0) rotate(0deg))
46 | );
47 |
48 | @include react-transition-phase(
49 | "#{$ns}-overlay",
50 | "enter",
51 | $enter,
52 | $pt-transition-duration * 3,
53 | $pt-transition-ease-bounce,
54 | $before: "&"
55 | );
56 | @include react-transition-phase(
57 | "#{$ns}-overlay",
58 | "exit",
59 | $leave,
60 | $pt-transition-duration * 5,
61 | $before: "&"
62 | );
63 |
64 | top: 0;
65 | left: calc(50vw - #{$overlay-example-width / 2});
66 | margin: 30vh 0;
67 | align-items: center;
68 | justify-content: center;
69 | width: $overlay-example-width;
70 | padding: 10px;
71 | }
--------------------------------------------------------------------------------
/src/components/work-space/styles/Editor.css:
--------------------------------------------------------------------------------
1 | .quill{
2 | height: 100%;
3 | display: grid;
4 | grid-template-rows: 40px auto;
5 | background-color: #fff;
6 | animation: slidedown 1s;
7 | }
8 | .ql-editor{
9 | background-color: #fff;
10 | }
11 | .ql-toolbar{
12 | background-color: #f4efef;
13 | position: sticky;
14 | top: 0;
15 | z-index: 10;
16 | }
17 | @keyframes slidedown {
18 | 0% {
19 | opacity: 0;
20 | transform: translateY(-10px);
21 | }
22 | 100% {
23 | opacity: 1;
24 | transform: translateY(0);
25 | }
26 | }
--------------------------------------------------------------------------------
/src/components/work-space/styles/WorkSpace.css:
--------------------------------------------------------------------------------
1 | .ab_workSpace{
2 | background-color: white;
3 | display: grid;
4 | border: 1px solid #000000;
5 | grid-template-columns: 50px auto;
6 | overflow: hidden;
7 | }
8 | .ab_appContainer{
9 | box-sizing: border-box;
10 | padding: 10px;
11 | background-color: #173341;
12 | overflow: auto;
13 | }
14 |
15 | .ab_appContainer::-webkit-scrollbar {
16 | width: 6px;
17 | height: 6px;
18 | background-color: #F5F5F5;
19 | border-radius: 0.5em;
20 | }
21 | .ab_appContainer::-webkit-scrollbar-thumb {
22 | background-color: rgb(132, 147, 165);
23 | border-radius: 0.5em;
24 | }
25 | .ab_appContainer::-webkit-scrollbar-track {
26 | box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
27 | background-color: #F5F5F5;
28 | border-radius:.5em;
29 | }
30 | /* SideBar styles */
31 | .ab_sideBar{
32 | background-color: #182026;
33 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
34 | display: grid;
35 | grid-template-rows: 210px auto 70px;
36 | }
37 | .ab_SB_icons{
38 | height: 50px;
39 | cursor: pointer;
40 | margin-bottom: 15px;
41 | display: flex;
42 | flex-direction: column;
43 | }
44 | .ab_SB_IconContainer{
45 | margin-top: 15px;
46 | }
47 | .ab_SB_NoteBook{
48 | background: url('../media/notebook.svg');
49 | background-repeat: no-repeat;
50 | background-position: center center;
51 | background-size: 40px 40px;
52 |
53 | }
54 | .ab_SB_NoteBook:hover{
55 | filter: brightness(3.5);
56 | }
57 | .ab_SB_StickyNotes{
58 | background: url('../media/stickyNotes.svg');
59 | background-repeat: no-repeat;
60 | background-position: center center;
61 | background-size: 40px 40px;
62 | }
63 | .ab_SB_StickyNotes:hover{
64 | filter: brightness(3.5);
65 | }
66 | .ab_SB_TodoList{
67 | background: url('../media/checklist.svg');
68 | background-repeat: no-repeat;
69 | background-position: center center;
70 | background-size: 40px 40px;
71 | }
72 | .ab_SB_TodoList:hover{
73 | filter: brightness(3.5);
74 | }
75 | .ab_SB_IconSelected{
76 | border-left: 3px solid #0da3cf;
77 | filter: brightness(3.5)
78 | }
79 |
80 | .ab_SB_SearchIconContainer{
81 | background: url('../media/search.svg');
82 | background-repeat: no-repeat;
83 | background-position: center center;
84 | background-size: 40px 40px;
85 | cursor: pointer;
86 | }
87 | .ab_SB_SearchIconContainer:hover{
88 | filter: brightness(3.5);
89 | }
90 |
91 | /* Sticky Notes Style */
92 | .rs-notes--navbar__item--button__upload{
93 | display: none;
94 | }
95 | .rs-notes--navbar{
96 | animation: slidedown 1s;
97 | }
98 | .rs-notes{
99 | animation: slidedown 1s;
100 | }
101 |
102 | .ab_TodoMeter{
103 | animation: slidedown 1s;
104 | }
105 |
106 | @keyframes slidedown {
107 | 0% {
108 | opacity: 0;
109 | transform: translateY(-10px);
110 | }
111 | 100% {
112 | opacity: 1;
113 | transform: translateY(0);
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/src/components/work-space/styles/variables.scss:
--------------------------------------------------------------------------------
1 | $ns: bp3 !default;
2 | $pt-grid-size: 10px !default;
3 | $pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9) !default;
4 | $pt-transition-duration: 100ms !default;
5 | $pt-transition-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11) !default;
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: sans-serif;
4 | -webkit-font-smoothing: antialiased;
5 | -moz-osx-font-smoothing: grayscale;
6 | }
7 | code {
8 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
9 | monospace;
10 | }
11 |
12 | /* scrollbar styles */
13 | body::-webkit-scrollbar {
14 | width: 6px;
15 | height: 6px;
16 | background-color: #F5F5F5;
17 | border-radius: 0.5em;
18 | }
19 | body::-webkit-scrollbar-thumb {
20 | background-color: rgb(132, 147, 165);
21 | border-radius: 0.5em;
22 | }
23 | body::-webkit-scrollbar-track {
24 | box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
25 | background-color: #F5F5F5;
26 | border-radius:.5em;
27 | }
28 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 |
7 | // import * as serviceWorker from './serviceWorker';
8 |
9 | document.getElementById('root').style.height = window.innerHeight;
10 | ReactDOM.render(
79 |
89 |
80 | {
81 | this.state.icons.map(a => {
82 | return
86 |
87 |
88 | { this.iconClicked(e, a) }}>
83 | })
84 | }
85 |
90 | {this.state.noteBook.isSelected ? : null}
91 | {this.state.stickyNotes.isSelected ? { this.setState({notes: newNotes}, ()=>{this.props.callBacks.noteChangeCallback(type, payload, newNotes) }) } } /> : null}
92 | {this.state.toDo.isSelected ?
94 |