From d8d54f4b4358043d68775cd960c507d267b862cc Mon Sep 17 00:00:00 2001 From: FelisCatus Date: Thu, 27 Nov 2014 19:36:51 +0800 Subject: [PATCH] Add a first-run guide which covers basic usage for options. --- omega-i18n/en/messages.json | 36 ++++++++++++ omega-i18n/zh_CN/messages.json | 36 ++++++++++++ omega-i18n/zh_HK/messages.json | 36 ++++++++++++ omega-i18n/zh_TW/messages.json | 36 ++++++++++++ .../src/options.coffee | 1 + omega-target/src/options.coffee | 3 +- omega-web/bower.json | 9 ++- omega-web/src/coffee/options_guide.coffee | 55 +++++++++++++++++++ omega-web/src/less/options.less | 49 +++++++++++++++++ omega-web/src/omega/controllers/master.coffee | 22 +++++++- omega-web/src/options.jade | 6 +- omega-web/src/partials/options_welcome.jade | 13 +++++ omega-web/src/partials/profile_fixed.jade | 2 +- 13 files changed, 298 insertions(+), 6 deletions(-) create mode 100644 omega-web/src/coffee/options_guide.coffee create mode 100644 omega-web/src/partials/options_welcome.jade diff --git a/omega-i18n/en/messages.json b/omega-i18n/en/messages.json index aecae57..b97eb09 100644 --- a/omega-i18n/en/messages.json +++ b/omega-i18n/en/messages.json @@ -433,6 +433,30 @@ "options_attachProfileHelp": { "message": "You can reuse an online collection of conditions published by others by adding a rule list." }, + "options_modalHeader_welcome": { + "message": "Welcome to SwitchyOmega" + }, + "options_welcomeNormal": { + "message": "You have successfully installed SwitchyOmega, the ultimate proxy switcher." + }, + "options_welcomeNormalGuide": { + "message": "Please tell SwitchyOmega about your proxies through the options page. Let's see how." + }, + "options_welcomeUpgrade": { + "message": "You have successfully upgraded to SwitchyOmega. Don't panic, your existing options are fully preserved." + }, + "options_welcomeUpgradeGuide": { + "message": "Now let's go through a quick guide of the new options page." + }, + "options_guideNext": { + "message": "Next" + }, + "options_guideDone": { + "message": "Done" + }, + "options_guideSkip": { + "message": "Skip guide" + }, "options_modalHeader_applyOptions": { "message": "Apply Options" }, @@ -634,6 +658,18 @@ "options_downloadProfileNow": { "message": "Download Profile Now" }, + "options_guide_fixedProfileStep": { + "message": "A Proxy Profile contains settings like server ip & port for proxy.
Profiles are the the basic configuration units in SwitchyOmega.
We have already created an example profile for you. Try opening it." + }, + "options_guide_fixedServersStep": { + "message": "You can fill in your proxy server and port here as you like.
SwitchyOmega does not come with any proxy servers.
Please consult your network provider or proxy software manual if you don't know what should be filled in here." + }, + "options_guide_autoSwitchProfileStep": { + "message": "You can tell SwitchyOmega to switch between proxies automatically through the mighty Switch Profile.
However, its features cannot be covered in this quick guide.
You can open this profile to unlock its power some time later." + }, + "options_guide_addMoreProfilesStep": { + "message": "Need more profiles? You can always add more Proxy, Switch and other profiles
for all your proxying needs.
Enjoy proxying!" + }, "popup_externalProfile": { "message": "(External Profile)" }, diff --git a/omega-i18n/zh_CN/messages.json b/omega-i18n/zh_CN/messages.json index 9095fc8..f752412 100644 --- a/omega-i18n/zh_CN/messages.json +++ b/omega-i18n/zh_CN/messages.json @@ -433,6 +433,30 @@ "options_attachProfileHelp": { "message": "可以添加规则列表，以便引用他人在线发布的一组规则。" }, + "options_modalHeader_welcome": { + "message": "欢迎使用 SwitchyOmega" + }, + "options_welcomeNormal": { + "message": "您已经成功安装了 SwitchyOmega ，一个强大的代理切换工具。" + }, + "options_welcomeNormalGuide": { + "message": "您可以通过选项页面设置需要使用的代理服务器，下面我们就来试试看吧。" + }, + "options_welcomeUpgrade": { + "message": "您已经成功升级到 SwitchyOmega. 别担心，所有设置都已经升级成功，可以继续使用。" + }, + "options_welcomeUpgradeGuide": { + "message": "现在我们来熟悉一下新的选项页面。" + }, + "options_guideNext": { + "message": "下一步" + }, + "options_guideDone": { + "message": "完成" + }, + "options_guideSkip": { + "message": "跳过教程" + }, "options_modalHeader_applyOptions": { "message": "应用选项" }, @@ -634,6 +658,18 @@ "options_downloadProfileNow": { "message": "立即更新情景模式" }, + "options_guide_fixedProfileStep": { + "message": "代理情景包含了服务器地址、端口等代理的信息。
在 SwitchyOmega 中，情景模式是代理设置的基本单元。
默认设置中已经建立了一个代理情景模式作为样例。试着打开它吧。" + }, + "options_guide_fixedServersStep": { + "message": "在这里，您可以填写所需的代理服务器地址和端口。
SwitchyOmega软件本身不提供任何内置代理服务器。
如果您不清楚应该填写什么，最好咨询下您的网络提供者，或者参考代理软件的设置说明。" + }, + "options_guide_autoSwitchProfileStep": { + "message": "您可以通过强大的自动切换模式在多个代理间切换自如。
不过，在这个简单的教程中无法详尽介绍所有功能。
想要使用此功能时，可以打开这里的设置界面，来了解如何使用自动切换功能。" + }, + "options_guide_addMoreProfilesStep": { + "message": "如果您需要更多的情景模式，可以随时在这里创建代理、切换和其他情景模式。
教程到此结束，您可以继续自定义设置。" + }, "popup_externalProfile": { "message": "(外部情景模式)" }, diff --git a/omega-i18n/zh_HK/messages.json b/omega-i18n/zh_HK/messages.json index 99cf49d..420f42f 100644 --- a/omega-i18n/zh_HK/messages.json +++ b/omega-i18n/zh_HK/messages.json @@ -433,6 +433,30 @@ "options_attachProfileHelp": { "message": "可以添加規則列表，以便引用他人在線發佈的一組規則。" }, + "options_modalHeader_welcome": { + "message": "歡迎使用 SwitchyOmega" + }, + "options_welcomeNormal": { + "message": "您已經成功安裝了 SwitchyOmega ，一個強大的代理切換工具。" + }, + "options_welcomeNormalGuide": { + "message": "您可以通過選項頁面設定需要使用的代理伺服器，下面我們就來試試看吧。" + }, + "options_welcomeUpgrade": { + "message": "您已經成功升級到 SwitchyOmega. 別擔心，所有設定都已經升級成功，可以繼續使用。" + }, + "options_welcomeUpgradeGuide": { + "message": "現在我們來熟悉一下新的選項頁面。" + }, + "options_guideNext": { + "message": "下一步" + }, + "options_guideDone": { + "message": "完成" + }, + "options_guideSkip": { + "message": "跳過教程" + }, "options_modalHeader_applyOptions": { "message": "程式選項" }, @@ -658,6 +682,18 @@ "popup_addCondition": { "message": "添加條件" }, + "options_guide_fixedProfileStep": { + "message": "代理情景包含了伺服器地址、埠等代理的資訊。
在 SwitchyOmega 中，情景模式是代理設定的基本單元。
默認設定中已經建立了一個代理情景模式作為樣例。試著開啟它吧。" + }, + "options_guide_fixedServersStep": { + "message": "在這裡，您可以填寫所需的代理伺服器地址和埠。
SwitchyOmega軟體本身不提供任何內建代理伺服器。
如果您不清楚應該填寫什麼，最好諮詢下您的網路提供者，或者參考代理軟體的設定說明。" + }, + "options_guide_autoSwitchProfileStep": { + "message": "您可以通過強大的自動切換模式在多個代理間切換自如。
不過，在這個簡單的教程中無法詳盡介紹所有功能。
想要使用此功能時，可以開啟這裡的設定介面，來瞭解如何使用自動切換功能。" + }, + "options_guide_addMoreProfilesStep": { + "message": "如果您需要更多的情景模式，可以隨時在這裡創建代理、切換和其他情景模式。
教程到此結束，您可以繼續自定義設定。" + }, "popup_showOptions": { "message": "選項" }, diff --git a/omega-i18n/zh_TW/messages.json b/omega-i18n/zh_TW/messages.json index a111a66..bf3310e 100644 --- a/omega-i18n/zh_TW/messages.json +++ b/omega-i18n/zh_TW/messages.json @@ -433,6 +433,30 @@ "options_attachProfileHelp": { "message": "可以添加規則列表，以便引用他人線上釋出的一組規則。" }, + "options_modalHeader_welcome": { + "message": "歡迎使用 SwitchyOmega" + }, + "options_welcomeNormal": { + "message": "您已經成功安裝了 SwitchyOmega ，一個強大的代理切換工具。" + }, + "options_welcomeNormalGuide": { + "message": "您可以通過選項頁面設定需要使用的代理伺服器，下面我們就來試試看吧。" + }, + "options_welcomeUpgrade": { + "message": "您已經成功升級到 SwitchyOmega. 別擔心，所有設定都已經升級成功，可以繼續使用。" + }, + "options_welcomeUpgradeGuide": { + "message": "現在我們來熟悉一下新的選項頁面。" + }, + "options_guideNext": { + "message": "下一步" + }, + "options_guideDone": { + "message": "完成" + }, + "options_guideSkip": { + "message": "跳過教程" + }, "options_modalHeader_applyOptions": { "message": "應用選項" }, @@ -658,6 +682,18 @@ "popup_addCondition": { "message": "添加條件" }, + "options_guide_fixedProfileStep": { + "message": "代理情景包含了伺服器地址、埠等代理的資訊。
在 SwitchyOmega 中，情景模式是代理設定的基本單元。
默認設定中已經建立了一個代理情景模式作為樣例。試著開啟它吧。" + }, + "options_guide_fixedServersStep": { + "message": "在這裡，您可以填寫所需的代理伺服器地址和埠。
SwitchyOmega軟體本身不提供任何內建代理伺服器。
如果您不清楚應該填寫什麼，最好諮詢下您的網路提供者，或者參考代理軟體的設定說明。" + }, + "options_guide_autoSwitchProfileStep": { + "message": "您可以通過強大的自動切換模式在多個代理間切換自如。
不過，在這個簡單的教程中無法詳盡介紹所有功能。
想要使用此功能時，可以開啟這裡的設定介面，來瞭解如何使用自動切換功能。" + }, + "options_guide_addMoreProfilesStep": { + "message": "如果您需要更多的情景模式，可以隨時在這裡創建代理、切換和其他情景模式。
教程到此結束，您可以繼續自定義設定。" + }, "popup_showOptions": { "message": "選項" }, diff --git a/omega-target-chromium-extension/src/options.coffee b/omega-target-chromium-extension/src/options.coffee index 8bdd610..44cb945 100644 --- a/omega-target-chromium-extension/src/options.coffee +++ b/omega-target-chromium-extension/src/options.coffee @@ -241,6 +241,7 @@ class ChromeOptions extends OmegaTarget.Options return Promise.reject ex if localStorage['config'] Object.getPrototypeOf(localStorage).clear.call(localStorage) + @_state.set({'firstRun': 'upgrade'}) return this && super(upgraded, upgraded) module.exports = ChromeOptions diff --git a/omega-target/src/options.coffee b/omega-target/src/options.coffee index 4ae924e..377eab3 100644 --- a/omega-target/src/options.coffee +++ b/omega-target/src/options.coffee @@ -56,7 +56,8 @@ class Options ).return(options) ).catch (ex) => @log.error(ex.stack) - @reset() + @reset().tap => + @_state.set({'firstRun': 'new'}) ).then((options) => @_options = options @_watch() diff --git a/omega-web/bower.json b/omega-web/bower.json index cfc8d5c..1b85611 100644 --- a/omega-web/bower.json +++ b/omega-web/bower.json @@ -37,7 +37,8 @@ "FileSaver": "*", "angular-ui-utils": "bower-validate", "angular-ladda": "~0.1.6", - "angular-sanitize": "~1.2.26" + "angular-sanitize": "~1.2.26", + "shepherd.js": "~0.5.1" }, "exportsOverride": { "script.js": { @@ -93,6 +94,12 @@ "jsondiffpatch": { "": "public/build/jsondiffpatch.min.js" }, + "shepherd.js": { + "": [ + "*.min.js", + "css/*.css" + ] + }, "spectrum": { "": [ "*.js", diff --git a/omega-web/src/coffee/options_guide.coffee b/omega-web/src/coffee/options_guide.coffee new file mode 100644 index 0000000..a8303f4 --- /dev/null +++ b/omega-web/src/coffee/options_guide.coffee @@ -0,0 +1,55 @@ +$script 'lib/tether/tether.js', -> + $script 'lib/shepherd.js/shepherd.min.js', -> + tr = chrome.i18n.getMessage.bind(chrome.i18n) + tour = new Shepherd.Tour + defaults: + classes: 'shepherd-theme-arrows' + scrollTo: true + + targetAnchorClick = + selector: '.shepherd-target a' + event: 'click' + + tour.addStep('fixed-profile-step', + text: tr('options_guide_fixedProfileStep') + attachTo: '.nav-profile[data-profile-type="FixedProfile"] right' + scrollTo: false + advanceOn: targetAnchorClick + buttons: [ + text: tr('options_guideNext') + action: tour.next + ] + ).on 'show', -> + location.href = document.querySelector( + '.nav-profile[data-profile-type="FixedProfile"] a').href + + tour.addStep 'fixed-servers-step', + text: tr('options_guide_fixedServersStep') + attachTo: '.fixed-servers top' + scrollTo: false + buttons: [ + text: tr('options_guideNext') + action: tour.next + ] + + tour.addStep 'auto-switch-profile-step', + text: tr('options_guide_autoSwitchProfileStep') + attachTo: '.nav-profile[data-profile-type="SwitchProfile"] right' + scrollTo: false + advanceOn: targetAnchorClick + buttons: [ + text: tr('options_guideNext') + action: tour.next + ] + + tour.addStep 'add-more-profiles-step', + text: tr('options_guide_addMoreProfilesStep') + attachTo: '.nav-new-profile right' + scrollTo: false + advanceOn: targetAnchorClick + buttons: [ + text: tr('options_guideDone') + action: tour.next + ] + + tour.start() diff --git a/omega-web/src/less/options.less b/omega-web/src/less/options.less index f5479e2..1ec6b0f 100644 --- a/omega-web/src/less/options.less +++ b/omega-web/src/less/options.less @@ -35,6 +35,14 @@ text-align: initial; } +.opacity-half { + opacity: .5 !important; +} + +.opacity-0 { + opacity: 0 !important; +} + ul.list-style-none, li.list-style-none { list-style: none; padding-left: 0; @@ -54,6 +62,47 @@ ul.list-style-none, li.list-style-none { } } +/* shepherd.js */ + +.shepherd-element { + z-index: 20; +} + +.shepherd-active { + &:before { + content: " "; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, .5); + z-index: 10; + } + + &:not([data-shepherd-step="fixed-servers-step"]) { + .side-nav { + position: absolute; + overflow: visible; + bottom: 0; + } + + .shepherd-enabled > a { + color: #428bca; + background-color: #fff; + } + } +} + +.shepherd-enabled { + position: relative; + z-index: 11; + + &.fixed-servers { + background-color: #fff; + } +} + /* alert */ .alert-top-wrapper { diff --git a/omega-web/src/omega/controllers/master.coffee b/omega-web/src/omega/controllers/master.coffee index 0bfa80b..65d1302 100644 --- a/omega-web/src/omega/controllers/master.coffee +++ b/omega-web/src/omega/controllers/master.coffee @@ -1,5 +1,5 @@ angular.module('omega').controller 'MasterCtrl', ($scope, $rootScope, $window, - $modal, $state, builtinProfiles, profileColors, profileIcons, omegaTarget, $q, + $q, $modal, $state, profileColors, profileIcons, omegaTarget, $timeout, $location, $filter, getAttachedName, isProfileNameReserved, isProfileNameHidden, dispNameFilter) -> @@ -271,3 +271,23 @@ angular.module('omega').controller 'MasterCtrl', ($scope, $rootScope, $window, "options_downloadInterval_" + (if interval < 0 then "never" else interval) omegaTarget.refresh() + + omegaTarget.state('firstRun').then (firstRun) -> + return unless firstRun + scope = $rootScope.$new('isolate') + scope.upgrade = (firstRun == 'upgrade') + $modal.open( + templateUrl: 'partials/options_welcome.html' + keyboard: false + scope: scope + backdrop: 'static' + backdropClass: 'opacity-half' + ).result.then (r) -> + switch r + when 'later' + return + when 'show' + $script 'js/options_guide.js' + when 'skip' + break + omegaTarget.state('firstRun', '') diff --git a/omega-web/src/options.jade b/omega-web/src/options.jade index f7d1556..d301eb6 100644 --- a/omega-web/src/options.jade +++ b/omega-web/src/options.jade @@ -7,6 +7,7 @@ html(lang='en' ng-controller='MasterCtrl' ng-csp) link(rel='stylesheet' href='lib/bootstrap/css/bootstrap.min.css') link(rel='stylesheet' href='lib/spectrum/spectrum.css') link(rel='stylesheet' href='lib/ladda/ladda-themeless.min.css') + link(rel='stylesheet' href='lib/shepherd.js/shepherd-theme-arrows.css') link(rel='stylesheet' href='css/options.css') body(style='display: none;' ng-style='{display: options ? "block" : "none"}') .container-fluid @@ -28,10 +29,11 @@ html(lang='en' ng-controller='MasterCtrl' ng-csp) | {{'options_tab_importExport' | tr}} li.divider li.nav-header {{'options_navHeader_profiles' | tr}} - li(ng-repeat='profile in options | profiles:"sorted"' ui-sref-active='active') + li.nav-profile(ng-repeat='profile in options | profiles:"sorted"' ui-sref-active='active' + data-profile-type="{{profile.profileType}}") a(ui-sref='profile({name: profile.name})') span(omega-profile-inline='profile' options='options') - li + li.nav-new-profile a(role='button' ng-click='newProfile()') span.glyphicon.glyphicon-plus = ' ' diff --git a/omega-web/src/partials/options_welcome.jade b/omega-web/src/partials/options_welcome.jade new file mode 100644 index 0000000..9ea9d5f --- /dev/null +++ b/omega-web/src/partials/options_welcome.jade @@ -0,0 +1,13 @@ +.modal-header + button.close(type='button' ng-click='$dismiss()') + span(aria-hidden='true') × + span.sr-only {{'dialog_close' | tr}} + h4.modal-title {{'options_modalHeader_welcome' | tr}} +.modal-body + p(ng-show="upgrade") {{'options_welcomeUpgrade' | tr}} + p(ng-show="upgrade") {{'options_welcomeUpgradeGuide' | tr}} + p(ng-show="!upgrade") {{'options_welcomeNormal' | tr}} + p(ng-show="!upgrade") {{'options_welcomeNormalGuide' | tr}} +.modal-footer + button.btn.btn-default(ng-click='$close("skip")') {{'options_guideSkip' | tr}} + button.btn.btn-primary(type='button' ng-click='$close("show")') {{'options_guideNext' | tr}} diff --git a/omega-web/src/partials/profile_fixed.jade b/omega-web/src/partials/profile_fixed.jade index 6ea6e7b..983442a 100644 --- a/omega-web/src/partials/profile_fixed.jade +++ b/omega-web/src/partials/profile_fixed.jade @@ -1,5 +1,5 @@ div(ng-controller='FixedProfileCtrl') - section.settings-group + section.settings-group.settings-group-fixed-servers h3 {{'options_group_proxyServers' | tr}} .table-responsive table.fixed-servers.table.table-bordered.table-striped.width-limit-lg