diff --git a/client/gulp/config.js b/client/gulp/config.js index a142e407..23403c8d 100644 --- a/client/gulp/config.js +++ b/client/gulp/config.js @@ -16,6 +16,7 @@ module.exports = { 'styles': { 'src': './src/*.scss', + 'watch': './src/**/*.scss', 'dest': './build/css/' }, diff --git a/client/gulp/tasks/browserify.js b/client/gulp/tasks/browserify.js index 352a2ebe..51e38361 100644 --- a/client/gulp/tasks/browserify.js +++ b/client/gulp/tasks/browserify.js @@ -66,4 +66,10 @@ gulp.task('browserify', function() { // Only run watchify if NOT production return buildScript('index.js', !global.isProd); +}); + +gulp.task('config', function() { + + return gulp.src(config.sourceDir + 'config.js') + .pipe(gulp.dest(config.scripts.dest)) }); \ No newline at end of file diff --git a/client/gulp/tasks/development.js b/client/gulp/tasks/development.js index 4d745d1e..fada97fe 100644 --- a/client/gulp/tasks/development.js +++ b/client/gulp/tasks/development.js @@ -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); }); \ No newline at end of file diff --git a/client/gulp/tasks/watch.js b/client/gulp/tasks/watch.js index 8c7207c2..975bc7f7 100644 --- a/client/gulp/tasks/watch.js +++ b/client/gulp/tasks/watch.js @@ -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']); diff --git a/client/src/app/Routes.js b/client/src/app/Routes.js index ee18c790..1c4e880f 100644 --- a/client/src/app/Routes.js +++ b/client/src/app/Routes.js @@ -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 ( + + + + + + + + + diff --git a/client/src/app/install/install-layout.js b/client/src/app/install/install-layout.js new file mode 100644 index 00000000..442e4984 --- /dev/null +++ b/client/src/app/install/install-layout.js @@ -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 ( + +
+
+ OpenSupports Installation +
+
+
+ {i18n('INSTALL_HEADER_TITLE')} +
+
+ {i18n('INSTALL_HEADER_DESCRIPTION')} +
+
+
+ +
+
+
    + {steps.map(this.renderStep.bind(this))} +
+
+
+ {this.props.children} +
+
+ + ); + } + + 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 ( +
  • + + + {index+1}. {i18n(key)} + +
    • + ) + } + + getCurrentStep() { + return 2; + } +} + +export default InstallLayout; \ No newline at end of file diff --git a/client/src/app/install/install-layout.scss b/client/src/app/install/install-layout.scss new file mode 100644 index 00000000..f6e7cf15 --- /dev/null +++ b/client/src/app/install/install-layout.scss @@ -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; + } +} diff --git a/client/src/app/install/install-step-1-language.js b/client/src/app/install/install-step-1-language.js new file mode 100644 index 00000000..eaa6c379 --- /dev/null +++ b/client/src/app/install/install-step-1-language.js @@ -0,0 +1,14 @@ +import React from 'react'; + +class InstallStep1Language extends React.Component { + + render() { + return ( +
    + INSTALLATION +
    + ); + } +} + +export default InstallStep1Language; \ No newline at end of file diff --git a/client/src/app/install/install-step-2-requirements.js b/client/src/app/install/install-step-2-requirements.js new file mode 100644 index 00000000..8066728a --- /dev/null +++ b/client/src/app/install/install-step-2-requirements.js @@ -0,0 +1,14 @@ +import React from 'react'; + +class InstallStep2Requirements extends React.Component { + + render() { + return ( +
    + INSTALLATION +
    + ); + } +} + +export default InstallStep2Requirements; \ No newline at end of file diff --git a/client/src/app/install/install-step-3-settings.js b/client/src/app/install/install-step-3-settings.js new file mode 100644 index 00000000..31048b3c --- /dev/null +++ b/client/src/app/install/install-step-3-settings.js @@ -0,0 +1,14 @@ +import React from 'react'; + +class InstallStep3Settings extends React.Component { + + render() { + return ( +
    + INSTALLATION +
    + ); + } +} + +export default InstallStep3Settings; \ No newline at end of file diff --git a/client/src/app/install/install-step-4-administrator.js b/client/src/app/install/install-step-4-administrator.js new file mode 100644 index 00000000..f3a63395 --- /dev/null +++ b/client/src/app/install/install-step-4-administrator.js @@ -0,0 +1,14 @@ +import React from 'react'; + +class InstallStep4Administrator extends React.Component { + + render() { + return ( +
    + INSTALLATION +
    + ); + } +} + +export default InstallStep4Administrator; \ No newline at end of file diff --git a/client/src/app/install/install-step-5-install.js b/client/src/app/install/install-step-5-install.js new file mode 100644 index 00000000..70145bbd --- /dev/null +++ b/client/src/app/install/install-step-5-install.js @@ -0,0 +1,14 @@ +import React from 'react'; + +class InstallStep4Install extends React.Component { + + render() { + return ( +
    + INSTALLATION +
    + ); + } +} + +export default InstallStep4Install; \ No newline at end of file diff --git a/client/src/app/install/install-step-6-completed.js b/client/src/app/install/install-step-6-completed.js new file mode 100644 index 00000000..dcc56d3b --- /dev/null +++ b/client/src/app/install/install-step-6-completed.js @@ -0,0 +1,14 @@ +import React from 'react'; + +class InstallStep4Completed extends React.Component { + + render() { + return ( +
    + INSTALLATION +
    + ); + } +} + +export default InstallStep4Completed; \ No newline at end of file diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index b56acad0..bb4c2670 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -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.',