在项目全局页面中添加?帮助提示按钮，展示相关信息
This commit is contained in:
azhengzz
parent
2a0a0df22b
commit
e8f78f9c8e
|
|
@ -38,6 +38,32 @@ body {
|
|||
background-image: url(/static/icon/bootstrap-icons/arrow-repeat-blue.svg);
|
||||
}
|
||||
|
||||
.btn-help{
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
background: white;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
bottom: 33px;
|
||||
right: 33px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 100%;
|
||||
font-size: 20px;
|
||||
box-shadow: rgba(15, 15, 15, 0.1) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 2px 4px;
|
||||
z-index: 101;
|
||||
outline: none;
|
||||
}
|
||||
.btn-help:hover{
|
||||
background-color: #ebebeb;
|
||||
}
|
||||
.btn-help:focus{
|
||||
background-color: #cdcdcd;
|
||||
}
|
||||
|
||||
.div-split-gutter-vertical{
|
||||
background-image: url(/static/icon/bootstrap-icons/three-dots-vertical.svg);
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -57,6 +57,9 @@ $(document).ready(function () {
|
|||
});
|
||||
});
|
||||
|
||||
// 为帮助按钮设置弹出框
|
||||
tippyHelpBtn();
|
||||
|
||||
});
|
||||
|
||||
let $btn_refresh_latest_report = $('#btn-refresh-latest-report');
|
||||
|
|
@ -201,3 +204,22 @@ jQuery.wait = function (selector, func, times, interval) {
|
|||
// }
|
||||
// return this;
|
||||
// };
|
||||
|
||||
// 为帮助按钮设置弹出框
|
||||
function tippyHelpBtn() {
|
||||
let $helpBtn = $('.btn-help');
|
||||
tippy($helpBtn[0], {
|
||||
trigger: 'click',
|
||||
hideOnClick: true,
|
||||
placement: 'top',
|
||||
allowHTML: true,
|
||||
interactive: true,
|
||||
content: function (){
|
||||
return $helpBtn.next().html();
|
||||
},
|
||||
appendTo: () => document.body,
|
||||
zIndex: 200,
|
||||
theme: 'light',
|
||||
maxWidth: 'none',
|
||||
});
|
||||
}
|
||||
|
|
@ -18,6 +18,10 @@
|
|||
<link href="{{ url_for('static', filename='plugins/toastr/toastr.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet">
|
||||
{# <link href="{{ url_for('static', filename='plugins/sweetalert2/themes/bootstrap-4/bootstrap-4.min.css') }}" rel="stylesheet">#}
|
||||
<link href="{{ url_for('static', filename='plugins/tippyjs/tippy.js/themes/light.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='plugins/tippyjs/tippy.js/themes/light-border.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='plugins/tippyjs/tippy.js/themes/material.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='plugins/tippyjs/tippy.js/themes/translucent.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/base.css') }}" rel="stylesheet">
|
||||
{%- endblock styles %}
|
||||
{%- endblock head %}
|
||||
|
|
@ -45,6 +49,36 @@
|
|||
{# application content needs to be provided in the app_content block #}
|
||||
{% block app_content %}{% endblock %}
|
||||
</div>
|
||||
<div class="btn-help" role="button" tabindex="0">?</div>
|
||||
<div style="display: none;">
|
||||
<div class="card" style="width: 20vw; border: none;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">帮助与操作指引</h5>
|
||||
<p class="card-text">当前项目处于频繁更新的初步阶段，请大家提出宝贵意见。</p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">
|
||||
<a href="https://gitee.com/azhengzz/api-automation-test/blob/master/README.md" class="card-link" target="_blank"><i class="fab fa-readme"></i> 点击查看操作介绍</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<a href="https://gitee.com/azhengzz/api-automation-test/issues?assignee_id=&author_id=&branch=&collaborator_ids=&issue_search=&label_ids=&label_text=&milestone_id=&program_id=&scope=&sort=&state=all" class="card-link" target="_blank"><i class="fas fa-question-circle"></i> 使用问题请提issue</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<a href="https://gitee.com/azhengzz/api-automation-test" class="card-link" target="_blank">
|
||||
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
|
||||
<path d="M384 1003.2c-145.6-41.6-276.8-155.2-340.8-297.6-46.4-102.4-46.4-284.8 0-388.8 48-105.6 152-212.8 259.2-264 128-62.4 291.2-62.4 419.2 0 107.2 51.2 211.2 160 259.2 264 49.6 113.6 48 273.6-8 388.8-105.6 228.8-366.4 360-588.8 297.6z" fill="#D90013"></path>
|
||||
<path d="M203.2 820.8c-6.4-4.8-11.2-112-11.2-236.8 0-209.6 3.2-232 36.8-281.6 64-96 116.8-112 371.2-107.2l224 4.8v128l-228.8 8c-179.2 6.4-232 12.8-243.2 32-8 12.8-16 91.2-16 172.8v147.2h158.4c166.4 0 201.6-14.4 190.4-75.2-4.8-24-24-28.8-121.6-33.6l-115.2-4.8v-126.4h387.2l-6.4 118.4c-6.4 136-35.2 192-126.4 236.8-43.2 24-96 28.8-272 28.8-120 0-222.4-4.8-227.2-11.2z" fill="#FFFEFE"></path>
|
||||
</svg>
|
||||
Fork/Star on Gitee
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div style="color: rgba(55, 53, 47, 0.4);">ApiAutomationTest: Version 0.2.0</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{%- endblock content %}
|
||||
|
||||
{% block scripts %}
|
||||
|
|
@ -54,6 +88,8 @@
|
|||
<script src="{{ url_for('static', filename='plugins/socket.io/socket.io.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='plugins/toastr/toastr.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='plugins/sweetalert2/sweetalert2.all.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='plugins/tippyjs/@popperjs/core/dist/umd/popper.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='plugins/tippyjs/tippy.js/dist/tippy-bundle.umd.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/base.js') }}"></script>
|
||||
<script type="text/javascript">
|
||||
var csrf_token="{{ csrf_token() }}";
|
||||
|
|
|
|||
|
|
@ -2,10 +2,6 @@
|
|||
|
||||
{% block styles %}
|
||||
{{ super() }}
|
||||
<link href="{{ url_for('static', filename='plugins/tippyjs/tippy.js/themes/light.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='plugins/tippyjs/tippy.js/themes/light-border.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='plugins/tippyjs/tippy.js/themes/material.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='plugins/tippyjs/tippy.js/themes/translucent.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='plugins/jquery.fancytree/skin-win8/ui.fancytree.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='plugins/handsontable/handsontable.full.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/scene/scene.css') }}" rel="stylesheet">
|
||||
|
|
@ -121,8 +117,6 @@ class="bg-gradient-grey"
|
|||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script src="{{ url_for('static', filename='plugins/Sortable/Sortable.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='plugins/tippyjs/@popperjs/core/dist/umd/popper.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='plugins/tippyjs/tippy.js/dist/tippy-bundle.umd.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='plugins/split.js/split.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='plugins/jquery.fancytree/jquery.fancytree-all-deps.min.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='plugins/jquery.fancytree/modules/jquery.fancytree.filter.js') }}"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue