Bring all of header into WholePage component
now there is only *one* Vue.js app instantiated on each page, yay!
This commit is contained in:
Lance Edgar
parent
47c2742878
commit
6d846ab0db
|
|
@ -1,6 +1,5 @@
|
||||||
## -*- coding: utf-8; -*-
|
## -*- coding: utf-8; -*-
|
||||||
<%namespace file="/grids/nav.mako" import="grid_index_nav" />
|
<%namespace file="/grids/nav.mako" import="grid_index_nav" />
|
||||||
<%namespace file="/feedback_dialog_buefy.mako" import="feedback_dialog" />
|
|
||||||
<%namespace file="/autocomplete.mako" import="tailbone_autocomplete_template" />
|
<%namespace file="/autocomplete.mako" import="tailbone_autocomplete_template" />
|
||||||
<%namespace name="base_meta" file="/base_meta.mako" />
|
<%namespace name="base_meta" file="/base_meta.mako" />
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
@ -31,11 +30,145 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
${self.body()}
|
||||||
|
|
||||||
## TODO: should move template to JS, then can postpone the JS
|
<div id="whole-page-app">
|
||||||
${tailbone_autocomplete_template()}
|
<whole-page></whole-page>
|
||||||
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.autocomplete.js') + '?ver={}'.format(tailbone.__version__))}
|
</div>
|
||||||
|
|
||||||
|
${self.render_whole_page_template()}
|
||||||
|
${self.make_whole_page_component()}
|
||||||
|
${self.make_whole_page_app()}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<%def name="title()"></%def>
|
||||||
|
|
||||||
|
<%def name="content_title()">
|
||||||
|
${self.title()}
|
||||||
|
</%def>
|
||||||
|
|
||||||
|
<%def name="header_core()">
|
||||||
|
|
||||||
|
${self.core_javascript()}
|
||||||
|
${self.extra_javascript()}
|
||||||
|
${self.core_styles()}
|
||||||
|
${self.extra_styles()}
|
||||||
|
|
||||||
|
## TODO: should this be elsewhere / more customizable?
|
||||||
|
% if dform is not Undefined:
|
||||||
|
<% resources = dform.get_widget_resources() %>
|
||||||
|
% for path in resources['js']:
|
||||||
|
${h.javascript_link(request.static_url(path))}
|
||||||
|
% endfor
|
||||||
|
% for path in resources['css']:
|
||||||
|
${h.stylesheet_link(request.static_url(path))}
|
||||||
|
% endfor
|
||||||
|
% endif
|
||||||
|
</%def>
|
||||||
|
|
||||||
|
<%def name="core_javascript()">
|
||||||
|
${self.jquery()}
|
||||||
|
${self.vuejs()}
|
||||||
|
${self.buefy()}
|
||||||
|
${self.fontawesome()}
|
||||||
|
|
||||||
|
## some commonly-useful logic for detecting (non-)numeric input
|
||||||
|
${h.javascript_link(request.static_url('tailbone:static/js/numeric.js') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
|
||||||
|
## Tailbone / Buefy stuff
|
||||||
|
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.datepicker.js') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.numericinput.js') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.oncebutton.js') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.timepicker.js') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.grid.js') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
var session_timeout = ${request.get_session_timeout() or 'null'};
|
||||||
|
var logout_url = '${request.route_url('logout')}';
|
||||||
|
var noop_url = '${request.route_url('noop')}';
|
||||||
|
$(function() {
|
||||||
|
## NOTE: this code was copied from
|
||||||
|
## https://bulma.io/documentation/components/navbar/#navbar-menu
|
||||||
|
$('.navbar-burger').click(function() {
|
||||||
|
$('.navbar-burger').toggleClass('is-active');
|
||||||
|
$('.navbar-menu').toggleClass('is-active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</%def>
|
||||||
|
|
||||||
|
<%def name="jquery()">
|
||||||
|
## jQuery 1.12.4
|
||||||
|
${h.javascript_link('https://code.jquery.com/jquery-1.12.4.min.js')}
|
||||||
|
</%def>
|
||||||
|
|
||||||
|
<%def name="vuejs()">
|
||||||
|
## Vue.js (last known good @ 2.6.10)
|
||||||
|
${h.javascript_link('https://unpkg.com/vue/dist/vue.min.js')}
|
||||||
|
|
||||||
|
## vue-resource
|
||||||
|
## (needed for e.g. this.$http.get() calls, used by grid at least)
|
||||||
|
${h.javascript_link('https://cdn.jsdelivr.net/npm/vue-resource@1.5.1')}
|
||||||
|
</%def>
|
||||||
|
|
||||||
|
<%def name="buefy()">
|
||||||
|
## Buefy (last known good @ 0.7.10)
|
||||||
|
## TODO: i guess Buefy 0.8.0 breaks us! in particular see the grid filters
|
||||||
|
## ${h.javascript_link('https://unpkg.com/buefy/dist/buefy.min.js')}
|
||||||
|
${h.javascript_link('https://unpkg.com/buefy@0.7.10/dist/buefy.min.js')}
|
||||||
|
</%def>
|
||||||
|
|
||||||
|
<%def name="fontawesome()">
|
||||||
|
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
|
||||||
|
</%def>
|
||||||
|
|
||||||
|
<%def name="extra_javascript()"></%def>
|
||||||
|
|
||||||
|
<%def name="core_styles()">
|
||||||
|
|
||||||
|
${self.buefy_styles()}
|
||||||
|
|
||||||
|
${h.stylesheet_link(request.static_url('tailbone:static/themes/bobcat/css/base.css') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/layout.css') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
${h.stylesheet_link(request.static_url('tailbone:static/css/grids.css') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/grids.css') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/grids.rowstatus.css') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
## ${h.stylesheet_link(request.static_url('tailbone:static/css/filters.css') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/filters.css') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
${h.stylesheet_link(request.static_url('tailbone:static/themes/bobcat/css/forms.css') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/forms.css') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
${h.stylesheet_link(request.static_url('tailbone:static/css/diffs.css') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
.filters .filter-fieldname {
|
||||||
|
min-width: ${filter_fieldname_width};
|
||||||
|
justify-content: left;
|
||||||
|
}
|
||||||
|
.filters .filter-verb {
|
||||||
|
min-width: ${filter_verb_width};
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</%def>
|
||||||
|
|
||||||
|
<%def name="buefy_styles()">
|
||||||
|
## Buefy 0.7.4
|
||||||
|
${h.stylesheet_link('https://unpkg.com/buefy@0.7.4/dist/buefy.min.css')}
|
||||||
|
</%def>
|
||||||
|
|
||||||
|
## TODO: this is only being referenced by the progress template i think?
|
||||||
|
## (so, should make a Buefy progress page at least)
|
||||||
|
<%def name="jquery_theme()">
|
||||||
|
${h.stylesheet_link('https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css')}
|
||||||
|
</%def>
|
||||||
|
|
||||||
|
<%def name="extra_styles()"></%def>
|
||||||
|
|
||||||
|
<%def name="head_tags()"></%def>
|
||||||
|
|
||||||
|
<%def name="render_whole_page_template()">
|
||||||
|
<script type="text/x-template" id="whole-page-template">
|
||||||
|
<div>
|
||||||
<header>
|
<header>
|
||||||
|
|
||||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||||
|
|
@ -137,11 +270,11 @@
|
||||||
<p>DB:</p>
|
<p>DB:</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="level-item">
|
<div class="level-item">
|
||||||
${h.form(url('change_db_engine'))}
|
${h.form(url('change_db_engine'), ref='dbPickerForm')}
|
||||||
${h.csrf_token(request)}
|
${h.csrf_token(request)}
|
||||||
${h.hidden('engine_type', value=master.engine_type_key)}
|
${h.hidden('engine_type', value=master.engine_type_key)}
|
||||||
<div class="select">
|
<div class="select">
|
||||||
${h.select('dbkey', db_picker_selected, db_picker_options, id='db-picker')}
|
${h.select('dbkey', db_picker_selected, db_picker_options, **{'@change': 'changeDB()'})}
|
||||||
</div>
|
</div>
|
||||||
${h.end_form()}
|
${h.end_form()}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -176,12 +309,12 @@
|
||||||
## Theme Picker
|
## Theme Picker
|
||||||
% if expose_theme_picker and request.has_perm('common.change_app_theme'):
|
% if expose_theme_picker and request.has_perm('common.change_app_theme'):
|
||||||
<div class="level-item">
|
<div class="level-item">
|
||||||
${h.form(url('change_theme'), method="post")}
|
${h.form(url('change_theme'), method="post", ref='themePickerForm')}
|
||||||
${h.csrf_token(request)}
|
${h.csrf_token(request)}
|
||||||
Theme:
|
Theme:
|
||||||
<div class="theme-picker">
|
<div class="theme-picker">
|
||||||
<div class="select">
|
<div class="select">
|
||||||
${h.select('theme', theme, options=theme_picker_options, id='theme-picker')}
|
${h.select('theme', theme, theme_picker_options, **{'@change': 'changeTheme()'})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
${h.end_form()}
|
${h.end_form()}
|
||||||
|
|
@ -196,175 +329,14 @@
|
||||||
% endif
|
% endif
|
||||||
|
|
||||||
## Feedback Button / Dialog
|
## Feedback Button / Dialog
|
||||||
${h.javascript_link(request.static_url('tailbone:static/themes/falafel/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
|
<feedback-form
|
||||||
${feedback_dialog()}
|
action="${url('feedback')}">
|
||||||
<div id="feedback-app">
|
|
||||||
<feedback-form action="${url('feedback')}">
|
|
||||||
</feedback-form>
|
</feedback-form>
|
||||||
</div>
|
|
||||||
<script type="text/javascript">
|
|
||||||
new Vue({el: '#feedback-app'})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</div><!-- level-right -->
|
</div><!-- level-right -->
|
||||||
</nav><!-- level -->
|
</nav><!-- level -->
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
${self.body()}
|
|
||||||
|
|
||||||
<div id="whole-page-app">
|
|
||||||
<whole-page></whole-page>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
${self.render_whole_page_template()}
|
|
||||||
${self.make_whole_page_component()}
|
|
||||||
${self.make_whole_page_app()}
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
<%def name="title()"></%def>
|
|
||||||
|
|
||||||
<%def name="content_title()">
|
|
||||||
${self.title()}
|
|
||||||
</%def>
|
|
||||||
|
|
||||||
<%def name="header_core()">
|
|
||||||
|
|
||||||
${self.core_javascript()}
|
|
||||||
${self.extra_javascript()}
|
|
||||||
${self.core_styles()}
|
|
||||||
${self.extra_styles()}
|
|
||||||
|
|
||||||
## TODO: should this be elsewhere / more customizable?
|
|
||||||
% if dform is not Undefined:
|
|
||||||
<% resources = dform.get_widget_resources() %>
|
|
||||||
% for path in resources['js']:
|
|
||||||
${h.javascript_link(request.static_url(path))}
|
|
||||||
% endfor
|
|
||||||
% for path in resources['css']:
|
|
||||||
${h.stylesheet_link(request.static_url(path))}
|
|
||||||
% endfor
|
|
||||||
% endif
|
|
||||||
</%def>
|
|
||||||
|
|
||||||
<%def name="core_javascript()">
|
|
||||||
${self.jquery()}
|
|
||||||
${self.vuejs()}
|
|
||||||
${self.buefy()}
|
|
||||||
${self.fontawesome()}
|
|
||||||
|
|
||||||
## some commonly-useful logic for detecting (non-)numeric input
|
|
||||||
${h.javascript_link(request.static_url('tailbone:static/js/numeric.js') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
|
|
||||||
## Tailbone / Buefy stuff
|
|
||||||
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.datepicker.js') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.numericinput.js') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.oncebutton.js') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.timepicker.js') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.grid.js') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var session_timeout = ${request.get_session_timeout() or 'null'};
|
|
||||||
var logout_url = '${request.route_url('logout')}';
|
|
||||||
var noop_url = '${request.route_url('noop')}';
|
|
||||||
% if expose_db_picker is not Undefined and expose_db_picker:
|
|
||||||
$(function() {
|
|
||||||
$('#db-picker').change(function() {
|
|
||||||
$(this).parents('form:first').submit();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
% endif
|
|
||||||
% if expose_theme_picker and request.has_perm('common.change_app_theme'):
|
|
||||||
$(function() {
|
|
||||||
$('#theme-picker').change(function() {
|
|
||||||
$(this).parents('form:first').submit();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
% endif
|
|
||||||
$(function() {
|
|
||||||
## NOTE: this code was copied from
|
|
||||||
## https://bulma.io/documentation/components/navbar/#navbar-menu
|
|
||||||
$('.navbar-burger').click(function() {
|
|
||||||
$('.navbar-burger').toggleClass('is-active');
|
|
||||||
$('.navbar-menu').toggleClass('is-active');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</%def>
|
|
||||||
|
|
||||||
<%def name="jquery()">
|
|
||||||
## jQuery 1.12.4
|
|
||||||
${h.javascript_link('https://code.jquery.com/jquery-1.12.4.min.js')}
|
|
||||||
</%def>
|
|
||||||
|
|
||||||
<%def name="vuejs()">
|
|
||||||
## Vue.js (last known good @ 2.6.10)
|
|
||||||
${h.javascript_link('https://unpkg.com/vue/dist/vue.min.js')}
|
|
||||||
|
|
||||||
## vue-resource
|
|
||||||
## (needed for e.g. this.$http.get() calls, used by grid at least)
|
|
||||||
${h.javascript_link('https://cdn.jsdelivr.net/npm/vue-resource@1.5.1')}
|
|
||||||
</%def>
|
|
||||||
|
|
||||||
<%def name="buefy()">
|
|
||||||
## Buefy (last known good @ 0.7.10)
|
|
||||||
## TODO: i guess Buefy 0.8.0 breaks us! in particular see the grid filters
|
|
||||||
## ${h.javascript_link('https://unpkg.com/buefy/dist/buefy.min.js')}
|
|
||||||
${h.javascript_link('https://unpkg.com/buefy@0.7.10/dist/buefy.min.js')}
|
|
||||||
</%def>
|
|
||||||
|
|
||||||
<%def name="fontawesome()">
|
|
||||||
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
|
|
||||||
</%def>
|
|
||||||
|
|
||||||
<%def name="extra_javascript()"></%def>
|
|
||||||
|
|
||||||
<%def name="core_styles()">
|
|
||||||
|
|
||||||
${self.buefy_styles()}
|
|
||||||
|
|
||||||
${h.stylesheet_link(request.static_url('tailbone:static/themes/bobcat/css/base.css') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/layout.css') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
${h.stylesheet_link(request.static_url('tailbone:static/css/grids.css') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/grids.css') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/grids.rowstatus.css') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
## ${h.stylesheet_link(request.static_url('tailbone:static/css/filters.css') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/filters.css') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
${h.stylesheet_link(request.static_url('tailbone:static/themes/bobcat/css/forms.css') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/forms.css') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
${h.stylesheet_link(request.static_url('tailbone:static/css/diffs.css') + '?ver={}'.format(tailbone.__version__))}
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
.filters .filter-fieldname {
|
|
||||||
min-width: ${filter_fieldname_width};
|
|
||||||
justify-content: left;
|
|
||||||
}
|
|
||||||
.filters .filter-verb {
|
|
||||||
min-width: ${filter_verb_width};
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</%def>
|
|
||||||
|
|
||||||
<%def name="buefy_styles()">
|
|
||||||
## Buefy 0.7.4
|
|
||||||
${h.stylesheet_link('https://unpkg.com/buefy@0.7.4/dist/buefy.min.css')}
|
|
||||||
</%def>
|
|
||||||
|
|
||||||
## TODO: this is only being referenced by the progress template i think?
|
|
||||||
## (so, should make a Buefy progress page at least)
|
|
||||||
<%def name="jquery_theme()">
|
|
||||||
${h.stylesheet_link('https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css')}
|
|
||||||
</%def>
|
|
||||||
|
|
||||||
<%def name="extra_styles()"></%def>
|
|
||||||
|
|
||||||
<%def name="head_tags()"></%def>
|
|
||||||
|
|
||||||
<%def name="render_whole_page_template()">
|
|
||||||
<script type="text/x-template" id="whole-page-template">
|
|
||||||
<div>
|
|
||||||
|
|
||||||
## Page Title
|
## Page Title
|
||||||
<section id="content-title" class="hero is-primary">
|
<section id="content-title" class="hero is-primary">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
@ -397,19 +369,17 @@
|
||||||
|
|
||||||
% if request.session.peek_flash('error'):
|
% if request.session.peek_flash('error'):
|
||||||
% for error in request.session.pop_flash('error'):
|
% for error in request.session.pop_flash('error'):
|
||||||
<div class="notification is-warning">
|
<b-notification type="is-warning">
|
||||||
<!-- <button class="delete"></button> -->
|
|
||||||
${error}
|
${error}
|
||||||
</div>
|
</b-notification>
|
||||||
% endfor
|
% endfor
|
||||||
% endif
|
% endif
|
||||||
|
|
||||||
% if request.session.peek_flash():
|
% if request.session.peek_flash():
|
||||||
% for msg in request.session.pop_flash():
|
% for msg in request.session.pop_flash():
|
||||||
<div class="notification is-info">
|
<b-notification type="is-info">
|
||||||
<!-- <button class="delete"></button> -->
|
|
||||||
${msg}
|
${msg}
|
||||||
</div>
|
</b-notification>
|
||||||
% endfor
|
% endfor
|
||||||
% endif
|
% endif
|
||||||
|
|
||||||
|
|
@ -428,17 +398,101 @@
|
||||||
</div><!-- content-wrapper -->
|
</div><!-- content-wrapper -->
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script type="text/x-template" id="feedback-template">
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div class="level-item">
|
||||||
|
<b-button type="is-primary"
|
||||||
|
@click="showFeedback()"
|
||||||
|
icon-pack="fas"
|
||||||
|
icon-left="fas fa-comment">
|
||||||
|
Feedback
|
||||||
|
</b-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<b-modal has-modal-card
|
||||||
|
:active.sync="showDialog">
|
||||||
|
<div class="modal-card">
|
||||||
|
|
||||||
|
<header class="modal-card-head">
|
||||||
|
<p class="modal-card-title">User Feedback</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="modal-card-body">
|
||||||
|
<p>
|
||||||
|
Questions, suggestions, comments, complaints, etc.
|
||||||
|
<span class="red">regarding this website</span> are
|
||||||
|
welcome and may be submitted below.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<b-field label="User Name">
|
||||||
|
<b-input v-model="userName"
|
||||||
|
% if request.user:
|
||||||
|
disabled
|
||||||
|
% endif
|
||||||
|
>
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
|
||||||
|
<b-field label="Referring URL">
|
||||||
|
<b-input
|
||||||
|
v-model="referrer"
|
||||||
|
disabled="true">
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
|
||||||
|
<b-field label="Message">
|
||||||
|
<b-input type="textarea"
|
||||||
|
v-model="message"
|
||||||
|
ref="textarea">
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="modal-card-foot">
|
||||||
|
<b-button @click="showDialog = false">
|
||||||
|
Cancel
|
||||||
|
</b-button>
|
||||||
|
<once-button type="is-primary"
|
||||||
|
@click="sendFeedback()"
|
||||||
|
:disabled="!message.trim()"
|
||||||
|
text="Send Message">
|
||||||
|
</once-button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</b-modal>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
${tailbone_autocomplete_template()}
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="declare_whole_page_vars()">
|
<%def name="declare_whole_page_vars()">
|
||||||
|
${h.javascript_link(request.static_url('tailbone:static/themes/falafel/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
let WholePage = {
|
let WholePage = {
|
||||||
template: '#whole-page-template',
|
template: '#whole-page-template',
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
changeContentTitle(newTitle) {
|
changeContentTitle(newTitle) {
|
||||||
this.contentTitleHTML = newTitle
|
this.contentTitleHTML = newTitle
|
||||||
}
|
},
|
||||||
|
|
||||||
|
% if expose_db_picker is not Undefined and expose_db_picker:
|
||||||
|
changeDB() {
|
||||||
|
this.$refs.dbPickerForm.submit()
|
||||||
|
},
|
||||||
|
% endif
|
||||||
|
|
||||||
|
% if expose_theme_picker and request.has_perm('common.change_app_theme'):
|
||||||
|
changeTheme() {
|
||||||
|
this.$refs.themePickerForm.submit()
|
||||||
|
},
|
||||||
|
% endif
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -450,7 +504,17 @@
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="modify_whole_page_vars()">
|
<%def name="modify_whole_page_vars()">
|
||||||
## NOTE: if you override this, must use <script> tags
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
FeedbackFormData.csrftoken = ${json.dumps(request.session.get_csrf_token() or request.session.new_csrf_token())|n}
|
||||||
|
FeedbackFormData.referrer = location.href
|
||||||
|
|
||||||
|
% if request.user:
|
||||||
|
FeedbackFormData.userUUID = ${json.dumps(request.user.uuid)|n}
|
||||||
|
FeedbackFormData.userName = ${json.dumps(six.text_type(request.user))|n}
|
||||||
|
% endif
|
||||||
|
|
||||||
|
</script>
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="finalize_whole_page_vars()">
|
<%def name="finalize_whole_page_vars()">
|
||||||
|
|
@ -462,8 +526,14 @@
|
||||||
${self.modify_whole_page_vars()}
|
${self.modify_whole_page_vars()}
|
||||||
${self.finalize_whole_page_vars()}
|
${self.finalize_whole_page_vars()}
|
||||||
|
|
||||||
|
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.autocomplete.js') + '?ver={}'.format(tailbone.__version__))}
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
FeedbackForm.data = function() { return FeedbackFormData }
|
||||||
|
|
||||||
|
Vue.component('feedback-form', FeedbackForm)
|
||||||
|
|
||||||
WholePage.data = function() { return WholePageData }
|
WholePage.data = function() { return WholePageData }
|
||||||
|
|
||||||
Vue.component('whole-page', WholePage)
|
Vue.component('whole-page', WholePage)
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue