diff --git a/corehq/apps/app_manager/management/commands/build_app_manager_v2_diffs.py b/corehq/apps/app_manager/management/commands/build_app_manager_v2_diffs.py index c19f3d0c908f..d304d9955ea7 100644 --- a/corehq/apps/app_manager/management/commands/build_app_manager_v2_diffs.py +++ b/corehq/apps/app_manager/management/commands/build_app_manager_v2_diffs.py @@ -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) @@ -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)) diff --git a/corehq/apps/app_manager/static/app_manager/js/preview_app.js b/corehq/apps/app_manager/static/app_manager/js/preview_app.js index 65bae8aec443..533dc4d8c052 100644 --- a/corehq/apps/app_manager/static/app_manager/js/preview_app.js +++ b/corehq/apps/app_manager/static/app_manager/js/preview_app.js @@ -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', }; @@ -18,72 +27,74 @@ 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; + 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 @@ -91,12 +102,33 @@ hqDefine('app_manager/js/preview_app.js', function() { $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; diff --git a/corehq/apps/app_manager/templates/app_manager/v1/apps_base.html b/corehq/apps/app_manager/templates/app_manager/v1/apps_base.html index edd85a3dd1c7..e1c448d6a8bf 100644 --- a/corehq/apps/app_manager/templates/app_manager/v1/apps_base.html +++ b/corehq/apps/app_manager/templates/app_manager/v1/apps_base.html @@ -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 () { @@ -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 %}
diff --git a/corehq/apps/app_manager/templates/app_manager/v1/managed_app.html b/corehq/apps/app_manager/templates/app_manager/v1/managed_app.html index afd045e4301c..47e7e0f2d814 100644 --- a/corehq/apps/app_manager/templates/app_manager/v1/managed_app.html +++ b/corehq/apps/app_manager/templates/app_manager/v1/managed_app.html @@ -134,10 +134,10 @@ {% if request|toggle_enabled:"PREVIEW_APP" %}
  • - + - {% trans "Show App Preview" %} - {% trans "Hide App Preview" %} + {% trans "Show App Preview" %} + {% trans "Hide App Preview" %}
    • {% endif %} diff --git a/corehq/apps/app_manager/templates/app_manager/v1/partials/preview_app.html b/corehq/apps/app_manager/templates/app_manager/v1/partials/preview_app.html index 6df20367578d..15ffd74e6d3d 100644 --- a/corehq/apps/app_manager/templates/app_manager/v1/partials/preview_app.html +++ b/corehq/apps/app_manager/templates/app_manager/v1/partials/preview_app.html @@ -1,17 +1,18 @@ {% load hq_shared_tags %} -
    - - - +
    +
    + + + +
    diff --git a/corehq/apps/app_manager/templates/app_manager/v2/apps_base.html b/corehq/apps/app_manager/templates/app_manager/v2/apps_base.html new file mode 100644 index 000000000000..456ec50d4e61 --- /dev/null +++ b/corehq/apps/app_manager/templates/app_manager/v2/apps_base.html @@ -0,0 +1,172 @@ +{% extends 'style/base_section.html' %} +{% load xforms_extras %} +{% load url_extras %} +{% load hq_shared_tags %} +{% load timezone_tags %} +{% load i18n %} +{% load compress %} + +{% block title %}{% trans "Applications" %}{% endblock %} + +{% block stylesheets %}{{ block.super }} + {% compress css %} + {# Explicitly include these because app manager doesn't really do class-based views, can't use the decorators #} + + + + {% endcompress %} + + {% if less_debug %} + + + {% else %} + {% compress css %} + + + {% endcompress %} + {% endif %} + +{% endblock %} + +{% block js %}{{ block.super }} + + + + + + + + + + + + + + + + + + + + + + + +{% endblock %} + +{% block js-inline %}{{ block.super }} + +{% endblock %} + +{% block page_breadcrumbs %} + {% if not formdesigner %} +
      +
    • {% trans 'Applications' %}
      • + {% block breadcrumbs %}{% endblock %} +
    + {% endif %} +{% endblock %} + +{% block content %} + {{ block.super }} + {% include 'app_manager/v2/partials/preview_app.html'%} +{% endblock %} + +{% block page_content %} +
    +
    + +
    +
    +
    + {% if app %} + {% if error %} +
    + {% ifequal error 'app_exists' %} + {% trans "Oops! We can't create that application; you already have one with the same name." %} + {% endifequal %} +
    + {% endif %} + + {% block app-content %}{% endblock %} + + {% else %} +
    +

    + {% blocktrans %} + Welcome to the CommCare Application Builder. + Before you begin, check out the + Beginner Tutorial. + {% endblocktrans %} +

    +
    + {% include 'app_manager/v1/partials/new_app_buttons.html' %} +
    + {% endif %} +
    +{% endblock %} + +{% block column_style %}{% endblock %} + +{% block modals %} + {{ block.super }} + {% if app.is_deleted %} + + + {% endif %} +{% endblock modals %} diff --git a/corehq/apps/app_manager/templates/app_manager/v2/partials/preview_app.html b/corehq/apps/app_manager/templates/app_manager/v2/partials/preview_app.html new file mode 100644 index 000000000000..eec79647521f --- /dev/null +++ b/corehq/apps/app_manager/templates/app_manager/v2/partials/preview_app.html @@ -0,0 +1,19 @@ +{% load hq_shared_tags %} + +
    +
    + + +{# todo fix #} +{# #} +
    +
    diff --git a/corehq/apps/app_manager/tests/data/v2_diffs/partials/preview_app.html.diff.txt b/corehq/apps/app_manager/tests/data/v2_diffs/partials/preview_app.html.diff.txt new file mode 100644 index 000000000000..6c5daf0bc949 --- /dev/null +++ b/corehq/apps/app_manager/tests/data/v2_diffs/partials/preview_app.html.diff.txt @@ -0,0 +1,15 @@ +--- ++++ +@@ -11,8 +11,9 @@ + scrolling="no" + src="{% url 'preview_app' request.domain app.get_id %}"> + +- ++{# todo fix #} ++{# #} +
    +
    diff --git a/corehq/apps/app_manager/tests/data/v2_diffs/templates/apps_base.html.diff.txt b/corehq/apps/app_manager/tests/data/v2_diffs/templates/apps_base.html.diff.txt new file mode 100644 index 000000000000..1f10234ea218 --- /dev/null +++ b/corehq/apps/app_manager/tests/data/v2_diffs/templates/apps_base.html.diff.txt @@ -0,0 +1,45 @@ +--- ++++ +@@ -64,9 +64,11 @@ + + + +- {% if request|toggle_enabled:"PREVIEW_APP" %} ++ ++ + +- {% endif %} ++ ++ + {% endblock %} + + {% block js-inline %}{{ block.super }} +@@ -77,12 +79,12 @@ + keyboard: false, + show: true + }).on('hide.bs.modal', function () { +- window.location = "{% url "default_app" domain %}"; ++ window.location = "{% url "corehq.apps.app_manager.views.view_app" domain %}"; + }); +- {% if request|toggle_enabled:"PREVIEW_APP" %} +- var previewApp = hqImport('app_manager/js/preview_app.js'); +- previewApp.initPreviewWindow(hqLayout); +- {% endif %} ++ ++ var previewApp = hqImport('app_manager/js/preview_app.js'); ++ previewApp.initPreviewWindow(hqLayout); ++ + }); + $(function () { + $('.appmanager-content').fadeIn(); +@@ -102,9 +104,7 @@ + + {% block content %} + {{ block.super }} +- {% if request|toggle_enabled:"PREVIEW_APP" %} +- {% include 'app_manager/v1/partials/preview_app.html'%} +- {% endif %} ++ {% include 'app_manager/v2/partials/preview_app.html'%} + {% endblock %} + + {% block page_content %} diff --git a/corehq/apps/app_manager/tests/test_app_manager_v2_diffs.py b/corehq/apps/app_manager/tests/test_app_manager_v2_diffs.py index 3e5559f5c6a2..665021e84188 100644 --- a/corehq/apps/app_manager/tests/test_app_manager_v2_diffs.py +++ b/corehq/apps/app_manager/tests/test_app_manager_v2_diffs.py @@ -12,6 +12,14 @@ RELATIVE_YAML_V1 = '../static/app_manager/json/v1' RELATIVE_YAML_V2 = '../static/app_manager/json/v2' +RELATIVE_DIFF_STORAGE_TEMPLATES = 'data/v2_diffs/templates' +RELATIVE_TEMPLATES_V1 = '../templates/app_manager/v1' +RELATIVE_TEMPLATES_V2 = '../templates/app_manager/v2' + +RELATIVE_DIFF_STORAGE_PARTIALS = 'data/v2_diffs/partials' +RELATIVE_PARTIALS_V1 = '../templates/app_manager/v1/partials' +RELATIVE_PARTIALS_V2 = '../templates/app_manager/v2/partials' + CREATION_FAILURE_MSG = """ @@ -27,14 +35,14 @@ """ -DIFF_FAILURE_YAML = """ +DIFF_FAILURE_MSG = """ ************************************* APP MANAGER V2 Diff Failure -An edit made to a V1 App Manager YAML file "{}" does not match the stored diff +An edit made to a V1 App Manager file "{}" does not match the stored diff of its V2 counterpart. **Please make the edits to the V2 file so that it gets the changes from V1.** @@ -64,32 +72,38 @@ def setUp(self): self.yaml_v1_dir = os.path.join(base_dir, RELATIVE_YAML_V1) self.yaml_v2_dir = os.path.join(base_dir, RELATIVE_YAML_V2) self.yaml_diff_dir = os.path.join(base_dir, RELATIVE_DIFF_STORAGE_YAML) - - self.common_yaml = filecmp.dircmp(self.yaml_v1_dir, self.yaml_v2_dir).common_files - - def test_yaml_01_diffs_exist(self): - """ - Tests that diff files exists for the split V1/V2 YAML Files - """ - for yaml_file in self.common_yaml: + self.common_yaml = filecmp.dircmp( + self.yaml_v1_dir, self.yaml_v2_dir).common_files + + self.template_v1_dir = os.path.join(base_dir, RELATIVE_TEMPLATES_V1) + self.template_v2_dir = os.path.join(base_dir, RELATIVE_TEMPLATES_V2) + self.template_diff_dir = os.path.join(base_dir, RELATIVE_DIFF_STORAGE_TEMPLATES) + self.common_templates = filecmp.dircmp( + self.template_v1_dir, self.template_v2_dir).common_files + + self.partial_v1_dir = os.path.join(base_dir, RELATIVE_PARTIALS_V1) + self.partial_v2_dir = os.path.join(base_dir, RELATIVE_PARTIALS_V2) + self.partial_diff_dir = os.path.join(base_dir, RELATIVE_DIFF_STORAGE_PARTIALS) + self.common_partials = filecmp.dircmp( + self.partial_v1_dir, self.partial_v2_dir).common_files + + def _test_exist_util(self, common_files, diff_dir): + for test_file in common_files: self.assertTrue( os.path.exists(os.path.join( - self.yaml_diff_dir, - get_diff_filename(yaml_file) + diff_dir, + get_diff_filename(test_file) )), CREATION_FAILURE_MSG ) - def test_yaml_02_diffs_match(self): - """ - Tests that the diffs of the yaml files match what we have - """ - for yaml_file in self.common_yaml: + def _test_diffs_util(self, common_files, diff_dir, v1_dir, v2_dir): + for test_file in common_files: diff_filename = os.path.join( - self.yaml_diff_dir, - get_diff_filename(yaml_file) + diff_dir, + get_diff_filename(test_file) ) - filename_v1 = os.path.join(self.yaml_v1_dir, yaml_file) - filename_v2 = os.path.join(self.yaml_v2_dir, yaml_file) + filename_v1 = os.path.join(v1_dir, test_file) + filename_v2 = os.path.join(v2_dir, test_file) with open(diff_filename, 'r') as diff_file: existing_diff_lines = diff_file.readlines() @@ -97,7 +111,58 @@ def test_yaml_02_diffs_match(self): self.assertEqual( "".join(existing_diff_lines), "".join(current_diff), - DIFF_FAILURE_YAML.format( - yaml_file, filename_v1, filename_v2 + DIFF_FAILURE_MSG.format( + test_file, filename_v1, filename_v2 ) ) + + def test_yaml_01_diffs_exist(self): + """ + Tests that diff files exists for the split V1/V2 YAML Files + """ + self._test_exist_util(self.common_yaml, self.yaml_diff_dir) + + def test_yaml_02_diffs_match(self): + """ + Tests that the diffs of the yaml files match what we have + """ + self._test_diffs_util( + self.common_yaml, + self.yaml_diff_dir, + self.yaml_v1_dir, + self.yaml_v2_dir + ) + + def test_template_01_diffs_exist(self): + """ + Tests that diff files exists for the split V1/V2 TEMPLATE Files + """ + self._test_exist_util(self.common_templates, self.template_diff_dir) + + def test_template_02_diffs_match(self): + """ + Tests that the diffs of the template files match what we have + """ + self._test_diffs_util( + self.common_templates, + self.template_diff_dir, + self.template_v1_dir, + self.template_v2_dir + ) + + def test_partial_01_diffs_exist(self): + """ + Tests that diff files exists for the split V1/V2 TEMPLATE Files + """ + self._test_exist_util(self.common_templates, self.template_diff_dir) + + def test_partial_02_diffs_match(self): + """ + Tests that the diffs of the template files match what we have + """ + self._test_diffs_util( + self.common_partials, + self.partial_diff_dir, + self.partial_v1_dir, + self.partial_v2_dir + ) diff --git a/corehq/apps/style/static/app_manager/less/font-workflow.less b/corehq/apps/style/static/app_manager/less/font-workflow.less new file mode 100644 index 000000000000..0b2fa4b83c84 --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/font-workflow.less @@ -0,0 +1,4 @@ +@import "font-workflow/variables.less"; +@import "font-workflow/path.less"; +@import "font-workflow/core.less"; +@import "font-workflow/icons.less"; diff --git a/corehq/apps/style/static/app_manager/less/font-workflow/core.less b/corehq/apps/style/static/app_manager/less/font-workflow/core.less new file mode 100644 index 000000000000..edb1454e83c4 --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/font-workflow/core.less @@ -0,0 +1,9 @@ +.@{css-prefix} { + display: inline-block; + font-family: @font-family; + font-style: normal; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/corehq/apps/style/static/app_manager/less/font-workflow/icons.less b/corehq/apps/style/static/app_manager/less/font-workflow/icons.less new file mode 100644 index 000000000000..981bbc98562a --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/font-workflow/icons.less @@ -0,0 +1,16 @@ +.@{css-prefix}-workflow-a:before { content: @var-workflow-a; } +.@{css-prefix}-workflow-b:before { content: @var-workflow-b; } +.@{css-prefix}-workflow-c:before { content: @var-workflow-c; } + +.@{css-prefix}-update:before { content: @var-update; } +.@{css-prefix}-register:before { content: @var-register; } +.@{css-prefix}-complete:before { content: @var-complete; } + +.@{css-prefix}-arrownext:before { content: @var-arrownext; } + +.@{css-prefix}-recordlist-create:before { content: @var-recordlist-create; } +.@{css-prefix}-recordlist-update:before { content: @var-recordlist-update; } +.@{css-prefix}-recordlist-complete:before { content: @var-recordlist-complete; } + +.@{css-prefix}-recordlist-branch:before { content: @var-recordlist-branch; } +.@{css-prefix}-recordlist-branch-last:before { content: @var-recordlist-branch-last; } diff --git a/corehq/apps/style/static/app_manager/less/font-workflow/path.less b/corehq/apps/style/static/app_manager/less/font-workflow/path.less new file mode 100644 index 000000000000..eb0ccd278cfb --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/font-workflow/path.less @@ -0,0 +1,13 @@ +/* FONT PATH + * -------------------------- */ + +@font-face { + font-family: @font-family; + src: ~"url('@{font-path}/@{font-name}.eot?v=@{version}')"; + src: ~"url('@{font-path}/@{font-name}.eot?#iefix&v=@{version}') format('embedded-opentype')", + ~"url('@{font-path}/@{font-name}.woff?v=@{version}') format('woff')", + ~"url('@{font-path}/@{font-name}.ttf?v=@{version}') format('truetype')", + ~"url('@{font-path}/@{font-name}.svg?v=@{version}#@{font-family}') format('svg')"; + font-weight: normal; + font-style: normal; +} diff --git a/corehq/apps/style/static/app_manager/less/font-workflow/variables.less b/corehq/apps/style/static/app_manager/less/font-workflow/variables.less new file mode 100644 index 000000000000..db5e3bbfb1de --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/font-workflow/variables.less @@ -0,0 +1,21 @@ +@font-path: "/static/app_manager/less/font"; +@css-prefix: wf; +@inverse: #ffffff; +@font-family: 'WorkflowFontRegular'; +@font-name: 'workflowfont-regular'; +@version: '1.1'; + +@var-workflow-a: "\f000"; +@var-workflow-b: "\f001"; +@var-workflow-c: "\f002"; +@var-update: "\f003"; +@var-register: "\f004"; +@var-complete: "\f005"; +@var-arrownext: "\f006"; + +@var-recordlist-create: "\f007"; +@var-recordlist-update: "\f008"; +@var-recordlist-complete: "\f009"; + +@var-recordlist-branch: "\f00a"; +@var-recordlist-branch-last: "\f00b"; diff --git a/corehq/apps/style/static/app_manager/less/font/WorkflowFont-Regular.otf b/corehq/apps/style/static/app_manager/less/font/WorkflowFont-Regular.otf new file mode 100644 index 000000000000..8fa3b0979d3d Binary files /dev/null and b/corehq/apps/style/static/app_manager/less/font/WorkflowFont-Regular.otf differ diff --git a/corehq/apps/style/static/app_manager/less/font/WorkflowFont.glyphs b/corehq/apps/style/static/app_manager/less/font/WorkflowFont.glyphs new file mode 100644 index 000000000000..6185d14e4d9e --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/font/WorkflowFont.glyphs @@ -0,0 +1,1125 @@ +{ +DisplayStrings = ( +/recordlist.create, +/recordlist.update, +/recordlist.complete +); +copyright = "2016 Dimagi, Inc."; +customParameters = ( +{ +name = glyphOrder; +value = ( + ".notdef", + workflowA, + workflowB, + workflowC, + update, + register, + complete, + arrownext, + "recordlist.create", + "recordlist.update", + "recordlist.complete", + "recordlist.branch", + "recordlist.branch.last" +); +} +); +date = "2016-04-13 17:17:47 +0000"; +designer = "Biyeun Buczyk"; +designerURL = "http://biyeun.com"; +familyName = "WorkflowFont"; +fontMaster = ( +{ +ascender = 1755; +capHeight = 0; +customParameters = ( +{ +name = typoAscender; +value = 1755; +}, +{ +name = typoDescender; +value = "-293"; +}, +{ +name = typoLineGap; +value = 0; +}, +{ +name = underlinePosition; +value = "-260"; +}, +{ +name = underlineThickness; +value = 57; +} +); +descender = "-293"; +id = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +weightValue = 400; +widthValue = 5; +xHeight = 0; +} +); +glyphs = ( +{ +glyphname = .notdef; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +width = 685; +} +); +}, +{ +glyphname = workflowA; +lastChange = "2016-07-28 20:08:04 +0000"; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +paths = ( +{ +closed = 1; +nodes = ( +"1607 1107 LINE", +"1607 477 LINE SMOOTH", +"1607 317 OFFCURVE", +"1476 186 OFFCURVE", +"1316 186 CURVE SMOOTH", +"751 186 LINE", +"751 156 LINE SMOOTH", +"751 42 OFFCURVE", +"843 -50 OFFCURVE", +"956 -50 CURVE SMOOTH", +"1702 -50 LINE SMOOTH", +"1816 -50 OFFCURVE", +"1908 42 OFFCURVE", +"1908 156 CURVE SMOOTH", +"1908 902 LINE SMOOTH", +"1908 1015 OFFCURVE", +"1816 1107 OFFCURVE", +"1702 1107 CURVE SMOOTH" +); +}, +{ +closed = 1; +nodes = ( +"1157 685 OFFCURVE", +"1065 593 OFFCURVE", +"951 593 CURVE SMOOTH", +"206 593 LINE SMOOTH", +"92 593 OFFCURVE", +"0 685 OFFCURVE", +"0 799 CURVE SMOOTH", +"0 1545 LINE SMOOTH", +"0 1658 OFFCURVE", +"92 1750 OFFCURVE", +"206 1750 CURVE SMOOTH", +"951 1750 LINE SMOOTH", +"1065 1750 OFFCURVE", +"1157 1658 OFFCURVE", +"1157 1545 CURVE SMOOTH", +"1157 799 LINE SMOOTH" +); +}, +{ +closed = 1; +nodes = ( +"1243 1429 LINE", +"1243 799 LINE SMOOTH", +"1243 638 OFFCURVE", +"1112 507 OFFCURVE", +"951 507 CURVE SMOOTH", +"364 507 LINE", +"364 477 LINE SMOOTH", +"364 364 OFFCURVE", +"456 272 OFFCURVE", +"570 272 CURVE SMOOTH", +"1316 272 LINE SMOOTH", +"1429 272 OFFCURVE", +"1521 364 OFFCURVE", +"1521 477 CURVE SMOOTH", +"1521 1223 LINE SMOOTH", +"1521 1337 OFFCURVE", +"1429 1429 OFFCURVE", +"1316 1429 CURVE SMOOTH" +); +} +); +width = 1909; +} +); +unicode = F000; +}, +{ +glyphname = workflowB; +lastChange = "2016-07-28 20:07:52 +0000"; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +paths = ( +{ +closed = 1; +nodes = ( +"845 1062 OFFCURVE", +"976 1193 OFFCURVE", +"1137 1193 CURVE SMOOTH", +"1157 1193 LINE", +"1157 1545 LINE SMOOTH", +"1157 1658 OFFCURVE", +"1065 1750 OFFCURVE", +"952 1750 CURVE SMOOTH", +"206 1750 LINE SMOOTH", +"92 1750 OFFCURVE", +"0 1658 OFFCURVE", +"0 1545 CURVE SMOOTH", +"0 799 LINE SMOOTH", +"0 685 OFFCURVE", +"92 593 OFFCURVE", +"206 593 CURVE SMOOTH", +"845 593 LINE", +"845 902 LINE SMOOTH" +); +}, +{ +closed = 1; +nodes = ( +"658 898 OFFCURVE", +"640 880 OFFCURVE", +"618 880 CURVE SMOOTH", +"539 880 LINE SMOOTH", +"517 880 OFFCURVE", +"499 898 OFFCURVE", +"499 920 CURVE SMOOTH", +"499 1092 LINE", +"327 1092 LINE SMOOTH", +"305 1092 OFFCURVE", +"287 1110 OFFCURVE", +"287 1132 CURVE SMOOTH", +"287 1211 LINE SMOOTH", +"287 1233 OFFCURVE", +"305 1251 OFFCURVE", +"327 1251 CURVE SMOOTH", +"499 1251 LINE", +"499 1423 LINE SMOOTH", +"499 1445 OFFCURVE", +"517 1463 OFFCURVE", +"539 1463 CURVE SMOOTH", +"618 1463 LINE SMOOTH", +"640 1463 OFFCURVE", +"658 1445 OFFCURVE", +"658 1423 CURVE SMOOTH", +"658 1251 LINE", +"830 1251 LINE SMOOTH", +"852 1251 OFFCURVE", +"870 1233 OFFCURVE", +"870 1211 CURVE SMOOTH", +"870 1132 LINE SMOOTH", +"870 1110 OFFCURVE", +"852 1092 OFFCURVE", +"830 1092 CURVE SMOOTH", +"658 1092 LINE", +"658 920 LINE SMOOTH" +); +}, +{ +closed = 1; +nodes = ( +"2088 42 OFFCURVE", +"1996 -50 OFFCURVE", +"1882 -50 CURVE SMOOTH", +"1137 -50 LINE SMOOTH", +"1023 -50 OFFCURVE", +"931 42 OFFCURVE", +"931 156 CURVE SMOOTH", +"931 902 LINE SMOOTH", +"931 1015 OFFCURVE", +"1023 1107 OFFCURVE", +"1137 1107 CURVE SMOOTH", +"1882 1107 LINE SMOOTH", +"1996 1107 OFFCURVE", +"2088 1015 OFFCURVE", +"2088 902 CURVE SMOOTH", +"2088 156 LINE SMOOTH" +); +}, +{ +closed = 1; +nodes = ( +"1848 744 OFFCURVE", +"1696 896 OFFCURVE", +"1509 896 CURVE SMOOTH", +"1323 896 OFFCURVE", +"1171 744 OFFCURVE", +"1171 558 CURVE SMOOTH", +"1171 522 OFFCURVE", +"1200 493 OFFCURVE", +"1235 493 CURVE SMOOTH", +"1271 493 OFFCURVE", +"1299 522 OFFCURVE", +"1299 558 CURVE SMOOTH", +"1299 673 OFFCURVE", +"1394 768 OFFCURVE", +"1509 768 CURVE SMOOTH", +"1625 768 OFFCURVE", +"1719 673 OFFCURVE", +"1719 558 CURVE SMOOTH", +"1719 479 OFFCURVE", +"1676 410 OFFCURVE", +"1609 374 CURVE", +"1604 443 LINE", +"1371 284 LINE", +"1625 162 LINE", +"1620 238 LINE", +"1755 284 OFFCURVE", +"1848 411 OFFCURVE", +"1848 558 CURVE SMOOTH" +); +} +); +width = 2089; +} +); +unicode = F001; +}, +{ +glyphname = workflowC; +lastChange = "2016-07-28 20:39:58 +0000"; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +paths = ( +{ +closed = 1; +nodes = ( +"760 1309 OFFCURVE", +"797 1386 OFFCURVE", +"857 1440 CURVE", +"857 1598 LINE SMOOTH", +"857 1682 OFFCURVE", +"789 1750 OFFCURVE", +"705 1750 CURVE SMOOTH", +"152 1750 LINE SMOOTH", +"68 1750 OFFCURVE", +"0 1682 OFFCURVE", +"0 1598 CURVE SMOOTH", +"0 1045 LINE SMOOTH", +"0 961 OFFCURVE", +"68 893 OFFCURVE", +"152 893 CURVE SMOOTH", +"705 893 LINE SMOOTH", +"724 893 OFFCURVE", +"743 897 OFFCURVE", +"760 904 CURVE", +"760 1223 LINE SMOOTH" +); +}, +{ +closed = 1; +nodes = ( +"644 1276 OFFCURVE", +"631 1263 OFFCURVE", +"615 1263 CURVE SMOOTH", +"487 1263 LINE", +"487 1135 LINE SMOOTH", +"487 1119 OFFCURVE", +"474 1106 OFFCURVE", +"458 1106 CURVE SMOOTH", +"399 1106 LINE SMOOTH", +"383 1106 OFFCURVE", +"369 1119 OFFCURVE", +"369 1135 CURVE SMOOTH", +"369 1263 LINE", +"242 1263 LINE SMOOTH", +"226 1263 OFFCURVE", +"213 1276 OFFCURVE", +"213 1292 CURVE SMOOTH", +"213 1351 LINE SMOOTH", +"213 1367 OFFCURVE", +"226 1381 OFFCURVE", +"242 1381 CURVE SMOOTH", +"369 1381 LINE", +"369 1508 LINE SMOOTH", +"369 1524 OFFCURVE", +"383 1538 OFFCURVE", +"399 1538 CURVE SMOOTH", +"458 1538 LINE SMOOTH", +"474 1538 OFFCURVE", +"487 1524 OFFCURVE", +"487 1508 CURVE SMOOTH", +"487 1381 LINE", +"615 1381 LINE SMOOTH", +"631 1381 OFFCURVE", +"644 1367 OFFCURVE", +"644 1351 CURVE SMOOTH", +"644 1292 LINE SMOOTH" +); +}, +{ +closed = 1; +nodes = ( +"2003 364 OFFCURVE", +"1911 272 OFFCURVE", +"1797 272 CURVE SMOOTH", +"1051 272 LINE SMOOTH", +"938 272 OFFCURVE", +"846 364 OFFCURVE", +"846 477 CURVE SMOOTH", +"846 1223 LINE SMOOTH", +"846 1337 OFFCURVE", +"938 1429 OFFCURVE", +"1051 1429 CURVE SMOOTH", +"1797 1429 LINE SMOOTH", +"1911 1429 OFFCURVE", +"2003 1337 OFFCURVE", +"2003 1223 CURVE SMOOTH", +"2003 477 LINE SMOOTH" +); +}, +{ +closed = 1; +nodes = ( +"1763 1066 OFFCURVE", +"1611 1218 OFFCURVE", +"1424 1218 CURVE SMOOTH", +"1237 1218 OFFCURVE", +"1086 1066 OFFCURVE", +"1086 879 CURVE SMOOTH", +"1086 843 OFFCURVE", +"1114 815 OFFCURVE", +"1150 815 CURVE SMOOTH", +"1185 815 OFFCURVE", +"1214 843 OFFCURVE", +"1214 879 CURVE SMOOTH", +"1214 995 OFFCURVE", +"1308 1089 OFFCURVE", +"1424 1089 CURVE SMOOTH", +"1540 1089 OFFCURVE", +"1634 995 OFFCURVE", +"1634 879 CURVE SMOOTH", +"1634 800 OFFCURVE", +"1590 731 OFFCURVE", +"1524 695 CURVE", +"1519 764 LINE", +"1286 605 LINE", +"1540 483 LINE", +"1534 559 LINE", +"1670 606 OFFCURVE", +"1763 733 OFFCURVE", +"1763 879 CURVE SMOOTH" +); +}, +{ +closed = 1; +nodes = ( +"857 103 LINE SMOOTH", +"857 18 OFFCURVE", +"789 -50 OFFCURVE", +"705 -50 CURVE SMOOTH", +"152 -50 LINE SMOOTH", +"68 -50 OFFCURVE", +"0 18 OFFCURVE", +"0 103 CURVE SMOOTH", +"0 655 LINE SMOOTH", +"0 739 OFFCURVE", +"68 807 OFFCURVE", +"152 807 CURVE SMOOTH", +"705 807 LINE SMOOTH", +"724 807 OFFCURVE", +"743 803 OFFCURVE", +"760 797 CURVE", +"760 477 LINE SMOOTH", +"760 391 OFFCURVE", +"797 314 OFFCURVE", +"857 261 CURVE" +); +}, +{ +closed = 1; +nodes = ( +"685 496 OFFCURVE", +"682 504 OFFCURVE", +"676 509 CURVE SMOOTH", +"635 551 LINE SMOOTH", +"630 556 OFFCURVE", +"622 559 OFFCURVE", +"615 559 CURVE SMOOTH", +"607 559 OFFCURVE", +"599 556 OFFCURVE", +"594 551 CURVE SMOOTH", +"395 351 LINE", +"306 441 LINE SMOOTH", +"300 446 OFFCURVE", +"293 449 OFFCURVE", +"285 449 CURVE SMOOTH", +"277 449 OFFCURVE", +"270 446 OFFCURVE", +"264 441 CURVE SMOOTH", +"223 399 LINE SMOOTH", +"218 394 OFFCURVE", +"215 386 OFFCURVE", +"215 379 CURVE SMOOTH", +"215 371 OFFCURVE", +"218 364 OFFCURVE", +"223 358 CURVE SMOOTH", +"333 248 LINE", +"374 207 LINE SMOOTH", +"380 202 OFFCURVE", +"387 199 OFFCURVE", +"395 199 CURVE SMOOTH", +"402 199 OFFCURVE", +"410 202 OFFCURVE", +"415 207 CURVE SMOOTH", +"457 248 LINE", +"676 468 LINE SMOOTH", +"682 474 OFFCURVE", +"685 481 OFFCURVE", +"685 489 CURVE SMOOTH" +); +} +); +width = 2004; +} +); +unicode = F002; +}, +{ +glyphname = update; +lastChange = "2016-07-28 20:39:52 +0000"; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +paths = ( +{ +closed = 1; +nodes = ( +"1659 1397 OFFCURVE", +"1287 1770 OFFCURVE", +"830 1770 CURVE SMOOTH", +"372 1770 OFFCURVE", +"0 1397 OFFCURVE", +"0 940 CURVE SMOOTH", +"0 853 OFFCURVE", +"71 782 OFFCURVE", +"158 782 CURVE SMOOTH", +"245 782 OFFCURVE", +"315 853 OFFCURVE", +"315 940 CURVE SMOOTH", +"315 1224 OFFCURVE", +"546 1455 OFFCURVE", +"830 1455 CURVE SMOOTH", +"1113 1455 OFFCURVE", +"1344 1224 OFFCURVE", +"1344 940 CURVE SMOOTH", +"1344 747 OFFCURVE", +"1237 577 OFFCURVE", +"1074 489 CURVE", +"1061 659 LINE", +"491 268 LINE", +"1114 -30 LINE", +"1100 156 LINE", +"1433 270 OFFCURVE", +"1659 582 OFFCURVE", +"1659 940 CURVE SMOOTH" +); +} +); +width = 1660; +} +); +unicode = F003; +}, +{ +glyphname = register; +lastChange = "2016-07-28 20:40:51 +0000"; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +paths = ( +{ +closed = 1; +nodes = ( +"1013 122 OFFCURVE", +"965 74 OFFCURVE", +"905 74 CURVE SMOOTH", +"688 74 LINE SMOOTH", +"628 74 OFFCURVE", +"579 122 OFFCURVE", +"579 182 CURVE SMOOTH", +"579 653 LINE", +"109 653 LINE SMOOTH", +"49 653 OFFCURVE", +"0 701 OFFCURVE", +"0 761 CURVE SMOOTH", +"0 978 LINE SMOOTH", +"0 1038 OFFCURVE", +"49 1087 OFFCURVE", +"109 1087 CURVE SMOOTH", +"579 1087 LINE", +"579 1557 LINE SMOOTH", +"579 1617 OFFCURVE", +"628 1666 OFFCURVE", +"688 1666 CURVE SMOOTH", +"905 1666 LINE SMOOTH", +"965 1666 OFFCURVE", +"1013 1617 OFFCURVE", +"1013 1557 CURVE SMOOTH", +"1013 1087 LINE", +"1484 1087 LINE SMOOTH", +"1543 1087 OFFCURVE", +"1592 1038 OFFCURVE", +"1592 978 CURVE SMOOTH", +"1592 761 LINE SMOOTH", +"1592 701 OFFCURVE", +"1543 653 OFFCURVE", +"1484 653 CURVE SMOOTH", +"1013 653 LINE", +"1013 182 LINE SMOOTH" +); +} +); +width = 1593; +} +); +unicode = F004; +}, +{ +glyphname = complete; +lastChange = "2016-07-29 19:10:09 +0000"; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +paths = ( +{ +closed = 1; +nodes = ( +"1677 1288 OFFCURVE", +"1666 1315 OFFCURVE", +"1646 1334 CURVE SMOOTH", +"1499 1481 LINE SMOOTH", +"1480 1501 OFFCURVE", +"1453 1512 OFFCURVE", +"1426 1512 CURVE SMOOTH", +"1399 1512 OFFCURVE", +"1372 1501 OFFCURVE", +"1352 1481 CURVE SMOOTH", +"642 771 LINE", +"325 1090 LINE SMOOTH", +"305 1109 OFFCURVE", +"278 1120 OFFCURVE", +"251 1120 CURVE SMOOTH", +"224 1120 OFFCURVE", +"197 1109 OFFCURVE", +"177 1090 CURVE SMOOTH", +"30 943 LINE SMOOTH", +"11 923 OFFCURVE", +"0 896 OFFCURVE", +"0 869 CURVE SMOOTH", +"0 842 OFFCURVE", +"11 815 OFFCURVE", +"30 796 CURVE SMOOTH", +"422 404 LINE", +"569 257 LINE SMOOTH", +"588 237 OFFCURVE", +"615 227 OFFCURVE", +"642 227 CURVE SMOOTH", +"669 227 OFFCURVE", +"696 237 OFFCURVE", +"716 257 CURVE SMOOTH", +"863 404 LINE", +"1646 1187 LINE SMOOTH", +"1666 1207 OFFCURVE", +"1677 1234 OFFCURVE", +"1677 1261 CURVE SMOOTH" +); +} +); +width = 1678; +} +); +unicode = F005; +}, +{ +glyphname = arrownext; +lastChange = "2016-08-04 21:34:00 +0000"; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +paths = ( +{ +closed = 1; +nodes = ( +"369 1549 LINE", +"369 1222 LINE", +"0 1222 LINE", +"0 565 LINE", +"369 565 LINE", +"369 239 LINE", +"1504 894 LINE" +); +} +); +width = 1505; +} +); +unicode = F006; +}, +{ +glyphname = recordlist.create; +lastChange = "2016-08-04 21:33:43 +0000"; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +paths = ( +{ +closed = 1; +nodes = ( +"771 137 OFFCURVE", +"753 118 OFFCURVE", +"731 118 CURVE SMOOTH", +"649 118 LINE SMOOTH", +"627 118 OFFCURVE", +"608 137 OFFCURVE", +"608 159 CURVE SMOOTH", +"608 336 LINE", +"432 336 LINE SMOOTH", +"409 336 OFFCURVE", +"391 354 OFFCURVE", +"391 376 CURVE SMOOTH", +"391 458 LINE SMOOTH", +"391 480 OFFCURVE", +"409 499 OFFCURVE", +"432 499 CURVE SMOOTH", +"608 499 LINE", +"608 675 LINE SMOOTH", +"608 698 OFFCURVE", +"627 716 OFFCURVE", +"649 716 CURVE SMOOTH", +"731 716 LINE SMOOTH", +"753 716 OFFCURVE", +"771 698 OFFCURVE", +"771 675 CURVE SMOOTH", +"771 499 LINE", +"948 499 LINE SMOOTH", +"970 499 OFFCURVE", +"988 480 OFFCURVE", +"988 458 CURVE SMOOTH", +"988 376 LINE SMOOTH", +"988 354 OFFCURVE", +"970 336 OFFCURVE", +"948 336 CURVE SMOOTH", +"771 336 LINE", +"771 159 LINE SMOOTH" +); +}, +{ +closed = 1; +nodes = ( +"1408 -128 LINE", +"128 -128 LINE", +"128 1408 LINE", +"896 1408 LINE", +"896 992 LINE SMOOTH", +"896 939 OFFCURVE", +"939 896 OFFCURVE", +"992 896 CURVE SMOOTH", +"1408 896 LINE" +); +}, +{ +closed = 1; +nodes = ( +"1024 1400 LINE", +"1041 1394 OFFCURVE", +"1058 1385 OFFCURVE", +"1065 1378 CURVE SMOOTH", +"1378 1065 LINE SMOOTH", +"1385 1058 OFFCURVE", +"1394 1041 OFFCURVE", +"1400 1024 CURVE", +"1024 1024 LINE" +); +}, +{ +closed = 1; +nodes = ( +"1156 1468 LINE SMOOTH", +"1119 1505 OFFCURVE", +"1045 1536 OFFCURVE", +"992 1536 CURVE SMOOTH", +"96 1536 LINE SMOOTH", +"43 1536 OFFCURVE", +"0 1493 OFFCURVE", +"0 1440 CURVE SMOOTH", +"0 -160 LINE SMOOTH", +"0 -213 OFFCURVE", +"43 -256 OFFCURVE", +"96 -256 CURVE SMOOTH", +"1440 -256 LINE SMOOTH", +"1493 -256 OFFCURVE", +"1536 -213 OFFCURVE", +"1536 -160 CURVE SMOOTH", +"1536 992 LINE SMOOTH", +"1536 1045 OFFCURVE", +"1505 1119 OFFCURVE", +"1468 1156 CURVE SMOOTH" +); +} +); +width = 1536; +} +); +unicode = F007; +}, +{ +glyphname = recordlist.update; +lastChange = "2016-08-04 21:33:25 +0000"; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +paths = ( +{ +closed = 1; +nodes = ( +"733 958 OFFCURVE", +"730 957 OFFCURVE", +"728 955 CURVE SMOOTH", +"438 732 LINE", +"435 730 OFFCURVE", +"433 726 OFFCURVE", +"433 723 CURVE SMOOTH", +"433 719 OFFCURVE", +"435 716 OFFCURVE", +"438 714 CURVE", +"728 490 LINE SMOOTH", +"730 489 OFFCURVE", +"733 488 OFFCURVE", +"735 488 CURVE SMOOTH", +"738 488 OFFCURVE", +"740 489 OFFCURVE", +"742 490 CURVE SMOOTH", +"747 493 OFFCURVE", +"748 499 OFFCURVE", +"746 504 CURVE SMOOTH", +"692 642 LINE", +"818 642 LINE SMOOTH", +"912 642 OFFCURVE", +"988 566 OFFCURVE", +"988 472 CURVE SMOOTH", +"988 431 LINE SMOOTH", +"988 337 OFFCURVE", +"912 260 OFFCURVE", +"818 260 CURVE SMOOTH", +"372 260 LINE", +"372 115 LINE", +"818 115 LINE SMOOTH", +"992 115 OFFCURVE", +"1134 257 OFFCURVE", +"1134 431 CURVE SMOOTH", +"1134 472 LINE SMOOTH", +"1134 646 OFFCURVE", +"992 788 OFFCURVE", +"818 788 CURVE SMOOTH", +"696 788 LINE", +"696 788 LINE", +"693 788 OFFCURVE", +"691 788 OFFCURVE", +"688 788 CURVE", +"688 794 LINE", +"746 942 LINE SMOOTH", +"748 947 OFFCURVE", +"747 952 OFFCURVE", +"742 955 CURVE SMOOTH", +"740 957 OFFCURVE", +"738 958 OFFCURVE", +"735 958 CURVE SMOOTH" +); +}, +{ +closed = 1; +nodes = ( +"1024 1400 LINE", +"1041 1394 OFFCURVE", +"1058 1385 OFFCURVE", +"1065 1378 CURVE SMOOTH", +"1378 1065 LINE SMOOTH", +"1385 1058 OFFCURVE", +"1394 1041 OFFCURVE", +"1400 1024 CURVE", +"1024 1024 LINE" +); +}, +{ +closed = 1; +nodes = ( +"128 1408 LINE", +"896 1408 LINE", +"896 992 LINE SMOOTH", +"896 939 OFFCURVE", +"939 896 OFFCURVE", +"992 896 CURVE SMOOTH", +"1408 896 LINE", +"1408 -128 LINE", +"128 -128 LINE" +); +}, +{ +closed = 1; +nodes = ( +"96 1536 LINE SMOOTH", +"43 1536 OFFCURVE", +"0 1493 OFFCURVE", +"0 1440 CURVE SMOOTH", +"0 -160 LINE SMOOTH", +"0 -213 OFFCURVE", +"43 -256 OFFCURVE", +"96 -256 CURVE SMOOTH", +"1440 -256 LINE SMOOTH", +"1493 -256 OFFCURVE", +"1536 -213 OFFCURVE", +"1536 -160 CURVE SMOOTH", +"1536 992 LINE SMOOTH", +"1536 1045 OFFCURVE", +"1505 1119 OFFCURVE", +"1468 1156 CURVE SMOOTH", +"1156 1468 LINE SMOOTH", +"1119 1505 OFFCURVE", +"1045 1536 OFFCURVE", +"992 1536 CURVE SMOOTH" +); +} +); +width = 1536; +} +); +unicode = F008; +}, +{ +glyphname = recordlist.complete; +lastChange = "2016-08-04 21:42:36 +0000"; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +paths = ( +{ +closed = 1; +nodes = ( +"1024 1400 LINE", +"1041 1394 OFFCURVE", +"1058 1385 OFFCURVE", +"1065 1378 CURVE SMOOTH", +"1378 1065 LINE SMOOTH", +"1385 1058 OFFCURVE", +"1394 1041 OFFCURVE", +"1400 1024 CURVE", +"1024 1024 LINE" +); +}, +{ +closed = 1; +nodes = ( +"128 1408 LINE", +"896 1408 LINE", +"896 992 LINE SMOOTH", +"896 939 OFFCURVE", +"939 896 OFFCURVE", +"992 896 CURVE SMOOTH", +"1408 896 LINE", +"1408 -128 LINE", +"128 -128 LINE" +); +}, +{ +closed = 1; +nodes = ( +"96 1536 LINE SMOOTH", +"43 1536 OFFCURVE", +"0 1493 OFFCURVE", +"0 1440 CURVE SMOOTH", +"0 -160 LINE SMOOTH", +"0 -213 OFFCURVE", +"43 -256 OFFCURVE", +"96 -256 CURVE SMOOTH", +"1440 -256 LINE SMOOTH", +"1493 -256 OFFCURVE", +"1536 -213 OFFCURVE", +"1536 -160 CURVE SMOOTH", +"1536 992 LINE SMOOTH", +"1536 1045 OFFCURVE", +"1505 1119 OFFCURVE", +"1468 1156 CURVE SMOOTH", +"1156 1468 LINE SMOOTH", +"1119 1505 OFFCURVE", +"1045 1536 OFFCURVE", +"992 1536 CURVE SMOOTH" +); +}, +{ +closed = 1; +nodes = ( +"886 579 OFFCURVE", +"876 575 OFFCURVE", +"869 568 CURVE SMOOTH", +"609 308 LINE", +"493 425 LINE SMOOTH", +"485 432 OFFCURVE", +"475 436 OFFCURVE", +"466 436 CURVE SMOOTH", +"456 436 OFFCURVE", +"446 432 OFFCURVE", +"439 425 CURVE SMOOTH", +"385 371 LINE SMOOTH", +"378 364 OFFCURVE", +"374 354 OFFCURVE", +"374 344 CURVE SMOOTH", +"374 334 OFFCURVE", +"378 324 OFFCURVE", +"385 317 CURVE SMOOTH", +"528 174 LINE", +"582 120 LINE SMOOTH", +"589 113 OFFCURVE", +"599 109 OFFCURVE", +"609 109 CURVE SMOOTH", +"619 109 OFFCURVE", +"629 113 OFFCURVE", +"636 120 CURVE SMOOTH", +"690 174 LINE", +"977 461 LINE SMOOTH", +"984 468 OFFCURVE", +"988 478 OFFCURVE", +"988 487 CURVE SMOOTH", +"988 497 OFFCURVE", +"984 507 OFFCURVE", +"977 514 CURVE SMOOTH", +"923 568 LINE SMOOTH", +"915 575 OFFCURVE", +"906 579 OFFCURVE", +"896 579 CURVE SMOOTH" +); +} +); +width = 1536; +} +); +unicode = F009; +}, +{ +glyphname = recordlist.branch; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +paths = ( +{ +closed = 1; +nodes = ( +"631 1754 LINE", +"631 -274 LINE", +"676 -274 LINE", +"676 718 LINE", +"905 718 LINE", +"905 763 LINE", +"676 763 LINE", +"676 1754 LINE" +); +} +); +width = 1536; +} +); +unicode = F00A; +}, +{ +glyphname = recordlist.branch.last; +lastChange = "2016-08-04 21:42:26 +0000"; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +paths = ( +{ +closed = 1; +nodes = ( +"631 1754 LINE", +"631 717 LINE", +"905 717 LINE", +"905 762 LINE", +"676 762 LINE", +"676 1754 LINE" +); +} +); +width = 1536; +} +); +unicode = F00B; +}, +{ +glyphname = space; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +width = 685; +} +); +unicode = 0020; +}, +{ +glyphname = uni000D; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +width = 682; +} +); +unicode = 000D; +}, +{ +glyphname = uni25FC; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +width = 500; +} +); +unicode = 25FC; +}, +{ +glyphname = uni0000; +layers = ( +{ +layerId = "6B53F3CE-311E-489D-9016-0E55B00B5C5C"; +name = Regular; +width = 0; +} +); +unicode = 0000; +} +); +disablesNiceNames = 1; +instances = ( +{ +name = Regular; +} +); +manufacturer = "Dimagi, Inc."; +manufacturerURL = "http://dimagi.com/"; +unitsPerEm = 2048; +versionMajor = 1; +versionMinor = 0; +} diff --git a/corehq/apps/style/static/app_manager/less/font/workflowfont-regular.eot b/corehq/apps/style/static/app_manager/less/font/workflowfont-regular.eot new file mode 100644 index 000000000000..7bfce2ddb129 Binary files /dev/null and b/corehq/apps/style/static/app_manager/less/font/workflowfont-regular.eot differ diff --git a/corehq/apps/style/static/app_manager/less/font/workflowfont-regular.svg b/corehq/apps/style/static/app_manager/less/font/workflowfont-regular.svg new file mode 100644 index 000000000000..07490a67819d --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/font/workflowfont-regular.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/corehq/apps/style/static/app_manager/less/font/workflowfont-regular.ttf b/corehq/apps/style/static/app_manager/less/font/workflowfont-regular.ttf new file mode 100644 index 000000000000..f8882d413ca6 Binary files /dev/null and b/corehq/apps/style/static/app_manager/less/font/workflowfont-regular.ttf differ diff --git a/corehq/apps/style/static/app_manager/less/font/workflowfont-regular.woff b/corehq/apps/style/static/app_manager/less/font/workflowfont-regular.woff new file mode 100644 index 000000000000..f6177f283aed Binary files /dev/null and b/corehq/apps/style/static/app_manager/less/font/workflowfont-regular.woff differ diff --git a/corehq/apps/style/static/app_manager/less/new_appmanager-main.less b/corehq/apps/style/static/app_manager/less/new_appmanager-main.less new file mode 100644 index 000000000000..14d12921a8ca --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/new_appmanager-main.less @@ -0,0 +1,13 @@ +@import '../../style/less/_hq/includes/variables.less'; +@import '../../style/less/_hq/includes/mixins.less'; + +/* This file is included only by apps_base.html */ + +@import "new_appmanager/variables"; +@import "new_appmanager/corehq_overrides"; +@import "new_appmanager/navigation"; +@import "new_appmanager/form_editing"; +@import "new_appmanager/deploy"; +@import "new_appmanager/content"; +@import "new_appmanager/popover"; + diff --git a/corehq/apps/style/static/app_manager/less/new_appmanager.debug.less b/corehq/apps/style/static/app_manager/less/new_appmanager.debug.less new file mode 100644 index 000000000000..f56a1e818a14 --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/new_appmanager.debug.less @@ -0,0 +1,4 @@ +@b3-import-variables: '/static/bootstrap/less/variables'; +@b3-import-mixins: '/static/bootstrap/less/mixins'; + +@import "new_appmanager-main"; diff --git a/corehq/apps/style/static/app_manager/less/new_appmanager.less b/corehq/apps/style/static/app_manager/less/new_appmanager.less new file mode 100644 index 000000000000..a4c4e9a326f4 --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/new_appmanager.less @@ -0,0 +1,4 @@ +@b3-import-variables: '../../../../../../../../bower_components/bootstrap/less/variables'; +@b3-import-mixins: '../../../../../../../../bower_components/bootstrap/less/mixins'; + +@import "new_appmanager-main"; diff --git a/corehq/apps/style/static/app_manager/less/new_appmanager/content.less b/corehq/apps/style/static/app_manager/less/new_appmanager/content.less new file mode 100644 index 000000000000..1367b93c54ff --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/new_appmanager/content.less @@ -0,0 +1,41 @@ +.appmanager-main-container { + display: block; + margin-left: @app-manager-sidebar-width; + background-color: white; + position:relative; + z-index:2; + padding: 10px 20px; + box-sizing: border-box; + + .transition(all 1s); + .box-shadow(0 0 20px 0 rgba(0, 0, 0, .20)); + + &.formdesigner-content-wrapper { + padding: 0; + } +} + +.appmanager-content { + display: none; + position: relative; +} + +.appmanager-loading-container { + position: relative; +} + +.appmanager-loading { + display: block; + position: absolute; + font-size: 4rem; + width: 100px; + height: 100px; + left: 50%; + color: fadeOut(@cc-text, 40); + margin-left: -50px; +} + +.appmanager-loading-nav { + top: 30px; +} + diff --git a/corehq/apps/style/static/app_manager/less/new_appmanager/corehq_overrides.less b/corehq/apps/style/static/app_manager/less/new_appmanager/corehq_overrides.less new file mode 100644 index 000000000000..f3904f1fda5e --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/new_appmanager/corehq_overrides.less @@ -0,0 +1,8 @@ +body { + background-color: @cc-bg; +} + +.messages-container { + background-color: @cc-brand-mid; + min-height: 5px; +} diff --git a/corehq/apps/style/static/app_manager/less/new_appmanager/deploy.less b/corehq/apps/style/static/app_manager/less/new_appmanager/deploy.less new file mode 100644 index 000000000000..66835889f82c --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/new_appmanager/deploy.less @@ -0,0 +1,40 @@ +// Deploy page +#releases-table { + .build { + &:hover { + color: black !important; + + .edit-comment-pencil { + display: inline; + } + } + + &.build-unreleased { + color: #888; + } + + &.build-latest-release { + background-color: #EFEFFF; + + .build-is-released::after{ + content: "Latest"; + } + } + + .edit-comment-pencil { + display: none; + margin-left: 5px; + position: absolute; + } + } + + .pending img { + width: 20px; + height: 20px; + } + + .released { + color: #ffff00; + text-shadow: 1px 0px #ffa500, -1px 0px #ffa500, 0px 1px #ffa500, 0px -1px #ffa500; + } +} diff --git a/corehq/apps/style/static/app_manager/less/new_appmanager/form_editing.less b/corehq/apps/style/static/app_manager/less/new_appmanager/form_editing.less new file mode 100644 index 000000000000..dd935087559b --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/new_appmanager/form_editing.less @@ -0,0 +1,52 @@ +// Poor man's markdown for in-app comments +.app-comment { + white-space: pre-wrap; +} + +/* has to be more specific than the existing rule */ +#xform-source .syntaxhighlighter { + overflow: visible !important; +} + +.config { + position: relative; +} + +#xform-source-opener { + cursor: pointer; +} + +/* full-screen-width modal for editing form source */ +.xml-source .modal-dialog { + position: absolute; + top: 20px; + bottom: 20px; + left: 20px; + right: 20px; + margin: 0; + width: auto; + + textarea { + font-family: monospace; + height: 400px; + width: 95%; + } +} + +.casexml ul { + margin-left: 15px; +} + +// Width of dropdown list when selecting a question from case management +.bigdrop { + width: 600px !important; +} + +// Visit scheduler +.nested-fieldset { + margin-left: 50px; + + .form-inline { + margin-left: 50px; + } +} diff --git a/corehq/apps/style/static/app_manager/less/new_appmanager/navigation.less b/corehq/apps/style/static/app_manager/less/new_appmanager/navigation.less new file mode 100644 index 000000000000..0f16e5e635c9 --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/new_appmanager/navigation.less @@ -0,0 +1,301 @@ +.appmanager-sidebar { + // hack from http://stackoverflow.com/questions/266015/css-floats-how-do-i-keep-them-on-one-line + min-width: @app-manager-sidebar-width; + width: auto !important; + width: @app-manager-sidebar-width; + float: left; +} + +nav.appmanager-content { + margin-bottom: 20px; +} + +// Used to indicate sortable table rows (i.e., case list rows) +.sortable-handle { + cursor: move; +} + +@z-index-trash: 20; + +@appnav-width: @app-manager-sidebar-width; +@appnav-trash-width: 32px; +@appnav-item-height: 48px; +@appnav-secondary-width: 35px; + +.appnav-menu { + list-style: none; + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: 12px; + min-height: @appnav-item-height/2; +} + +.appnav-menu > li > .appnav-item a { + float: left; + box-sizing: border-box; + line-height: @appnav-item-height; + padding-right: @appnav-trash-width; + color: @cc-text; + .transition(all .5s); + text-decoration: none !important; +} + +.appnav-menu > li > .appnav-item a.appnav-delete { + width: @appnav-trash-width; + .transition(all .2s); + position: relative; + z-index: @z-index-trash; + + i { + display: block; + text-align: center; + cursor: pointer; + width: @appnav-trash-width; + height: @appnav-item-height; + line-height: @appnav-item-height; + .transition(margin .5s); + position: relative; + margin-left: -50px; + } + + &:hover, &:focus { + color: @cc-att-neg-mid; + } +} + +.appnav-menu > li > .appnav-item a.appnav-title { + width: @appnav-width - @appnav-trash-width; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + position: relative; + + > span { + position: relative; + } + + > .appnav-primary-icon { + font-size: 1.7rem; + margin-right: 5px; + top: 1px; + position: relative; + color: lighten(@cc-text, 20); + } + > .appnav-primary-icon-lg { + font-size: 2rem; + top: 2px; + } + > .appnav-drag-icon { + position: absolute; + top: 0; + right: 10px; + text-align: center; + width: @appnav-trash-width; + height: @appnav-item-height; + line-height: @appnav-item-height; + opacity: 0; + .transition(all 1s); + &:hover { + color: @cc-dark-cool-accent-mid; + cursor: move; + background-color: darken(@cc-bg, 5); + } + } + &:hover { + > .appnav-drag-icon { + opacity: 100; + } + } +} + +.appnav-menu > li > .appnav-item a.appnav-title-no-delete { + padding-left: @appnav-trash-width; + width: @appnav-width; +} + +.appnav-menu > li > .appnav-item a.appnav-title-secondary { + width: @appnav-width - @appnav-trash-width - @appnav-secondary-width; +} + +.appnav-menu > li > .appnav-item a.appnav-secondary { + width: @appnav-secondary-width; + &.appnav-settings { + .transition(all .2s); + } + + &:hover, &:focus { + color: @cc-att-pos-mid; + &.appnav-settings { + color: @cc-brand-mid; + } + } +} + +.appnav-menu > li > .appnav-item a.appnav-add { + width: @appnav-width; + padding-left: @appnav-trash-width; + > .fa { + .transition(all .2s); + margin-right: 8px; + margin-left: 5px; + position: relative; + } + &:hover, &:focus { + text-decoration: none; + + > .fa { + color: @cc-att-pos-mid; + } + } +} + +.appnav-show-on-hover { + opacity: 0; +} + +.appnav-menu > li > .appnav-item { + box-sizing: content-box; + width: @appnav-width; + .clearfix(); + + &:hover, &:focus { + a { + text-decoration: none; + outline: none; + background-color: rgba(255,255,255,0.6); + &.appnav-delete { + i { + margin-left: 0; + } + } + } + .appnav-show-on-hover { + opacity: 100; + } + } + &.active a { + background-color: white; + } + &.settings-view .appnav-secondary { + color: @cc-brand-mid; + } + &.settings-view .appnav-secondary .appnav-show-on-hover { + opacity: 100; + } +} + +.appnav-menu-nested { + > li > .appnav-item > a.appnav-title { + padding-left: 10px; + } + > li > .appnav-item > a.appnav-title { + position: relative; + + &:before { + font-family: "WorkflowFontRegular"; + content: '\f00a'; + position: absolute; + left: -13px; + top: -5px; + font-size: 4.6rem; + color: lighten(@cc-text, 60); + } + } + > li:last-child > .appnav-item > a.appnav-title:before { + content: '\f00b'; + } + > .appnav-primary-icon { + margin-left: 2px; + } +} + +.edit-module-li { + .transition(background-color 1s); +} + +.appnav-highlight { + background-color: darken(@cc-bg, 5); +} + +.appnav-name-wrapper { + background-color: @cc-brand-mid; + position: relative; + .transition(background-color 1s); + + &:hover, &.active { + background-color: darken(@cc-brand-mid, 10); + } + + a, a:link, a:visited, a:hover, a:focus { + color: white; + text-decoration: none; + } +} + +.appnav-name { + padding: 0; + margin: 0; + margin-right: 51px; + font-size: @font-size-base*1.2; + a { + padding: 15px; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +.appnav-name-settings { + float: right; + width: 51px; + + a { + padding-left: 16px; + padding-top: 14px; + padding-bottom: 13px; + display: block; + .transition(all 1s); + &:hover, &:focus, &.active { + text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white; + } + } +} + +.appnav-language-select { + padding: 5px 15px 4px; + font-size: 11px; + background-color: @cc-brand-mid; + color: white; + label { + font-weight: 400; + line-height: 13px; + padding-top: 1px; + display: inline-block; + } + select { + width: 42px; + height: 16px; + display: inline; + float: right; + background-color: darken(@cc-brand-mid, 5); + border: none; + color: white; + margin-top: 2px; + } +} + +.appnav-menu .btn-langcode-preprocessed { + background-color: darken(@cc-bg, 10); + border: none; + color: lighten(@cc-text, 10); + vertical-align: top; + font-size: 9px; + margin-top: 15px; + padding-bottom: 3px; + //.transition(all 1s); + //&:hover { + // .box-shadow(0 0 5px 2px lighten(@cc-text, 20)); + //} +} diff --git a/corehq/apps/style/static/app_manager/less/new_appmanager/popover.less b/corehq/apps/style/static/app_manager/less/new_appmanager/popover.less new file mode 100644 index 000000000000..dd9c403e7b20 --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/new_appmanager/popover.less @@ -0,0 +1,53 @@ +.popover-additem { + background-color: @cc-light-cool-accent-low; + width: 295px; + height: 180px; + .border-top-radius(0); + .border-bottom-radius(0); + color: @cc-light-cool-accent-hi; + border: 0; + + .popover-title { + background-color: transparent; + text-transform: uppercase; + font-size: 1.2rem; + border-bottom: 1px solid darken(@cc-light-cool-accent-low, 2); + } + &.right > .arrow:after { + border-right-color: @cc-light-cool-accent-low; + } +} + +.popover-additem-option { + width: 116px; + height: 116px; + box-sizing: border-box; + color: @cc-light-cool-accent-hi; + border: none; + background-color: transparent; + + text-transform: uppercase; + display: block; + padding-top: 25px; + padding-bottom: 25px; + text-align: center; + .transition(background .5s); + font-size: 1.2rem; + &:focus { + color: @cc-light-cool-accent-hi; + } + + &:hover { + text-decoration: none; + color: @cc-light-cool-accent-hi; + background-color: darken(@cc-light-cool-accent-low, 10); + } + + .fa { + font-size: 4.5rem; + display: block; + text-align: center; + width: 100%; + margin-bottom: 10px; + } +} diff --git a/corehq/apps/style/static/app_manager/less/new_appmanager/variables.less b/corehq/apps/style/static/app_manager/less/new_appmanager/variables.less new file mode 100644 index 000000000000..7646eb91f56f --- /dev/null +++ b/corehq/apps/style/static/app_manager/less/new_appmanager/variables.less @@ -0,0 +1 @@ +@app-manager-sidebar-width: 280px; diff --git a/corehq/apps/style/static/app_manager/less/preview_app-main.less b/corehq/apps/style/static/app_manager/less/preview_app-main.less index f77fbb755593..aa646bb5af09 100644 --- a/corehq/apps/style/static/app_manager/less/preview_app-main.less +++ b/corehq/apps/style/static/app_manager/less/preview_app-main.less @@ -1,13 +1,14 @@ @import '../../style/less/_hq/includes/variables.less'; @import '../../style/less/_hq/includes/mixins.less'; -/* this file is included in app_manager/v1/apps_base.html and is relevant to the +/* this file is included in app_manager/v1/apps_base.html +AND app_manager/v2/apps_base.html and is relevant to the EXTERNAL styling of the preview app container in app manager. For the styling of the app preview content and layout, please check out preview_app/less */ - +@preview-phone-wrapper-width: 300px; @preview-phone-width: 250px; @preview-phone-height: 444px; @preview-phone-case-offset-y: 40px; @@ -18,21 +19,15 @@ preview_app/less */ min-height: @preview-phone-height + 150; } -.preview-phone-window { - height: @preview-phone-height; - width: @preview-phone-width; - background-color: white; -} - .preview-phone-container { - position: fixed; box-sizing: border-box; background-color: black; .border-top-radius(30px); .border-bottom-radius(30px); - top: 110px; right: -930px; - overflow: hidden; + position: absolute; + top: 50%; + margin-top: -(@preview-phone-height + (@preview-phone-case-offset-y * 2))/2; width: @preview-phone-width + (@preview-phone-case-offset-x * 2); height: @preview-phone-height + (@preview-phone-case-offset-y * 2); @@ -40,21 +35,58 @@ preview_app/less */ padding-left: @preview-phone-case-offset-x; .box-shadow(0 0px 10px 3px rgba(0,0,0,.45)); + .transition(all 1s); +} + +#js-appmanager-body.offset-for-preview { + margin-right: @preview-phone-wrapper-width; +} + +#hq-messages-container > div > div > .alert { + .transition(margin-right 1s); +} + +#hq-messages-container.offset-for-preview > div > div > .alert { + margin-right: @preview-phone-wrapper-width + 10; +} +.preview-phone-wrapper { + box-sizing: border-box; + top: 0; + right: 0; + position: fixed; z-index: @zindex-app-preview; + width: 0; + background-color: rgba(50, 50, 50, .3); + .transition(width 1s); + overflow: hidden; - .transition(all 1s); - &.small-height { - top: 20px; - position: absolute; + &.open { + width: @preview-phone-wrapper-width; + .box-shadow(0 0px 10px 3px rgba(0,0,0,.45)); } - &.open { - right: 30px; + &.open.small-height { + z-index: @zindex-app-preview + 2; + > .preview-phone-container { + top: 20px; + margin-top: 0; + } } + &.open > .preview-phone-container { + right: 10px; + } +} + +.preview-phone-window { + height: @preview-phone-height; + width: @preview-phone-width; + background-color: white; } + + .preview-icon { font-size: 1.5rem; line-height: 24px; @@ -64,7 +96,7 @@ preview_app/less */ .transition(all 1s); } -.btn-preview-close { +.btn-preview-toggle { @preview-close-size: 30px; margin: 0 auto; display: block; @@ -81,4 +113,8 @@ preview_app/less */ font-size: 1.6rem; padding-left: 1px; .transition(all .6s); + + position: absolute; + left: -5px; + top: -5px; } diff --git a/corehq/apps/style/static/style/js/layout.js b/corehq/apps/style/static/style/js/layout.js index d2ea666b4859..c4d0e69e540e 100644 --- a/corehq/apps/style/static/style/js/layout.js +++ b/corehq/apps/style/static/style/js/layout.js @@ -5,12 +5,14 @@ hqLayout.selector = { content: '#hq-content', footer: '#hq-footer', sidebar: '#hq-sidebar', - breadcrumbs: '#hq-breadcrumbs' + breadcrumbs: '#hq-breadcrumbs', + messages: '#hq-messages-container', }; hqLayout.values = { footerHeight: 0, - isFooterVisible: true + isFooterVisible: true, + isAppbuilderResizing: false, }; hqLayout.utils = { @@ -20,6 +22,12 @@ hqLayout.utils = { getFooterShowPosition: function () { return $(document).height() - (hqLayout.values.footerHeight / 3); }, + getAvailableContentWidth: function () { + var $sidebar = $(hqLayout.selector.sidebar); + + var absorbedWidth = $sidebar.outerWidth() + 2; + return $(window).outerWidth() - absorbedWidth; + }, getAvailableContentHeight: function () { var $navigation = $(hqLayout.selector.navigation), $footer = $(hqLayout.selector.footer), @@ -35,6 +43,12 @@ hqLayout.utils = { }, isScrollable: function () { return $(document).height() > $(window).height(); + }, + setIsAppbuilderResizing: function (isOn) { + hqLayout.values.isAppbuilderResizing = isOn; + }, + setBalancePreviewFn: function (fn) { + hqLayout.actions.balancePreview = fn; } }; @@ -53,21 +67,44 @@ hqLayout.actions = { contentHeight = $content.outerHeight(); } - if ($sidebar.length) { + if ($sidebar.length && !hqLayout.values.isAppbuilderResizing) { var newSidebarHeight = Math.max(availableHeight, contentHeight); $sidebar.css('min-height', newSidebarHeight + 'px'); + } else { + if ($sidebar.outerHeight() > $content.outerHeight()) { + $content.css('min-height', $sidebar.outerHeight() + 'px'); + } } } }, + balanceWidths: function () { + var $content = $(hqLayout.selector.content), + $sidebar = $(hqLayout.selector.sidebar); + if ($content.length && $sidebar.length) { + $content.css('width', hqLayout.utils.getAvailableContentWidth() + 'px'); + } + + }, + balancePreview: function () { + // set with setBalancePreviewFn in utils. + } }; $(window).on('load', function () { hqLayout.actions.initialize(); + if (hqLayout.values.isAppbuilderResizing) { + hqLayout.actions.balanceWidths(); + } hqLayout.actions.balanceSidebar(); + hqLayout.actions.balancePreview(); }); $(window).resize(function () { + if (hqLayout.values.isAppbuilderResizing) { + hqLayout.actions.balanceWidths(); + } hqLayout.actions.balanceSidebar(); + hqLayout.actions.balancePreview(); }); $(window).scroll(function () {