Merge pull request #4593 from oliverguenther/fix/22987/close-modal

[22987] Onboarding: Reset video on modal close
pull/4595/head
Oliver Günther 8 years ago committed by GitHub
commit 76b293854d
  1. 8
      app/views/homescreen/index.html.erb
  2. 23
      app/views/onboarding/_menu_item.html.erb
  3. 42
      app/views/onboarding/_starting_video_modal.html.erb
  4. 3
      frontend/app/components/common/modal/foundation-modal-container.directive.html
  5. 67
      frontend/app/components/common/modal/foundation-modal-container.directive.ts
  6. 32
      frontend/app/components/common/modal/foundation-modal.directive.ts

@ -34,11 +34,9 @@ See doc/COPYRIGHT.rdoc for more details.
</h2>
</div>
<foundation-modal modal-class="onboarding--start-modal" modal-start-on-show="<%= params[:first_time_user] %>">
<div class="foundation-modal--template">
<%= render partial: '/onboarding/starting_video_modal' %>
</div>
</foundation-modal>
<foundation-modal-container showing="<%= !!params[:first_time_user] %>">
<%= render partial: '/onboarding/starting_video_modal' %>
</foundation-modal-container>
<%= render partial: 'announcements/show' %>

@ -26,14 +26,15 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
See doc/COPYRIGHT.rdoc for more details.
++#%>
<foundation-modal modal-class="onboarding--start-modal" >
<div class="foundation-modal--template">
<%= render partial: '/onboarding/starting_video_modal' %>
</div>
<li>
<%= link_to l(:label_video),
'',
title: l(:label_video),
class: 'foundation-modal--activate-link' %>
</li>
</foundation-modal>
<li>
<%= link_to l(:label_video),
'',
title: l(:label_video),
class: 'foundation-modal--activate-link' %>
</li>
<foundation-modal-container activation-selector='.foundation-modal--activate-link'>
<%= render partial: '/onboarding/starting_video_modal' %>
</foundation-modal-container>

@ -27,28 +27,30 @@ See doc/COPYRIGHT.rdoc for more details.
++#%>
<div id="top-menu" class="onboarding--top-menu">
<%= homescreen_user_avatar %>
<h2><%= I18n.t('onboarding.welcome', name: current_user.name) %></h2>
<a class="icon-context icon-close" ng-click="close()"></a>
</div>
<div foundation-modal modal-class="onboarding--start-modal" class="foundation-modal--template">
<div id="top-menu" class="onboarding--top-menu">
<%= homescreen_user_avatar %>
<h2><%= I18n.t('onboarding.welcome', name: current_user.name) %></h2>
<a class="icon-context icon-close" ng-click="close()"></a>
</div>
<div class="onboarding--main">
<h2><%= I18n.t('top_menu.getting_started') %></h2>
<div class="onboarding--video-block">
<div class="onboarding--video-text">
<span><%= I18n.t('onboarding.text_getting_started') %></span>
</div>
<div class="onboarding--video">
<iframe src="<%= OpenProject::Configuration.onboarding_video_url %>" height="282" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="onboarding--main">
<h2><%= I18n.t('top_menu.getting_started') %></h2>
<div class="onboarding--video-block">
<div class="onboarding--video-text">
<span><%= I18n.t('onboarding.text_getting_started') %></span>
</div>
<div class="onboarding--video">
<iframe src="<%= OpenProject::Configuration.onboarding_video_url %>" height="282" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="onboarding--footer">
<em><label><%= I18n.t('onboarding.text_show_again') %></label></em>
<button class="button -highlight -large"
ng-click="close()"
title=<%= l(:label_next)%>> <%= l(:label_next)%>
</button>
<div class="onboarding--footer">
<em><label><%= I18n.t('onboarding.text_show_again') %></label></em>
<button class="button -highlight -large"
ng-click="close()"
title=<%= l(:label_next)%>> <%= l(:label_next)%>
</button>
</div>
</div>

@ -0,0 +1,3 @@
<div class="foundation-modal--container" ng-if="$ctrl.isShowing">
<ng-transclude></ng-transclude>
</div>

@ -0,0 +1,67 @@
// -- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2013 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// 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 General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
//
// See doc/COPYRIGHT.rdoc for more details.
// ++
export class FoundationModalContainerController {
protected showing:boolean;
protected activationSelector:string;
constructor(protected $element, protected $timeout) {
if (this.activationSelector) {
angular.element(this.activationSelector).click(() => {
$timeout(() => this.showing = true);
});
}
}
public get isShowing() {
return !!this.showing;
}
public hide() {
this.showing = false;
}
}
function foundationModalContainer() {
return {
restrict: 'E',
transclude: true,
scope: {
activationSelector: '@',
showing: '=?'
},
bindToController: true,
controller: FoundationModalContainerController,
controllerAs: '$ctrl',
templateUrl: '/components/common/modal/foundation-modal-container.directive.html'
};
}
angular
.module('openproject.uiComponents')
.directive('foundationModalContainer', foundationModalContainer);

@ -26,35 +26,37 @@
// See doc/COPYRIGHT.rdoc for more details.
// ++
function foundationModal($timeout, ModalFactory) {
var foundationModalController = function(scope, element) {
var modal = new ModalFactory({
template: element.find('.foundation-modal--template').html(),
import {FoundationModalContainerController} from "./foundation-modal-container.directive";
function foundationModal(ModalFactory) {
var foundationModalLink = function(scope,
element,
attr,
foundationModalContainer
) {
var modal;
modal = new ModalFactory({
template: element.html(),
class: scope.modalClass,
// Allows you to pass in properties to the scope of the modal
contentScope: {
close: function() {
close: function () {
foundationModalContainer.hide();
modal.deactivate();
}
}
});
if(scope.modalStartOnShow) {
modal.activate();
} else {
element.find('.foundation-modal--activate-link').click(function() {
modal.activate();
});
}
modal.activate();
};
return {
restrict: 'E',
restrict: 'A',
require: '^foundationModalContainer',
scope: {
modalClass: '@',
modalStartOnShow: '='
},
link: foundationModalController
link: foundationModalLink
};
}
Loading…
Cancel
Save