R11/release11-tools-mocked-services
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjusted uianimation.js to new html/css model

Browse Source
This commit is contained in:
Gabriel Modzelewski
2021-04-06 15:01:48 +02:00
parent 07146e3f2b
commit 3cba4988e1
3 changed files with 47 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/main/resources/static/css/commons/r11form.css
View File

@@ -87,6 +87,16 @@
display: none; display: none;
} }
.tool-extention {
opacity: 0;
pointer-events: none;
}
.tool-extention.active {
opacity: 100%;
pointer-events: all;
}
.clickable-text { .clickable-text {
padding: 0; padding: 0;
outline: none; outline: none;
@@ -355,6 +365,15 @@
display: block; display: block;
} }
.tabcontent {
display: none;
}
.tabcontent.active {
display: flex;
justify-content: center;
}
.collapsible .section-button { .collapsible .section-button {
width: 100%; width: 100%;
padding: 15px 0; padding: 15px 0;
@@ -385,6 +404,10 @@
text-align: justify; text-align: justify;
} }
.hiddable.active { .hiddable {
display: none; display: none;
} }
.hiddable.active {
display: block;
}

8
src/main/resources/static/html/mock.html
View File

@@ -19,7 +19,7 @@
</div> </div>
<div> <div>
<!-- h2 --> <!-- h2 -->
<div id="basicItemData" class="hiddable"><h2>Your Message</h2></div> <div id="basicItemData" class="hiddable active"><h2>Your Message</h2></div>
<div id="advancedItemData" class="hiddable"><h2>Messaged id: <span>1</span></h2></div> <div id="advancedItemData" class="hiddable"><h2>Messaged id: <span>1</span></h2></div>
<!-- save --> <!-- save -->
<div> <div>
@@ -69,7 +69,7 @@
<h3>&gt; show/hide advanced settings</h3> <h3>&gt; show/hide advanced settings</h3>
</div> </div>
<!-- advanced --> <!-- advanced -->
<div id="advanced" class="max-width with-padding"> <div id="advanced" class="max-width with-padding hiddable">
<!-- tab menu --> <!-- tab menu -->
<div class="tabmenu medium-vertical-margin"> <div class="tabmenu medium-vertical-margin">
<button id="headersTab" class="tabitem active clickable-text big-font">Headers</button> <button id="headersTab" class="tabitem active clickable-text big-font">Headers</button>
@@ -78,7 +78,7 @@
<!-- container --> <!-- container -->
<div class="medium-vertical-margin"> <div class="medium-vertical-margin">
<!-- headers --> <!-- headers -->
<div class="medium-vertical-margin tabcontent centered-content"> <div id="headers" class="medium-vertical-margin tabcontent active">
<table class="table-map"> <table class="table-map">
<thead> <thead>
<tr> <tr>
@@ -102,7 +102,7 @@
</table> </table>
</div> </div>
<!-- history --> <!-- history -->
<div class="medium-vertical-margin tabcontent centered-content"> <div id="history" class="medium-vertical-margin tabcontent">
<table class="table-default"> <table class="table-default">
<tr class="bottom-border"> <tr class="bottom-border">
<th>Timestamp</th> <th>Timestamp</th>

47
src/main/resources/static/js/uianimation.js
View File

@@ -6,50 +6,41 @@ var advancedID = $("#advancedItemData");
var focusedField = false; var focusedField = false;
function changeAdvancedVisibility(){ function changeAdvancedVisibility(){
if(advancedVisibility){ if(advancedVisibility){
selectMenu.css('display', 'none'); selectMenu.removeClass('active');
advancedTab.css('display', 'none'); advancedTab.removeClass('active');
advancedID.css('display', 'none'); advancedID.removeClass('active');
basicID.css('display', 'block') basicID.addClass('active');
advancedVisibility = false; advancedVisibility = false;
} }
else { else {
selectMenu.css('display', 'block'); selectMenu.addClass('active');
advancedTab.css('display', 'block'); advancedTab.addClass('active');
advancedID.css('display', 'block'); advancedID.addClass('active');
basicID.css('display', 'none'); basicID.removeClass('active');
advancedVisibility = true; advancedVisibility = true;
} }
setCookie(); setCookie();
} }
function createMessageTab() {
var items = document.getElementById("listItems");
items.innerHTML += '<div class="menuItem">Item</div>';
}
$("#optional").click(changeAdvancedVisibility); $("#optional").click(changeAdvancedVisibility);
$(".menuFactory").click(createMessageTab);
$('#historyTab').click(showHistory); $('#historyTab').click(showHistory);
const tabitem = $('.tabitem');
function showHistory(){ function showHistory(){
$('#headers').css('display', 'none'); $('#headersTab').click(showHeaders);
$('.advancedMenuTabSelected').addClass('advancedMenuTab'); tabitem.removeClass('active');
$('.advancedMenuTabSelected').click(showHeaders); $('.tabcontent').removeClass('active');
$('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected'); $('#history').addClass('active');
$('#history').css('display', 'block'); $('#historyTab').addClass('active');
$('#historyTab').addClass('advancedMenuTabSelected');
$('#historyTab').removeClass('advancedMenuTab');
$('#historyTab').off('click'); $('#historyTab').off('click');
} }
function showHeaders(){ function showHeaders(){
$('#history').css('display', 'none'); $('#historyTab').click(showHistory);
$('.advancedMenuTabSelected').addClass('advancedMenuTab'); tabitem.removeClass('active');
$('.advancedMenuTabSelected').click(showHistory); $('.tabcontent').removeClass('active');
$('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected'); $('#headers').addClass('active');
$('#headers').css('display', 'block'); $('#headersTab').addClass('active');
$('#headersTab').addClass('advancedMenuTabSelected');
$('#headersTab').removeClass('advancedMenuTab');
$('#headersTab').off('click'); $('#headersTab').off('click');
} }