Skip to content

APP MANAGER v2 split pt 003 #13774

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
benrudolph merged 9 commits into from
Oct 31, 2016
Merged

APP MANAGER v2 split pt 003 #13774

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e3b6c74
added utils to build partial and template diffs
biyeun Oct 28, 2016
10c6714
add test for app manager v2 diffs of templates and partials
biyeun Oct 22, 2016
03a398a
duplicate v1 app builder base to v2
biyeun Oct 22, 2016
b679faa
add utilities to layout.js for app builder layout
biyeun Oct 22, 2016
2d086e9
update functionality of how preview opens and closes and is arranged …
biyeun Oct 22, 2016
f1097f0
update diffs
biyeun Oct 28, 2016
b975886
add workflow font from original prototype
biyeun Oct 22, 2016
058f683
new app manager styles
biyeun Oct 22, 2016
bd4239b
update diffs
biyeun Oct 31, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 40 additions & 13 deletions corehq/apps/app_manager/management/commands/build_app_manager_v2_diffs.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,16 @@

RELATIVE_YAML_V1 = '../../static/app_manager/json/v1'
RELATIVE_YAML_V2 = '../../static/app_manager/json/v2'

RELATIVE_DIFF_STORAGE_YAML = '../../tests/data/v2_diffs/yaml'

RELATIVE_TEMPLATE_V1 = '../../templates/app_manager/v1'
RELATIVE_TEMPLATE_V2 = '../../templates/app_manager/v2'
RELATIVE_DIFF_STORAGE_TEMPLATES = '../../tests/data/v2_diffs/templates'

RELATIVE_PARTIALS_V1 = '../../templates/app_manager/v1/partials'
RELATIVE_PARTIALS_V2 = '../../templates/app_manager/v2/partials'
RELATIVE_DIFF_STORAGE_PARTIALS = '../../tests/data/v2_diffs/partials'


def get_diff_filename(filename):
return "{}.diff.txt".format(filename)
Expand All @@ -33,19 +40,39 @@ class Command(BaseCommand):
'''

def handle(self, *args, **options):
base_dir = os.path.dirname(os.path.realpath(__file__))
self.base_dir = os.path.dirname(os.path.realpath(__file__))
self._make_diffs(
RELATIVE_YAML_V1,
RELATIVE_YAML_V2,
RELATIVE_DIFF_STORAGE_YAML,
"YAML"
)
self._make_diffs(
RELATIVE_TEMPLATE_V1,
RELATIVE_TEMPLATE_V2,
RELATIVE_DIFF_STORAGE_TEMPLATES,
"TEMPLATE"
)
self._make_diffs(
RELATIVE_PARTIALS_V1,
RELATIVE_PARTIALS_V2,
RELATIVE_DIFF_STORAGE_PARTIALS,
"PARTIAL"
)

yaml_v1_dir = os.path.join(base_dir, RELATIVE_YAML_V1)
yaml_v2_dir = os.path.join(base_dir, RELATIVE_YAML_V2)
yaml_diff_dir = os.path.join(base_dir, RELATIVE_DIFF_STORAGE_YAML)
def _make_diffs(self, rel_v1, rel_v2, rel_diff, type_name):
v1_dir = os.path.join(self.base_dir, rel_v1)
v2_dir = os.path.join(self.base_dir, rel_v2)
diff_dir = os.path.join(self.base_dir, rel_diff)

common_yaml = filecmp.dircmp(yaml_v1_dir, yaml_v2_dir).common_files
common = filecmp.dircmp(v1_dir, v2_dir).common_files

print("Computing YAML diffs...")
for yaml_file in common_yaml:
yaml_file_v1 = os.path.join(yaml_v1_dir, yaml_file)
yaml_file_v2 = os.path.join(yaml_v2_dir, yaml_file)
diff_file = os.path.join(yaml_diff_dir, get_diff_filename(yaml_file))
print(" >> Computing diff for {}".format(yaml_file))
print("Computing {} diffs...".format(type_name))
for tracked_file in common:
file_v1 = os.path.join(v1_dir, tracked_file)
file_v2 = os.path.join(v2_dir, tracked_file)
diff_file = os.path.join(diff_dir,
get_diff_filename(tracked_file))
print(" >> Computing diff for {}".format(tracked_file))
with open(diff_file, "w") as df:
df.writelines(get_diff(yaml_file_v1, yaml_file_v2))
df.writelines(get_diff(file_v1, file_v2))
140 changes: 86 additions & 54 deletions corehq/apps/app_manager/static/app_manager/js/preview_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,16 @@
hqDefine('app_manager/js/preview_app.js', function() {
'use strict';
var module = {};

var _private = {};

module.SELECTORS = {
BTN_TOGGLE_PREVIEW: '.js-preview-toggle',
PREVIEW_WINDOW: '#js-appmanager-preview',
APP_MANAGER_BODY: '#js-appmanager-body',
PREVIEW_ACTION_TEXT_SHOW: '.js-preview-action-show',
PREVIEW_ACTION_TEXT_HIDE: '.js-preview-action-hide',
};

module.EVENTS = {
RESIZE: 'previewApp.resize',
};
Expand All @@ -18,85 +27,108 @@ hqDefine('app_manager/js/preview_app.js', function() {
OPEN: 'isopen',
POSITION: 'position',
};

module.initPreviewWindow = function (
previewWindowSelector,
appManagerBodySelector,
previewToggleBtnSelector
) {

var $appPreview = $(previewWindowSelector);
var $appPreviewIframe = $(previewWindowSelector).find('iframe');
var $appBody = $(appManagerBodySelector);
var $togglePreviewBtn = $(previewToggleBtnSelector);

$appPreview.data(module.DATA.POSITION, module.POSITION.FIXED);
_private.showAppPreview = function() {
$(module.SELECTORS.PREVIEW_ACTION_TEXT_SHOW).addClass('hide');
$(module.SELECTORS.PREVIEW_ACTION_TEXT_HIDE).removeClass('hide');
};
_private.hideAppPreview = function() {
$(module.SELECTORS.PREVIEW_ACTION_TEXT_SHOW).removeClass('hide');
$(module.SELECTORS.PREVIEW_ACTION_TEXT_HIDE).addClass('hide');
};

var _toggleAppPreview = function () {
if (localStorage.getItem(module.DATA.OPEN) === module.DATA.OPEN) {
localStorage.removeItem(module.DATA.OPEN);
} else {
localStorage.setItem(module.DATA.OPEN, module.DATA.OPEN);
}
$(window).trigger(module.EVENTS.RESIZE);
if (localStorage.getItem(module.DATA.OPEN)) {
_showAppPreview();
} else {
_hideAppPreview();
}
};
_private.navigateBack = function() {
var previewWindow = $appPreviewIframe[0].contentWindow;
Copy link
Copy Markdown
Collaborator

@dimagimon dimagimon Oct 31, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'$appPreviewIframe' is not defined. (no-undef)

Copy link
Copy Markdown
Contributor

@benrudolph benrudolph Oct 31, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a real bug but will be fixed in a later PR (not critical feature that is behind preview flag)

previewWindow.postMessage({
action: 'back',
}, window.location.origin);
};

var _navigateBack = function() {
var previewWindow = $appPreviewIframe[0].contentWindow;
previewWindow.postMessage({
action: 'back',
}, window.location.origin);
};
_private.toggleAppPreview = function (e) {
e.preventDefault();
if (localStorage.getItem(module.DATA.OPEN) === module.DATA.OPEN) {
localStorage.removeItem(module.DATA.OPEN);
} else {
localStorage.setItem(module.DATA.OPEN, module.DATA.OPEN);
}
$(window).trigger(module.EVENTS.RESIZE);
if (localStorage.getItem(module.DATA.OPEN)) {
_private.showAppPreview();
} else {
_private.hideAppPreview();
}
};

var _showAppPreview = function() {
$('.preview-action-show').addClass('hide');
$('.preview-action-hide').removeClass('hide');
};
var _hideAppPreview = function() {
$('.preview-action-show').removeClass('hide');
$('.preview-action-hide').addClass('hide');
};
module.initPreviewWindow = function (layoutController) {

var $appPreview = $(module.SELECTORS.PREVIEW_WINDOW),
$appBody = $(module.SELECTORS.APP_MANAGER_BODY),
$togglePreviewBtn = $(module.SELECTORS.BTN_TOGGLE_PREVIEW),
$messages = $(layoutController.selector.messages);

$appPreview.data(module.DATA.POSITION, module.POSITION.FIXED);

if (localStorage.getItem(module.DATA.OPEN)) {
_showAppPreview();
_private.showAppPreview();
} else {
_hideAppPreview();
_private.hideAppPreview();
}

if ($togglePreviewBtn) {
$togglePreviewBtn.click(_toggleAppPreview);
}
$appPreview.find('.btn-preview-close').click(_toggleAppPreview);
$togglePreviewBtn.click(_private.toggleAppPreview);

var _resizeAppPreview = function () {
$appPreview.height($(window).outerHeight() + 'px');

if (localStorage.getItem(module.DATA.OPEN)) {
$appPreview.addClass('open');
$appBody.css('margin-right', $appPreview.outerWidth() + 50 + 'px');
if ($('#formdesigner').length === 0) $appBody.addClass('offset-for-preview');
$messages.addClass('offset-for-preview');
} else {
$appPreview.removeClass('open');
$appBody.css('margin-right', 0);
if ($('#formdesigner').length === 0) $appBody.removeClass('offset-for-preview');
$messages.removeClass('offset-for-preview');
}
var maxHeight = $appPreview.outerHeight() + 120;
if ($(window).height() < maxHeight
&& $appPreview.data(module.DATA.POSITION) === module.POSITION.FIXED) {

var $nav = $(layoutController.selector.navigation);

var maxHeight = $appPreview.find('.preview-phone-container').outerHeight() + $nav.outerHeight() + 80;
if (($(window).height() < maxHeight
&& $appPreview.data(module.DATA.POSITION) === module.POSITION.FIXED)
) {
$appPreview.data(module.DATA.POSITION, module.POSITION.ABSOLUTE);
$appPreview.addClass('small-height');
} else if ($(window).height() >= maxHeight
&& $appPreview.data(module.DATA.POSITION) === module.POSITION.ABSOLUTE) {
$appPreview.data(module.DATA.POSITION, module.POSITION.FIXED);
$appPreview.removeClass('small-height');
}

$(module.SELECTORS.BTN_TOGGLE_PREVIEW).fadeIn(500);

};
_resizeAppPreview();
$(window).resize(_resizeAppPreview);
$(window).on(module.EVENTS.RESIZE, _resizeAppPreview);
$(document).on('click', '.js-preview-back', _navigateBack);
layoutController.utils.setBalancePreviewFn(_resizeAppPreview);
$('.js-preview-back').click(_private.navigateBack);

};

module.prependToggleTo = function (selector, layout, attempts) {
attempts = attempts || 0;
if ($(selector).length) {
var $toggleParent = $(selector);
$toggleParent.prepend(layout);
$toggleParent.find(module.SELECTORS.BTN_TOGGLE_PREVIEW).click(_private.toggleAppPreview);
if (localStorage.getItem(module.DATA.OPEN)) {
_private.showAppPreview();
} else {
_private.hideAppPreview();
}
} else if (attempts <= 30) {
// give up appending element after waiting 30 seconds to load
setTimeout(function () {
module.prependToggleTo(selector, layout, attempts++);
}, 1000);
}
};

return module;
Expand Down
16 changes: 8 additions & 8 deletions corehq/apps/app_manager/templates/app_manager/v1/apps_base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,7 @@
});
{% if request|toggle_enabled:"PREVIEW_APP" %}
var previewApp = hqImport('app_manager/js/preview_app.js');
previewApp.initPreviewWindow(
'#js-appmanager-preview',
'#js-appmanager-body',
'#js-toggle-app-preview'
);
previewApp.initPreviewWindow(hqLayout);
{% endif %}
});
$(function () {
Expand All @@ -104,10 +100,14 @@
{% endif %}
{% endblock %}

{% block content %}
{{ block.super }}
{% if request|toggle_enabled:"PREVIEW_APP" %}
{% include 'app_manager/v1/partials/preview_app.html'%}
{% endif %}
{% endblock %}

{% block page_content %}
{% if request|toggle_enabled:"PREVIEW_APP" %}
{% include 'app_manager/v1/partials/preview_app.html'%}
{% endif %}
<div class="appmanager-loading-container">
<div class="appmanager-loading appmanager-loading-body">
<i class="fa fa-spin fa-spinner"></i>
Expand Down
6 changes: 3 additions & 3 deletions corehq/apps/app_manager/templates/app_manager/v1/managed_app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,10 @@

{% if request|toggle_enabled:"PREVIEW_APP" %}
<li>
<a id="js-toggle-app-preview">
<a class="js-preview-toggle">
<i class="fa fa-mobile-phone preview-icon"></i>
<span class="preview-action-show hide">{% trans "Show App Preview" %}</span>
<span class="preview-action-hide hide">{% trans "Hide App Preview" %}</span>
<span class="js-preview-action-show hide">{% trans "Show App Preview" %}</span>
<span class="js-preview-action-hide hide">{% trans "Hide App Preview" %}</span>
</a>
</li>
{% endif %}
Expand Down
29 changes: 15 additions & 14 deletions corehq/apps/app_manager/templates/app_manager/v1/partials/preview_app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
{% load hq_shared_tags %}

<div class="preview-phone-container"
id="js-appmanager-preview">
<iframe
class="preview-phone-window"
frameBorder="0"
scrolling="no"
src="{% url 'preview_app' request.domain app.get_id %}">
</iframe>
<button type="button" class="btn btn-default btn-preview-close">
<i class="fa fa-remove"></i>
</button>
<button type="button" class="btn btn-default btn-preview-back js-preview-back">
<i class="fa fa-arrow-left"></i>
</button>
<div id="js-appmanager-preview" class="preview-phone-wrapper">
<div class="preview-phone-container">
<button type="button" class="btn btn-default js-preview-toggle btn-preview-toggle">
<i class="fa fa-close"></i>
</button>
<iframe
class="preview-phone-window"
frameBorder="0"
scrolling="no"
src="{% url 'preview_app' request.domain app.get_id %}">
</iframe>
<button type="button" class="btn btn-default btn-preview-back js-preview-back">
<i class="fa fa-arrow-left"></i>
</button>
</div>
</div>
Loading