Commit 0fa834c3 authored by Benoit Lavenier's avatar Benoit Lavenier

[enh] Helptip: allow to disable help tips, from menu (large screen only)

parent 343d2f55
......@@ -374,47 +374,185 @@ $screen-menu: 845px;
// Screen without left menu
@media screen and (max-width: $screen-nomenu-max) {
.hidden-nomenu {
display: none !important;
visibility: hidden !important;
}
.visible-nomenu {
display: inherit !important;
visibility: visible !important;
}
}
@media screen and (min-width: $screen-menu) {
.hidden-nomenu {
display: inherit;
visibility: visible;
}
.visible-nomenu {
display: none !important;
visibility: hidden !important;
}
}
.menu.menu-left {
// Screen WITH left menu
@media screen and (min-width: $screen-menu) {
.hidden-menu {
display: none !important;
visibility: hidden !important;
background-color: whitesmoke;
.item {
opacity: 0.75;
color: black;
}
.visible-menu {
display: inherit !important;
visibility: visible !important;
.item-button-right > .button,
.item-button-right .item-content > .button,
.item-button-right > .buttons,
.item-button-right .item-content > .buttons {
top: 8px !important;
}
.item.active {
background-color: $active !important;
.item-content {
background-color: transparent;
}
}
.item-menu-disable {
color: $dark !important;
}
.item-spacer {
flex: 1 1 auto;
}
.item-actions {
min-height: 47px !important;
}
.item-closeable:hover {
cursor: pointer;
}
.item-closeable {
.close {
position: absolute;
right: 5px;
top: 5px;
}
}
.item-closeable:hover {
.close {
@extend .ion-close;
}
}
}
@media screen and (max-width: $screen-nomenu-max) {
.hidden-menu {
display: inherit;
visibility: visible;
// Menu on small screens
@media screen and (max-width: $screen-sm-max) {
.menu.menu-left {
// Compact menu item (reduce height, etc.)
.item.item-divider {
min-height: 2px;
height: 2px;
padding-top: 0;
padding-bottom: 0;
}
.item,
.item.item-complex .item-content {
height: 40px;
min-height: 40px;
padding-top: 10px;
padding-bottom: 10px;
.badge {
top: 10px;
padding: 2px 6px;
font-size: 12px;
}
}
.item.item-complex {
padding-top: 0;
}
.item.item-button-right .button {
height: 30px;
min-height: 30px;
top: 4px;
}
.item-spacer {
display: none;
visibility: hidden;
}
// Hide footer on small screen
ion-content.has-footer {
bottom: 0 !important; /*ignore footer*/
}
.bar-header {
background-color: $positive-900-bg;
color: #fff;
height: 150px;
padding-right: 0 !important;
.platform-ios.platform-cordova & {
height: calc(constant(safe-area-inset-top) + 150px);
height: calc(env(safe-area-inset-top) + 150px);
}
.hero {
height: 150px;
box-shadow: none; // not need (define in bar-header)
.content {
bottom: 0;
}
}
}
.has-header {
top: 150px;
.platform-ios.platform-cordova & {
top: calc(constant(safe-area-inset-top) + 150px);
top: calc(env(safe-area-inset-top) + 150px);
}
}
}
.visible-menu {
display: none;
visibility: hidden;
}
// Menu for NOT small screens
@media screen and (min-width: $screen-sm) {
.menu.menu-left {
.list {
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
flex-wrap: wrap;
justify-content: flex-end;
}
.item.item-divider {
min-height: 5px;
height: 5px;
}
.footer a {
font-size: 14px ! important;
color: grey !important;
}
}
}
@media screen and (min-width: $screen-md) {
.menu.menu-left {
background-image: url('../../resources/logo/svg/white/logo.large.empty.transparent.svg');
background-repeat: no-repeat;
background-position: -500px -100px;
background-size: 1024px 1024px;
background-color: whitesmoke;
height: 100%;
}
}
......@@ -1842,164 +1980,6 @@ $ionicon-var-badge-editable: $ionicon-var-edit + "\00a0";
}
/**********
Menu
**********/
.menu.menu-left {
background-color: whitesmoke;
.item {
opacity: 0.75;
color: black;
}
.item-button-right > .button,
.item-button-right .item-content > .button,
.item-button-right > .buttons,
.item-button-right .item-content > .buttons {
top: 8px !important;
}
.item.active {
background-color: $active !important;
.item-content {
background-color: transparent;
}
}
.item-menu-disable {
color: $dark !important;
}
.item-spacer {
flex: 1 1 auto;
}
.item-actions {
min-height: 47px !important;
}
}
// Menu on small screens
@media screen and (max-width: $screen-sm-max) {
.menu.menu-left {
// Compact menu item (reduce height, etc.)
.item.item-divider {
min-height: 2px;
height: 2px;
padding-top: 0;
padding-bottom: 0;
}
.item,
.item.item-complex .item-content {
height: 40px;
min-height: 40px;
padding-top: 10px;
padding-bottom: 10px;
.badge {
top: 10px;
padding: 2px 6px;
font-size: 12px;
}
}
.item.item-complex {
padding-top: 0;
}
.item.item-button-right .button {
height: 30px;
min-height: 30px;
top: 4px;
}
.item-spacer {
display: none;
visibility: hidden;
}
// Hide footer on small screen
ion-content.has-footer {
bottom: 0 !important; /*ignore footer*/
}
.bar-header {
background-color: $positive-900-bg;
color: #fff;
height: 150px;
padding-right: 0 !important;
.platform-ios.platform-cordova & {
height: calc(constant(safe-area-inset-top) + 150px);
height: calc(env(safe-area-inset-top) + 150px);
}
.hero {
height: 150px;
box-shadow: none; // not need (define in bar-header)
.content {
bottom: 0;
}
}
}
.has-header {
top: 150px;
.platform-ios.platform-cordova & {
top: calc(constant(safe-area-inset-top) + 150px);
top: calc(env(safe-area-inset-top) + 150px);
}
}
}
}
// Menu for NOT small screens
@media screen and (min-width: $screen-sm) {
.menu.menu-left {
.list {
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
flex-wrap: wrap;
justify-content: flex-end;
}
.item.item-divider {
min-height: 5px;
height: 5px;
}
.footer a {
font-size: 14px ! important;
color: grey !important;
}
}
}
@media screen and (min-width: $screen-md) {
.menu.menu-left {
background-image: url('../../resources/logo/svg/white/logo.large.empty.transparent.svg');
background-repeat: no-repeat;
background-position: -500px -100px;
background-size: 1024px 1024px;
background-color: whitesmoke;
height: 100%;
}
}
/**********
Screen - identity Certifications
**********/
......
......@@ -62,7 +62,7 @@ function PluginExtensionPointController($scope, PluginService) {
* Abstract controller (inherited by other controllers)
*/
function AppController($scope, $rootScope, $state, $ionicSideMenuDelegate, $q, $timeout,
$ionicHistory, $controller, $window, csPlatform, CryptoUtils, csCrypto,
$ionicHistory, $controller, $window, csPlatform, csSettings, CryptoUtils, csCrypto,
UIUtils, BMA, csWallet, Device, Modals, csConfig, csHttp
) {
'ngInject';
......@@ -161,17 +161,19 @@ function AppController($scope, $rootScope, $state, $ionicSideMenuDelegate, $q, $
// Show Help tour
////////////////////////////////////////
$scope.createHelptipScope = function(isTour, helpController) {
$scope.createHelptipScope = function(isTour) {
if (!isTour && ($rootScope.tour || !$rootScope.settings.helptip.enable || UIUtils.screen.isSmall())) {
return; // avoid other helptip to be launched (e.g. csWallet)
}
// Create a new scope for the tour controller
var helptipScope = $scope.$new();
$controller(helpController||'HelpTipCtrl', { '$scope': helptipScope});
$controller('HelpTipCtrl', { '$scope': helptipScope});
return helptipScope;
};
$scope.startHelpTour = function(helpController, skipClearCache) {
$scope.startHelpTour = function(event, skipClearCache) {
if (event && event.defaultPrevented) return false; // Event stopped;
$rootScope.tour = true; // to avoid other helptip to be launched (e.g. csWallet)
// Clear cache history
......@@ -179,11 +181,11 @@ function AppController($scope, $rootScope, $state, $ionicSideMenuDelegate, $q, $
$ionicHistory.clearHistory();
return $ionicHistory.clearCache()
.then(function() {
$scope.startHelpTour(helpController, true/*continue*/);
$scope.startHelpTour(null, true/*continue*/);
});
}
var helptipScope = $scope.createHelptipScope(true/*is tour*/, helpController);
var helptipScope = $scope.createHelptipScope(true/*is tour*/);
return helptipScope.startHelpTour()
.then(function() {
helptipScope.$destroy();
......@@ -194,6 +196,19 @@ function AppController($scope, $rootScope, $state, $ionicSideMenuDelegate, $q, $
});
};
$scope.disableHelpTour = function(event) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
if (csSettings.data.helptip && csSettings.data.helptip.enable) {
$rootScope.settings.helptip.enable = false;
csSettings.store();
}
};
////////////////////////////////////////
// Login & wallet
////////////////////////////////////////
......
......@@ -47,7 +47,7 @@
<button type="button"
class="button button-block button-stable button-raised icon-left icon ion-easel ink-dark hidden-xs"
ng-show="login"
ng-click="startHelpTour()" >
ng-click="startHelpTour($event)" >
{{'COMMON.BTN_HELP_TOUR'|translate}}
</button>
......
......@@ -190,11 +190,15 @@
<div class="item item-divider"></div>
<!-- Help tour (NOT ready yet for small device) -->
<a class="item item-icon-left hidden-xs hidden-sm"
ng-show="!login"
ng-click="startHelpTour()" >
<a class="item item-icon-left item-closeable hidden-xs hidden-sm"
ng-show="!login || $root.settings.helptip.enable"
ng-click="startHelpTour($event)">
<i class="icon ion-easel"></i>
{{:locale:'COMMON.BTN_HELP_TOUR'|translate}}
<span class="close"
ng-if="login"
ng-click="disableHelpTour($event)"></span>
</a>
<a menu-close class="item item-icon-left"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment