39 |
42 | );
43 | }
44 |
45 | render() {
46 | return (
47 | {this.props.EditorStore.selectedFile.shortName}
40 | {this.props.EditorStore.selectedFile.name} 41 |
48 | {this.props.EditorStore.selectedFile ? this.renderMeta() : null}
49 | = (props) => (
7 |
16 | {props.name}
17 |
18 | );
19 |
20 | export default Icon;
--------------------------------------------------------------------------------
/src/components/Popup.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export default class Popup extends React.Component {
4 | render() {
5 | return (
6 | {
23 |
24 | state = {
25 | filename: ''
26 | }
27 |
28 | render() {
29 |
30 | let title;
31 |
32 | switch(this.props.type) {
33 | case ProjectFileType.View:
34 | title = 'Create New View';
35 | break;
36 | case ProjectFileType.Component:
37 | title = 'Create New Component';
38 | break;
39 | case ProjectFileType.Generic:
40 | title = 'Create New Generic File';
41 | break;
42 | default:
43 | title = 'Create New Generic File';
44 | }
45 |
46 | return (
47 | {
83 | render() {
84 | return (
85 | {
108 | handleClick() {
109 | this.props.EditorStore.selectFile(this.props.file);
110 | }
111 |
112 | render() {
113 |
114 | let iconName;
115 |
116 | switch (this.props.file.type) {
117 | case ProjectFileType.Main:
118 | iconName = 'all_inclusive';
119 | break;
120 | case ProjectFileType.View:
121 | iconName = 'panorama_horizontal';
122 | break;
123 | case ProjectFileType.Component:
124 | iconName = 'bubble_chart';
125 | break;
126 | case ProjectFileType.Image:
127 | iconName = 'image';
128 | break;
129 | default:
130 | iconName = 'description';
131 | }
132 |
133 | return (
134 | {
159 | render() {
160 | return (
161 | {
236 | render() {
237 | return (
238 | {
250 | handleClick() {
251 | if (this.props.ProjectStore.fileFormat == 'js') {
252 | this.props.EditorStore.pasteSnippet(this.props.snippet.jsSnippet());
253 | } else if (this.props.ProjectStore.fileFormat == 'coffee') {
254 | this.props.EditorStore.pasteSnippet(this.props.snippet.csSnippet());
255 | }
256 | }
257 |
258 | render() {
259 | return (
260 | {
274 | render() {
275 | return (
276 | {
292 | componentDidMount() {
293 | ipcRenderer.on('save-project', () => {
294 | this.props.ProjectStore.saveProject(() => {
295 | remote.getCurrentWindow().destroy();
296 | });
297 | });
298 | }
299 |
300 | render() {
301 | return (
302 |
318 | );
319 | }
320 | }
--------------------------------------------------------------------------------
/src/components/Tabs.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import classnames from 'classnames';
3 |
4 | import Icon from './Icon';
5 |
6 | class Tab extends React.Component {
7 | render() {
8 | const classNames = classnames([
9 | 'tab',
10 | this.props.active ? 'active' : null
11 | ]);
12 |
13 | return (
14 | {
27 | render() {
28 | return (
29 | {
37 |
38 | state = {
39 | selectedIndex: 0
40 | }
41 |
42 | constructor(props: any) {
43 | super(props);
44 |
45 | this.selectTab = this.selectTab.bind(this);
46 | }
47 |
48 | selectTab(index: number) {
49 | this.setState({
50 | selectedIndex: index
51 | });
52 | }
53 |
54 | render() {
55 | return (
56 | {
21 |
22 | defaultFilename: string = 'Untitled.crsl';
23 |
24 | state = {
25 | filename: path.resolve(os.homedir(), 'Documents', this.defaultFilename),
26 | projectType: 'js'
27 | }
28 |
29 | handleProjectTypeChange(e: any) {
30 | this.setState({
31 | projectType: e.target.value
32 | });
33 | }
34 |
35 | render() {
36 | return (
37 | {
111 | render() {
112 | return (
113 | {
137 |
138 | handleNewProject() {
139 | this.props.PopupStore.displayPopup(
103 |
116 | );
117 | }
118 | }
119 |
120 | ReactDOM.render(
121 |
this._node = c}
52 | />
53 |
54 | );
55 | }
56 | }
--------------------------------------------------------------------------------
/src/components/Icon.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import classnames from 'classnames';
3 |
4 | import {IIconProps} from '../types';
5 |
6 | const Icon: React.SFC
7 |
11 | );
12 | }
13 | }
--------------------------------------------------------------------------------
/src/components/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as classnames from 'classnames';
3 | import {inject, observer} from 'mobx-react';
4 |
5 | import {remote, ipcRenderer} from 'electron';
6 | const shell = remote.shell;
7 |
8 | import Tabs from './Tabs';
9 | import Icon from './Icon';
10 | import Button from './Button';
11 | import snippets from '../snippets';
12 |
13 | import {
14 | ISidebarProps,
15 | IProjectFileCategoryHeaderProps,
16 | IProjectFileItemProps,
17 | IProjectFile,
18 | ProjectFileType
19 | } from '../types';
20 |
21 | @inject('ProjectStore', 'PopupStore')
22 | class CreateFilePopup extends React.Component
8 | {this.props.children}
9 |
10 |
48 |
77 | );
78 | }
79 | }
80 |
81 | @inject('PopupStore')
82 | class ProjectFileCategoryHeader extends React.Component{title}
49 | { 54 | this.setState({ 55 | filename: e.target.value.trim() 56 | }); 57 | }} 58 | /> 59 |
60 |
76 |
88 | {
95 | this.props.PopupStore.displayPopup(
100 | );
101 | }
102 | }
103 |
104 |
105 | @inject('EditorStore')
106 | @observer
107 | class ProjectFileItem extends React.Component{this.props.title}
89 | { 90 | this.props.type === ProjectFileType.Image ? 91 | null : 92 |
141 |
150 | );
151 | }
152 | }
153 |
154 |
155 |
156 | @inject('ProjectStore', 'EditorStore')
157 | @observer
158 | class ProjectPanelNavigator extends React.Component
162 |
230 | );
231 | }
232 | }
233 |
234 |
235 | class ProjectPanel extends React.ComponentProject Navigator
163 |
164 |
169 |
170 |
184 |
185 |
199 |
200 |
214 |
215 |
229 |
239 |
241 | );
242 | }
243 | }
244 |
245 |
246 |
247 | @inject('ProjectStore', 'EditorStore')
248 | @observer
249 | class SnippetItem extends React.Component
264 |
267 | );
268 | }
269 | }
270 |
271 |
272 |
273 | class SnippetPanel extends React.Component
277 |
284 | );
285 | }
286 | }
287 |
288 |
289 | @inject('ProjectStore')
290 | @observer
291 | export default class Sidebar extends React.ComponentSnippets
278 |
279 | {snippets.map((s, i) => {
280 | return
283 | this.props.selectTab(this.props.index)}
17 | >
18 |
22 | );
23 | }
24 | }
25 |
26 | class TabContent extends React.Component
30 | {this.props.content}
31 |
32 | );
33 | }
34 | }
35 |
36 | export default class Tabs extends React.Component
57 |
75 | );
76 | }
77 | }
--------------------------------------------------------------------------------
/src/components/Welcome.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {inject, observer} from 'mobx-react';
3 | import classnames from 'classnames';
4 | import {remote} from 'electron';
5 | const dialog = remote.dialog;
6 | const shell = remote.shell;
7 | const os = remote.require('os');
8 | const path = remote.require('path');
9 | const trackEvent = remote.getGlobal('trackEvent');
10 |
11 | import Button from './Button';
12 | import Icon from './Icon';
13 | import {IRecentProjectsProps, IRecentProject} from '../types';
14 |
15 | const version = require('../../package.json').version;
16 |
17 |
18 | @inject('ProjectStore', 'PopupStore')
19 | @observer
20 | class NewProjectPopup extends React.Component
58 | {this.props.tabs.map((tab: any, index: number) => {
59 | return (
60 |
70 |
38 |
102 | );
103 | }
104 | }
105 |
106 |
107 |
108 | @inject('ProjectStore')
109 | @observer
110 | class RecentProjects extends React.ComponentCreate New Project
39 |
40 | {
44 | this.setState({
45 | filename: e.target.value
46 | });
47 | }}
48 | />
49 |
62 |
63 |
82 |
64 |
70 | JavaScript
71 |
72 |
73 |
79 | CoffeeScript
80 |
81 |
83 |
101 |
114 | {this.props.ProjectStore.recentProjects.map((p: IRecentProject, i: number) => {
115 | return (
116 |
129 | );
130 | }
131 | }
132 |
133 |
134 | @inject('ProjectStore', 'PopupStore')
135 | @observer
136 | export default class Welcome extends React.Component {
120 | this.props.ProjectStore.initializeProject(p.path);
121 | }}
122 | >
123 |
126 | );
127 | })}
128 | {p.name}.crsl
124 | {p.path} 125 |
165 |
200 | );
201 | }
202 | }
--------------------------------------------------------------------------------
/src/components/_Editor.scss:
--------------------------------------------------------------------------------
1 | #editor-wrapper {
2 | display: flex;
3 | flex-direction: column;
4 | flex-grow: 1;
5 | background-color: #000;
6 | width: 100%;
7 | height: 100%;
8 |
9 | .editor-meta {
10 | display: flex;
11 | flex-direction: column;
12 | padding: 30px 30px;
13 | // border-bottom: 1px solid $color-divider;
14 |
15 | h2 {
16 | margin-top: 10px;
17 | }
18 | }
19 |
20 | .editor {
21 | display: flex;
22 | flex-direction: column;
23 | flex-grow: 1;
24 | flex-shrink: 1;
25 | }
26 | }
--------------------------------------------------------------------------------
/src/components/_Popup.scss:
--------------------------------------------------------------------------------
1 | .popup-container {
2 | display: flex;
3 | flex-direction: column;
4 | justify-content: center;
5 | align-items: center;
6 | position: absolute;
7 | top: 0;
8 | right: 0;
9 | bottom: 0;
10 | left: 0;
11 | background-color: rgba(0, 0, 0, .8);
12 | z-index: 999999;
13 |
14 | .popup-content {
15 | display: flex;
16 | flex-direction: column;
17 | min-width: 500px;
18 | min-height: 250px;
19 | border-radius: 20px;
20 | background-color: #050505;
21 | padding: 40px;
22 | text-align: center;
23 | }
24 | }
--------------------------------------------------------------------------------
/src/components/_Sidebar.scss:
--------------------------------------------------------------------------------
1 | $sidebar-padding-horizontal: 20px;
2 |
3 | #sidebar {
4 | display: flex;
5 | flex-direction: column;
6 | flex-grow: 0;
7 | flex-shrink: 0;
8 | overflow-y: auto;
9 | width: 380px;
10 | background-color: $color-bg-sidebar;
11 | border-right: 1px solid $color-divider;
12 | user-select: none;
13 |
14 | .project-panel-navigator {
15 | display: flex;
16 | flex-direction: column;
17 | flex-grow: 1;
18 | padding: 10px 0 0;
19 |
20 | h3 {
21 | padding: 5px $sidebar-padding-horizontal;
22 | }
23 |
24 | .views, .components, .images, .generic {
25 | padding: 10px 0;
26 |
27 | .file-category-header {
28 | display: flex;
29 | flex-direction: row;
30 | justify-content: space-between;
31 | align-items: center;
32 | padding: 0 $sidebar-padding-horizontal;
33 |
34 | .icon {
35 | color: #555;
36 | }
37 | }
38 | }
39 | }
40 |
41 | .snippet-panel {
42 | padding: 10px 0 0;
43 |
44 | h3 {
45 | padding: 5px $sidebar-padding-horizontal;
46 | }
47 |
48 | .snippet-items {
49 | display: flex;
50 | flex-direction: column;
51 |
52 | .sidebar-interactive-item {
53 | span {
54 | color: #fff;
55 | }
56 | }
57 | }
58 | }
59 |
60 | .sidebar-interactive-item {
61 | display: flex;
62 | align-items: center;
63 | padding: 10px $sidebar-padding-horizontal;
64 |
65 | span {
66 | margin-left: 15px;
67 | }
68 |
69 | .icon {
70 | color: $color-accent;
71 | }
72 |
73 | &.active {
74 | color: #fff;
75 | background-color: rgba(255, 255, 255, .05);
76 |
77 | &:hover {
78 | background-color: rgba(255, 255, 255, .05);
79 | }
80 | }
81 |
82 | &:hover {
83 | background-color: rgba(255, 255, 255, .05);
84 | }
85 | }
86 | }
87 |
88 | .create-new-file-popup {
89 | display: flex;
90 | flex-direction: column;
91 | align-items: center;
92 |
93 | input {
94 | margin-top: 20px;
95 | width: 200px;
96 | }
97 |
98 | .new-file-actions {
99 | display: flex;
100 | flex-direction: row;
101 | justify-content: center;
102 | user-select: none;
103 | margin-top: 40px;
104 |
105 | .secondary {
106 | margin-left: 20px;
107 | }
108 | }
109 | }
--------------------------------------------------------------------------------
/src/components/_Tabs.scss:
--------------------------------------------------------------------------------
1 | .tabs {
2 | display: flex;
3 | flex-direction: row;
4 | flex-grow: 1;
5 |
6 | .tabs-header {
7 | display: flex;
8 | flex-direction: column;
9 | cursor: default;
10 | border-right: 1px solid $color-divider;
11 |
12 | .tab {
13 | display: flex;
14 | flex-direction: column;
15 | justify-content: center;
16 | align-items: center;
17 | width: 65px;
18 | height: 65px;
19 |
20 | .icon {
21 | color: rgba(255, 255, 255, .33);
22 | }
23 |
24 | &.active {
25 | background-color: $color-accent;
26 |
27 | .icon {
28 | color: #fff;
29 | }
30 |
31 | &:hover {
32 | background-color: $color-accent;
33 | }
34 | }
35 |
36 | &:hover {
37 | background-color: rgba(255, 255, 255, .1);
38 | }
39 | }
40 | }
41 |
42 | .tab-content {
43 | display: flex;
44 | flex-direction: column;
45 | overflow-y: auto;
46 | flex-grow: 1;
47 | }
48 | }
--------------------------------------------------------------------------------
/src/components/_Welcome.scss:
--------------------------------------------------------------------------------
1 | #welcome {
2 | display: flex;
3 | justify-content: center;
4 | flex-grow: 1;
5 | background-color: $color-bg-welcome;
6 | user-select: none;
7 |
8 | .welcome-info {
9 | display: flex;
10 | align-items: center;
11 | flex-direction: column;
12 | flex-grow: 1;
13 |
14 | .welcome-info-content {
15 | display: flex;
16 | flex-direction: column;
17 | justify-content: center;
18 | align-items: center;
19 | text-align: center;
20 | flex-grow: 1;
21 |
22 | img {
23 | height: 150px;
24 | }
25 |
26 | .welcome-actions {
27 | display: flex;
28 | flex-direction: row;
29 | justify-content: space-between;
30 | width: 400px;
31 | margin-top: 40px;
32 |
33 | .action {
34 | display: flex;
35 | flex-direction: column;
36 | align-items: center;
37 | padding: 30px 40px;
38 | background-color: #111;
39 | border-radius: 10px;
40 | margin-top: 20px;
41 |
42 | .icon {
43 | color: $color-accent;
44 | }
45 |
46 | h3 {
47 | margin-top: 30px;
48 | text-align: center;
49 | }
50 |
51 | &:hover {
52 | background-color: #151515;
53 | cursor: pointer;
54 | }
55 | }
56 | }
57 | }
58 |
59 | .welcome-meta {
60 | padding: 30px 0;
61 | text-align: center;
62 |
63 | h4, p {
64 | cursor: pointer;
65 | }
66 | }
67 | }
68 |
69 | .recent-projects {
70 | display: flex;
71 | flex-direction: column;
72 | flex-shrink: 0;
73 | width: 300px;
74 | border-left: 1px solid $color-divider;
75 |
76 | .recent-project {
77 | display: flex;
78 | flex-direction: column;
79 | padding: 15px 20px;
80 |
81 | &:hover {
82 | background-color: rgba(255, 255, 255, .05);
83 | }
84 |
85 | h4 {
86 | margin-top: 0;
87 | }
88 |
89 | span {
90 | white-space: nowrap;
91 | overflow: hidden;
92 | text-overflow: ellipsis;
93 | font-size: $font-size-xs;
94 | }
95 | }
96 | }
97 | }
98 |
99 | .new-project-popup {
100 | display: flex;
101 | flex-direction: column;
102 | flex-grow: 1;
103 |
104 | .new-project-path {
105 | display: flex;
106 | flex-direction: row;
107 | justify-content: center;
108 | margin-top: 20px;
109 |
110 | input {
111 | width: 200px;
112 | }
113 |
114 | button {
115 | margin-left: 10px;
116 | }
117 | }
118 |
119 | .new-project-type {
120 | display: flex;
121 | flex-direction: row;
122 | justify-content: center;
123 | padding: 30px 0 40px;
124 | user-select: none;
125 |
126 | div {
127 | display: flex;
128 | flex-direction: row;
129 | justify-content: baseline;
130 |
131 | span {
132 | margin-left: 10px;
133 | margin-top: 2px;
134 | }
135 |
136 | &:last-of-type {
137 | margin-left: 30px;
138 | }
139 |
140 | &.active {
141 | span {
142 | color: #fff;
143 | }
144 | }
145 | }
146 | }
147 |
148 | .new-project-actions {
149 | display: flex;
150 | flex-direction: row;
151 | justify-content: center;
152 | user-select: none;
153 |
154 | .secondary {
155 | margin-left: 20px;
156 | }
157 | }
158 | }
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactDOM from 'react-dom';
3 | import {Provider, observer} from 'mobx-react';
4 | import * as monaco from 'monaco-editor';
5 | import {ipcRenderer, shell} from 'electron';
6 |
7 | import * as stores from './stores';
8 | import Icon from './components/Icon';
9 | import Popup from './components/Popup';
10 | import Sidebar from './components/Sidebar';
11 | import Welcome from './components/Welcome';
12 | import Editor from './components/Editor';
13 |
14 | import {remote} from 'electron';
15 |
16 | import './scss/main.scss';
17 |
18 |
19 |
20 | const framerTheme = require('./misc/framer-theme.json');
21 | monaco.editor.defineTheme('syntax', framerTheme);
22 |
23 |
24 | const AppAction = (props: any) => {
25 | return (
26 |
166 |
198 |
167 | 
168 |
193 |
168 | Welcome to Carousel
169 |Version {version}
170 |
171 |
192 |
175 |
181 | New Project
180 |
185 |
191 | Open Project
190 |
194 |
197 | this.openLink('https://twitter.com/emilwidlund')}>Built by Emil Widlund
195 |this.openLink('https://github.com/koenbok/Framer')}>Powered by Framer Library
196 |
27 |
30 | );
31 | }
32 |
33 |
34 | @observer
35 | class App extends React.Component {
36 |
37 | componentDidMount() {
38 | if (remote.app.isPackaged) {
39 | if (remote.process.argv.length >= 2) {
40 | const filePath = remote.process.argv[1];
41 | if (filePath) {
42 | stores.ProjectStore.initializeProject(filePath);
43 | }
44 | }
45 | }
46 | }
47 |
48 | renderContent() {
49 | return (
50 |
51 |
97 | );
98 | }
99 |
100 | render() {
101 | return (
102 |
52 |
80 |
53 |
54 |
56 |
54 | {stores.ProjectStore.projectName}
55 |
57 | {
61 | ipcRenderer.send('start-preview', stores.ProjectStore.projectTempPath);
62 | }}
63 | />
64 | {
68 | shell.openItem(stores.ProjectStore.projectTempPath);
69 | }}
70 | />
71 | {
75 | shell.openExternal('https://classic.framer.com/docs');
76 | }}
77 | />
78 |
79 |
81 |
96 |
104 | {
105 | stores.PopupStore.popupContent ?
106 | {stores.PopupStore.popupContent} :
107 | null
108 | }
109 | {
110 | stores.ProjectStore.projectInitialized ?
111 | this.renderContent() :
112 |
115 |