diff --git a/css/firstrunwizard.css b/css/firstrunwizard.css deleted file mode 100644 index 4181dec2..00000000 --- a/css/firstrunwizard.css +++ /dev/null @@ -1,82 +0,0 @@ -#firstrunwizard { - text-align: center; -} - -#cboxLoadedContent { - border-radius: 3px; -} - -#firstrunwizard .firstrunwizard-header { - padding: 20px 12px; - background-color: #0082c9; - background-image: url('../../../core/img/background.jpg'); - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: cover; - color: #fff; -} -#firstrunwizard .firstrunwizard-header .logo { - background-image: url('../../../core/img/logo.svg'); - background-repeat: no-repeat; - background-size: 175px; - background-position: center; - width: 252px; - height: 120px; - margin: 0 auto; -} - -#firstrunwizard .firstrunwizard-content { - margin: 12px; -} - -#firstrunwizard h1 { - font-size: 40px; - font-weight: 300; - line-height: 120%; - padding: 0 0 10px -} - -#firstrunwizard h2 { - margin: 35px 0 10px; - line-height: 120%; -} - -.clientslinks .appsmall, -#firstrunwizard .appsmall { - height: 32px; - width: 32px; - position: relative; - opacity: .5; - vertical-align: middle; -} -.clientslinks .button, -#firstrunwizard .button { - display: inline-block; - padding: 8px; - font-weight: normal; - font-size: 14px; -} - -#firstrunwizard p a { - font-weight: bold; - color: #0082c9; -} -#firstrunwizard p a:hover, -#firstrunwizard p a:focus { - color: #444; -} -#firstrunwizard .footnote { - margin-top: 40px; -} - -#firstrunwizard .close { - position: absolute; - top: 0; - right: 0; - padding: 10px; -} - -.clientslinks { - margin-top: 20px; - margin-bottom: 20px; -} \ No newline at end of file diff --git a/css/firstrunwizard.scss b/css/firstrunwizard.scss new file mode 100644 index 00000000..2e0cc71e --- /dev/null +++ b/css/firstrunwizard.scss @@ -0,0 +1,240 @@ +#cboxLoadedContent { + border-radius: 3px; +} + +#firstrunwizard .firstrunwizard-header { + padding: 20px 12px; + background-color: #0082c9; + background-image: url($image-login-background); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; + color: #fff; + text-align: center; +} +#firstrunwizard .firstrunwizard-header .logo { + background-image: url($image-logo); + background-repeat: no-repeat; + background-size: 175px; + background-position: center; + width: 252px; + height: 120px; + margin: 0 auto; +} + +#firstrunwizard .firstrunwizard-content { + margin: 12px; +} + +#firstrunwizard h1 { + font-size: 40px; + font-weight: 300; + line-height: 120%; + padding: 0 0 10px +} + +#firstrunwizard h2 { + margin: 30px 0 10px; + line-height: 120%; + padding: 0; +} + +.clientslinks .appsmall { + height: 32px; + width: 32px; + position: relative; + opacity: .5; + vertical-align: middle; +} +.clientslinks .button { + display: inline-block; + padding: 8px; + font-weight: normal; + font-size: 14px; +} + +#firstrunwizard .page { + margin-bottom: 60px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + h2 { + margin: 0 0 10px 0; + } + .image { + padding: 20px; + max-width: calc(50% - 40px); + flex-grow: 1; + img { + width: 100%; + } + } + .content { + padding: 20px; + } + p { + margin-bottom: 20px; + } + .description-block { + margin-bottom: 40px; + } + .description { + margin: 20px; + width: auto; + flex-grow: 1; + max-width: calc(50% - 40px); + } + ul { + margin: 10px; + li { + margin-left: 20px; + margin-bottom: 10px; + list-style-type: circle; + list-style-position: outside; + } + } + a:not(.button) { + text-decoration: underline; + } + .button { + display: inline-block; + + img { + width: 16px; + height: 16px; + opacity: .5; + margin-top: -3px; + vertical-align: middle; + } + } +} +#firstrunwizard { + .content-clients { + width: 100%; + text-align: center; + a { + text-decoration: none; + display: inline-block; + } + } + .content-final { + h2 { + background-position: 0; + background-size: 16px 16px; + padding-left: 26px; + opacity: .7; + } + } +} + +.wizard-navigation { + display: flex; + position: absolute; + bottom: 10px; + width: calc(100% - 24px); + .prev, .next { + flex-grow: 1; + flex-basis: 200px; + } + .next { + text-align: right; + } + .position-indicator { + list-style-type: circle; + list-style-position: inside; + padding: 0; + margin: 10px 0 0; + color: $color-primary; + font-size: 120%; + li { + float:left; + &.active { + list-style-type: disc; + } + } + } +} +#firstrunwizard p a { + font-weight: bold; + color: #0082c9; +} +#firstrunwizard p a:hover, +#firstrunwizard p a:focus { + color: #444; +} +#firstrunwizard .footnote { + margin-top: 40px; +} + +#firstrunwizard .close { + position: absolute; + top: 0; + right: 0; + padding: 10px; +} + +.clientslinks { + margin-top: 20px; + margin-bottom: 20px; +} + +#firstrunwizard .page #wizard-values { + list-style-type: none; + display: flex; + flex-wrap: wrap; + li { + display: block; + min-width: 250px; + width: 33%; + flex-grow: 1; + margin: 20px 0 20px 0; + span { + opacity: .7; + display: block; + height: 50px; + background-size: 40px; + } + h2 { + margin: 10px 0 10px 0; + font-size: 130%; + text-align: center; + } + } +} + +.details-link { + text-align: center; +} + +.icon-source { + background-image: url('../img/source.svg'); +} +.icon-world { + background-image: url('../img/world.svg'); +} + +@media only screen and (max-width: 680px) { + #firstrunwizard { + .firstrunwizard-header div.logo { + background-size: 120px; + } + h1 { + font-size: 20px; + } + .page > div { + max-width: 100% !important; + width: 100%; + } + #wizard-values li { + min-width: 100%; + overflow: hidden; + span, h2 { + font-size: 12px; + float:left; + } + } + .page .content { + padding: 0; + } + } +} diff --git a/img/appstore.png b/img/appstore.png new file mode 100644 index 00000000..f5fcdf1e Binary files /dev/null and b/img/appstore.png differ diff --git a/img/world.svg b/img/world.svg new file mode 100644 index 00000000..eeaef018 --- /dev/null +++ b/img/world.svg @@ -0,0 +1,4 @@ + + + + diff --git a/js/activate.js b/js/activate.js index c852d61d..167757eb 100644 --- a/js/activate.js +++ b/js/activate.js @@ -1,3 +1,3 @@ $(document).ready(function() { - showFirstRunWizard(); + OCA.FirstRunWizard.Wizard.showFirstRunWizard(); }); diff --git a/js/firstrunwizard.js b/js/firstrunwizard.js index 983d7bee..9b82ce6d 100644 --- a/js/firstrunwizard.js +++ b/js/firstrunwizard.js @@ -1,26 +1,151 @@ -function showFirstRunWizard(){ - $.colorbox({ - opacity: 0.7, - transition: 'elastic', - speed: 100, - width: '80%', - height: '80%', - href: OC.generateUrl('/apps/firstrunwizard/wizard'), - onClosed : function() { - $.ajax({ - url: OC.generateUrl('/apps/firstrunwizard/wizard'), - type: 'delete' +(function() { + if (!OCA.FirstRunWizard) { + OCA.FirstRunWizard = {}; + } + OCA.FirstRunWizard.Wizard = { + + initialize: function () { + + }, + getTotal: function() { + return this.$pages.length; + }, + getCurrent: function () { + return $('#firstrunwizard .page.active').index('#firstrunwizard .page'); + }, + isLast: function() { + return this.getCurrent() >= this.getTotal()-1; + }, + isFirst: function() { + return this.getCurrent() === 0; + }, + updateTitle: function() { + var active = $('#firstrunwizard .page.active'); + var header = this.$wizard.find('.firstrunwizard-header'); + header.find('h1').text(active.data('title')); + header.find('p').text(active.data('subtitle')); + }, + goNext: function() { + if (this.isLast()) { + return; + } + var active = $('#firstrunwizard .page.active'); + var next = active.next(); + this.$prev.show(); + if (this.getCurrent() < this.getTotal()-1) { + active.hide().removeClass('active'); + next.show().addClass('active'); + } + + this.$position.find('li').removeClass('active'); + this.$position.find('>li:nth-child(' + (this.getCurrent()+1) + ')').addClass('active'); + + if (this.isLast()) { + this.$next.hide(); + this.$finish.show(); + } else { + this.$next.show(); + this.$finish.hide(); + } + this.updateTitle(); + $.colorbox.resize(); + }, + goPrevious: function() { + if (this.isFirst()) { + return; + } + var active = $('#firstrunwizard .page.active'); + var prev = active.prev(); + active.hide().removeClass('active'); + prev.show().addClass('active'); + this.$next.show(); + this.$finish.hide(); + if (!this.isFirst()) { + active.hide().removeClass('active'); + prev.show().addClass('active'); + } + + this.$position.find('li').removeClass('active'); + this.$position.find('>li:nth-child(' + (this.getCurrent()+1) + ')').addClass('active'); + + if (this.isFirst()) { + this.$prev.hide(); + } else { + this.$prev.show(); + } + this.updateTitle(); + $.colorbox.resize(); + }, + handleKeydown: function(e) { + switch (e.keyCode) { + case 37: // arrow left + this.goPrevious(); + break; + case 13: + case 39: + this.goNext(); + break; + case 27: + this.closeWizard(); + break; + } + }, + onComplete: function() { + this.$wizard = $('#firstrunwizard'); + this.$finish = this.$wizard.find('#finish'); + this.$prev = this.$wizard.find('#prev'); + this.$next = this.$wizard.find('#next'); + this.$pages = this.$wizard.find('.page'); + this.$position = this.$wizard.find('.position-indicator'); + + this.$finish.hide(); + this.$pages.hide(); + this.$prev.hide(); + this.$pages.first().fadeIn().addClass('active'); + $.colorbox.resize(); + var self = this; + this.$pages.each(function() { + self.$position.append('
  • '); + }); + this.$position.find('>li:first-child').addClass('active'); + + this.$wizard.on('click', '#next', this.goNext.bind(this)); + this.$wizard.on('click', '#prev', this.goPrevious.bind(this)); + this.$wizard.on('click', '#finish', this.closeWizard.bind(this)); + this.$wizard.on('click', '#closeWizard', this.closeWizard.bind(this)); + $('body').off('keydown', this.handleKeydown).on('keydown', this.handleKeydown.bind(this)); + this.updateTitle(); + }, + closeWizard: function() { + $('body').off('keydown', this.handleKeydown); + $.colorbox.close(); + }, + + showFirstRunWizard: function(){ + var self = this; + $.colorbox({ + opacity: 0.7, + transition: 'elastic', + speed: 100, + width: '80%', + height: '80%', + maxWidth: '900px', + href: OC.generateUrl('/apps/firstrunwizard/wizard'), + onClosed : function() { + $.ajax({ + url: OC.generateUrl('/apps/firstrunwizard/wizard'), + type: 'delete' + }); + }, + onComplete: self.onComplete.bind(self), }); } - }); -} + }; +})(); $(document).ready(function() { - $('#showWizard').live('click', function () { - showFirstRunWizard(); - }); - $('#closeWizard').live('click', function () { - $.colorbox.close(); + $('#showWizard').on('click', function () { + OCA.FirstRunWizard.Wizard.showFirstRunWizard(); }); }); diff --git a/templates/page.apps.php b/templates/page.apps.php new file mode 100644 index 00000000..3944291b --- /dev/null +++ b/templates/page.apps.php @@ -0,0 +1,44 @@ + + * + * @author Julius Härtl + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +/** + * @var array $_ + * @var \OCP\IL10N $l + * @var \OCP\Defaults $theme + */ +?> +
    +
    +
    +

    t('Find more than 100 apps in the Nextcloud app store to customize your cloud:')); ?>

    +
      +
    • t('Groupware apps like Calendar, Contacts, Mail')); ?>
      • +
    • t('Communication with Nextcloud Talk')); ?>
      • +
    • t('Collaboration apps for document editing')); ?>
      • +
    • t('Security and authentication features like two-factor authentication, SSO and randsomware protection')); ?>
      • +
    • t('Many others like a music players, password managers, a kanban app, download manager or a markdown editor')); ?>
      • + +
    +

    t('Browse the app store')); ?>

    +
    +
    diff --git a/templates/page.clients.php b/templates/page.clients.php new file mode 100644 index 00000000..53c7a2dc --- /dev/null +++ b/templates/page.clients.php @@ -0,0 +1,73 @@ + + * + * @author Julius Härtl + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +/** + * @var array $_ + * @var \OCP\IL10N $l + * @var \OCP\Defaults $theme + */ +?> + +
    +
    +

    t('Nextcloud gives you access to your files wherever you are.')); ?>
    + t('Our easy to use desktop and mobile clients are available for all major platforms at zero cost!')); ?>

    +
    +

    t('Get the apps to sync your files')); ?>

    + + <?php p($l->t('Desktop client')); ?> + + + <?php p($l->t('Android app')); ?> + + + <?php p($l->t('iOS app')); ?> + +
    +
    +

    t('Connect your desktop apps to %s', array($theme->getName()))); ?>

    + + + t('Connect your calendar')); ?> + + + + t('Connect your contacts')); ?> + + + + t('Access files via WebDAV')); ?> + +
    +
    +
    \ No newline at end of file diff --git a/templates/page.final.php b/templates/page.final.php new file mode 100644 index 00000000..126a5ff4 --- /dev/null +++ b/templates/page.final.php @@ -0,0 +1,38 @@ + + +
    +
    +
    +

    t('Get more information')); ?>

    +

    t('The Nextcloud documentation for home users:')); ?>

    + +

    t('You can also ask for help in our community support channels:')); ?>

    + +
    +
    +
    +
    +

    t('Start contributing')); ?>

    +

    t('Do you want to get a certain improvement in Nextcloud? Did you find a problem? Do you want to help translate, promote or document Nextcloud?')); ?>

    + t('Become part of the Community.')); ?> +
    +
    +

    t('Enterprise support')); ?>

    +

    t('If you run Nextcloud in a mission critical environment with large numbers of users and big amounts of data and need the certainty of support from the experts behind the Nextcloud technology, a Enterprise Subscription from Nextcloud is available with email and phone support.')); ?>

    + t('Get enterprise support')); ?> +
    +
    +
    \ No newline at end of file diff --git a/templates/page.values.php b/templates/page.values.php new file mode 100644 index 00000000..7ed10507 --- /dev/null +++ b/templates/page.values.php @@ -0,0 +1,54 @@ + + * + * @author Julius Härtl + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +/** + * @var array $_ + * @var \OCP\IL10N $l + * @var \OCP\Defaults $theme + */ +?> + +
    +
    +

    + t('Nextcloud puts your data at your fingertips, under your control. Store your documents, calendar, contacts and photos on a server in your company, at home, at one of our providers or in a data center you know.')); ?> +

    + +
      +
    • + +

      t('Host you data and files where you decide')); ?>

      +
      • +
    • + +

      t('Open Standards and Interoperability')); ?>

      +
      • +
    • + +

      t('100%% Open Source & community-focused')); ?>

      +
      • +
    + +

    t('Learn more about %s', $theme->getName())); ?>

    +
    +
    diff --git a/templates/wizard.php b/templates/wizard.php index 39d8440d..1af6e38b 100644 --- a/templates/wizard.php +++ b/templates/wizard.php @@ -7,59 +7,44 @@ ?>
    -
    - - - - - - -

    getSlogan()); ?>

    -

    t('Access & share your files, calendars, contacts, mail & more from any device, on your terms'));?>

    - -
    - -
    - -

    t('Get the apps to sync your files'));?>

    - - <?php p($l->t('Desktop client'));?> - - - <?php p($l->t('Android app'));?> - - - <?php p($l->t('iOS app'));?> - - - -

    t('Connect your desktop apps to %s', array($theme->getName()))); ?>

    - - - t('Connect your calendar'));?> - - - - t('Connect your contacts'));?> - - - - t('Access files via WebDAV'));?> - - -

    -t('There’s more information in the documentation and on our website.', array($theme->getDocBaseUrl(), $theme->getBaseUrl()))); ?>
    -t('If you like Nextcloud, recommend it to your friends and contribute back!')); ?> -

    - -
    +
    + + + + + + +

    getSlogan()); ?>

    +

    + +
    + +
    + inc('page.values')); + print_unescaped($this->inc('page.clients')); + + $uid = \OC::$server->getUserSession()->getUser()->getUID(); + if (OC_User::isAdminUser($uid)) { + print_unescaped($this->inc('page.apps')); + } + print_unescaped($this->inc('page.final')); + ?> + +
    + +
      + +
      +
      +
      \ No newline at end of file