tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Create installation base layout [skip ci]

This commit is contained in:
ivan 2017-03-07 01:33:30 -03:00
parent 57955cc5eb
commit 2b478befa0
14 changed files with 274 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/gulp/config.js
View File

@ -16,6 +16,7 @@ module.exports = {
'styles': {
'src': './src/*.scss',
'watch': './src/**/*.scss',
'dest': './build/css/'
},

6
client/gulp/tasks/browserify.js
View File

@ -67,3 +67,9 @@ gulp.task('browserify', function() {
return buildScript('index.js', !global.isProd);
});
gulp.task('config', function() {
return gulp.src(config.sourceDir + 'config.js')
.pipe(gulp.dest(config.scripts.dest))
});

2
client/gulp/tasks/development.js
View File

@ -10,6 +10,6 @@ gulp.task('dev', ['clean'], function(callback) {
global.isProd = false;
// Run all tasks once
return runSequence(['sass', 'imagemin', 'browserify', 'copyFonts', 'copyIndex', 'copyIcons', 'serverphp', 'fonts'], 'watch', callback);
return runSequence(['sass', 'imagemin', 'browserify', 'copyFonts', 'copyIndex', 'copyIcons', 'config', 'fonts'], 'watch', callback);
});

2
client/gulp/tasks/watch.js
View File

@ -6,7 +6,7 @@ var config = require('../config');
gulp.task('watch', ['browserSync', 'server'], function() {
// Scripts are automatically watched by Watchify inside Browserify task
gulp.watch(config.styles.src, ['sass']);
gulp.watch(config.styles.watch, ['sass']);
gulp.watch(config.images.src, ['imagemin']);
gulp.watch(config.sourceDir + 'index.html', ['copyIndex']);

18
client/src/app/Routes.js
View File

@ -53,6 +53,15 @@ import AdminPanelSystemPreferences from 'app/admin/panel/settings/admin-panel-sy
import AdminPanelAdvancedSettings from 'app/admin/panel/settings/admin-panel-advanced-settings';
import AdminPanelEmailTemplates from 'app/admin/panel/settings/admin-panel-email-templates';
// INSTALLATION
import InstallLayout from 'app/install/install-layout';
import InstallStep1Language from 'app/install/install-step-1-language';
import InstallStep2Requirements from 'app/install/install-step-2-requirements';
import InstallStep3Settings from 'app/install/install-step-3-settings';
import InstallStep4Administrator from 'app/install/install-step-4-administrator';
import InstallStep5Install from 'app/install/install-step-5-install';
import InstallStep6Completed from 'app/install/install-step-6-completed';
const history = syncHistoryWithStore(browserHistory, store);
export default (
@ -82,6 +91,15 @@ export default (
<Route path='ticket/:ticketNumber' component={DashboardTicketPage}/>
</Route>
</Route>
<Route path="install" component={InstallLayout}>
<IndexRedirect to="step-1" />
<Route path="step-1" component={InstallStep1Language}/>
<Route path="step-2" component={InstallStep2Requirements} />
<Route path="step-3" component={InstallStep3Settings} />
<Route path="step-4" component={InstallStep4Administrator} />
<Route path="step-4" component={InstallStep5Install} />
<Route path="step-4" component={InstallStep6Completed} />
</Route>
<Route path="admin">
<IndexRoute component={AdminLoginPage} />
<Route path="panel" component={AdminPanelLayout}>

80
client/src/app/install/install-layout.js Normal file
View File

@ -0,0 +1,80 @@
import React from 'react';
import classNames from 'classnames';
import i18n from 'lib-app/i18n';
import Widget from 'core-components/widget';
import Icon from 'core-components/icon';
const steps = [
'LANGUAGE',
'SERVER_REQUIREMENTS',
'SETTINGS_SETUP',
'ADMIN_SETUP',
'INSTALL',
'COMPLETED'
];
class InstallLayout extends React.Component {
render() {
return (
<Widget className="install-layout">
<div className="install-layout__header">
<div className="install-layout__header-logo">
<img width="100%" src="../../images/logo.png" alt="OpenSupports Installation"/>
</div>
<div className="install-layout__header-text">
<div className="install-layout__header-title">
{i18n('INSTALL_HEADER_TITLE')}
</div>
<div className="install-layout__header-description">
{i18n('INSTALL_HEADER_DESCRIPTION')}
</div>
</div>
</div>
<span className="separator"/>
<div className="install-layout__body row">
<div className="col-md-3">
<ul className="install-layout__steps">
{steps.map(this.renderStep.bind(this))}
</ul>
</div>
<div className="install-layout__content col-md-9">
{this.props.children}
</div>
</div>
</Widget>
);
}
renderStep(key, index) {
let classes = {
'install-layout__step': true,
'install-layout__step_current': index === this.getCurrentStep(),
'install-layout__step_previous': index < this.getCurrentStep()
};
let icon = 'circle-thin';
if(index === this.getCurrentStep()) {
icon = 'arrow-circle-right';
} else if(index < this.getCurrentStep()) {
icon = 'check-circle';
}
return (
<li className={classNames(classes)}>
<Icon name={icon} size="sm" className="install-layout__step-icon"/>
<span className="install-layout__step-text">
{index+1}. {i18n(key)}
</span>
</li>
)
}
getCurrentStep() {
return 2;
}
}
export default InstallLayout;

75
client/src/app/install/install-layout.scss Normal file
View File

@ -0,0 +1,75 @@
@import "../../scss/vars";
.install-layout {
margin: 0 auto;
width: 900px;
min-height: 0;
@media screen and (max-width: 900px) {
width: 100%;
}
&__header {
text-align: left;
&-logo {
display: inline-block;
max-width: 300px;
}
&-text {
display: inline-block;
margin-left: 20px;
}
&-title {
text-align: left;
font-weight: bold;
font-size: $font-size--md;
color: $primary-black;
}
&-description {
text-align: left;
color: $dark-grey;
}
}
&__body {
margin-top: 20px;
text-align: left;
}
&__steps {
padding: 0;
list-style-type: none;
border-right: 1px solid $primary-blue;
}
&__step {
color: $primary-black;
&-icon {
color: $primary-blue;
margin-right: 10px;
}
&_current {
.install-layout__step-icon {
color: $secondary-blue;
}
}
&_previous {
.install-layout__step-icon {
color: $primary-green;
}
}
}
&__content {
min-height: 130px;
}
}

14
client/src/app/install/install-step-1-language.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
class InstallStep1Language extends React.Component {
render() {
return (
<div>
INSTALLATION
</div>
);
}
}
export default InstallStep1Language;

14
client/src/app/install/install-step-2-requirements.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
class InstallStep2Requirements extends React.Component {
render() {
return (
<div>
INSTALLATION
</div>
);
}
}
export default InstallStep2Requirements;

14
client/src/app/install/install-step-3-settings.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
class InstallStep3Settings extends React.Component {
render() {
return (
<div>
INSTALLATION
</div>
);
}
}
export default InstallStep3Settings;

14
client/src/app/install/install-step-4-administrator.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
class InstallStep4Administrator extends React.Component {
render() {
return (
<div>
INSTALLATION
</div>
);
}
}
export default InstallStep4Administrator;

14
client/src/app/install/install-step-5-install.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
class InstallStep4Install extends React.Component {
render() {
return (
<div>
INSTALLATION
</div>
);
}
}
export default InstallStep4Install;

14
client/src/app/install/install-step-6-completed.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
class InstallStep4Completed extends React.Component {
render() {
return (
<div>
INSTALLATION
</div>
);
}
}
export default InstallStep4Completed;

8
client/src/data/languages/en.js
View File

@ -208,6 +208,14 @@ export default {
'ACTIVITY_DELETE_USER': 'deleted user',
'ACTIVITY_UN_BAN_USER': 'banned user',
'SERVER_REQUIREMENTS': 'Server requirements',
'SETTINGS_SETUP': 'Settings setup',
'ADMIN_SETUP': 'Admin setup',
'INSTALL': 'Install',
'COMPLETED': 'Completed',
'INSTALL_HEADER_TITLE': 'OpenSupports Installation Wizard',
'INSTALL_HEADER_DESCRIPTION': 'This wizard will help you to configure and install OpenSupports on your website',
//VIEW DESCRIPTIONS
'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',
'TICKET_LIST_DESCRIPTION': 'Here you can find a list of all tickets you have sent to our support team.',