R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Polished UI

Browse Source
This commit is contained in:
Adam Bem
2023-03-03 14:10:42 +01:00
parent e77ac5ee8f
commit 3e83467841
5 changed files with 82 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
Backend/mocked-services/src/main/resources/static/css/r11flexbox.css
View File

@@ -1,26 +1,57 @@
#uuid-flex-container {
display: flex;
flex-direction: row;
align-items: stretch;
position: relative;
#editable-block {
flex-grow: 0;
flex-shrink: 0;
}
#uuid-flex-container .uuid-inputField-icon{
font-size: medium;
position: absolute;
top: 0;
right: 0;
margin-right: 41%;
margin-top: 1%;
#uuid-edit {
display: flex;
align-items: center;
margin-bottom: 15px;
}
#uuid-edit-field {
display: flex;
width: fit-content;
align-items: center;
width: 50%;
margin-right: 10px;
}
#uuid-edit-field .uuid-inputField-icon{
background: none;
color: black;
border: 0;
}
#uuid-flex-container .uuid-inputField-icon:hover{
#uuid-edit-field .uuid-inputField-icon:hover{
color: #2A93B0;
}
#uuid-input {
border: none;
width: 100%
}
#uuid-input:focus {
outline: none;
}
#uuid-validation-strategy input {
margin-left: 10px;
}
.disabled {
background-color: #CCD1CF;
}
.disabled #uuid-input {
background-color: #CCD1CF;
}
.uuid-inputField-icon-span {
font-size: x-large;
}

2
Backend/mocked-services/src/main/resources/static/css/r11tool.css
View File

@@ -199,7 +199,7 @@ body {
}
.action-button {
background: rgba(155, 165, 160, 0.507);
background: #CCD1CF;
border:1px solid rgba(186, 197, 191, 0.507);
border-radius: 5px;
color: white;

48
Backend/mocked-services/src/main/resources/static/html/mock.html
View File

@@ -19,24 +19,28 @@
</div>
<div>
<label for="uuid-input" class="block-display">UUID</label>
<div id="uuid-flex-container">
<input id="uuid-input" disabled onfocusout="changeUUID(this);" class="bordered-field flex-item with-padding diabled-background" value="UUID" style="margin-bottom:2%; width: 60%;"/>
<button onclick="copyUUIDToClipboard();" class="uuid-inputField-icon modification-button flex-item btn-copy action-button">
<span class="material-icons uuid-inputField-icon-span ">content_copy</span>
</button>
</div>
<div id="editableBlock">
<label for="editable">Editable</label>
<input type="checkbox" onchange="changeEditionOfUUID(this)" name="editable" id="editable" value="false"/>
</div>
<div class="hiddable" id="uuid-validation-strategy">
<label style="margin-bottom: 1%;display: block;"> UUID generation strategy:</label>
<input type="radio" checked name="uuid-validation-type" value="new" id="generateNew"/>
<label for="generateNew">Generate new UUID</label>
<br>
<input type="radio" name="uuid-validation-type" value="restore" id="restore"/>
<label for="generateNew">Restore previous UUID</label>
<div id="uuid-edit">
<div id="uuid-edit-field" class="bordered-field disabled">
<input id="uuid-input" disabled onfocusout="changeUUID(this);" value="UUID" />
<button onclick="copyUUIDToClipboard();" class="uuid-inputField-icon modification-button flex-item btn-copy action-button">
<span class="material-icons uuid-inputField-icon-span ">content_copy</span>
</button>
</div>
<div id="editableBlock">
<input type="checkbox" onchange="changeEditionOfUUID(this)" name="editable" id="editable" value="false"/>
<label for="editable">Editable</label>
</div>
</div>
<div class="hiddable" id="uuid-validation-strategy">
<label><b>UUID generation strategy:</b></label>
<input type="radio" checked name="uuid-validation-type" value="new" id="generateNew"/>
<label for="generateNew">Generate new UUID</label>
<input type="radio" name="uuid-validation-type" value="restore" id="restore"/>
<label for="restore">Restore previous UUID</label>
</div>
</div>
<div>
@@ -311,10 +315,10 @@
<button>No</button>
</div>
</div>
<script type="text/javascript" src="/js/modal.js"></script>
<script type="text/javascript" src="/js/uianimation.js"></script>
<script type="text/javascript" src="/js/datatransfer.js"></script>
<script type="text/javascript" src="/js/historyloader.js"></script>
<script type="text/javascript" src="/js/fiddle.js"></script>
<script type="text/javascript" src="../js/modal.js"></script>
<script type="text/javascript" src="../js/uianimation.js"></script>
<script type="text/javascript" src="../js/datatransfer.js"></script>
<script type="text/javascript" src="../js/historyloader.js"></script>
<script type="text/javascript" src="../js/fiddle.js"></script>
</body>
</html>

10
Backend/mocked-services/src/main/resources/static/js/datatransfer.js
View File

@@ -237,10 +237,13 @@ function fillStaticFields(uuid, id, mediaType, body, httpStatus){
function changeEditionOfUUID(element){
var inputFieldId= "#uuid-input"
var inputFieldDiv = "#uuid-edit-field"
if(element.checked){
$(inputFieldId).removeAttr('disabled');
$(inputFieldDiv).removeClass('disabled');
} else{
$(inputFieldId).attr('disabled', true);
$(inputFieldDiv).addClass('disabled');
}
}
@@ -276,7 +279,8 @@ async function fetchUUIDCheck(givenUUID , strategy){
return newUUID ;
}
function checkUUIDChars(uuid) {
function checkUUIDChars(uuid) {
console.log("UUID in check: " + uuid);
const regex = new RegExp("/^[A-z0-9-]+$/");
if(regex.test(uuid)){
return uuid ;
@@ -287,7 +291,9 @@ function checkUUIDChars(uuid) {
function changeUUID(element){
const uuidStrategy = $('input[name="uuid-validation-type"]:checked').val();
const givenUUID = checkUUIDChars(element.value);
// const givenUUID = checkUUIDChars(element.value);
const givenUUID = element.value;
console.log(givenUUID);
if( givenUUID == clientUUID ){
uuidChangeModalDisplay("noChg");

8
Backend/mocked-services/src/main/resources/static/js/uianimation.js
View File

@@ -124,17 +124,15 @@ $('#btnSave').mouseleave(function(){hidTip('btnSaveTip')});
$('#btnSave').focusout(function(){focusOutTip('btnSaveTip')});
$('#new-tile').mouseover(function(){showTip('btn-newTileTip');});
//$('#new-tile').focusin(function(){focusInTip('btn-newTileTip')});
$('#new-tile').mouseleave(function(){hidTip('btn-newTileTip')});
$('#new-tile').focusout(function(){focusOutTip('btn-newTileTip')});
$('#listItems').mouseover(function(){showTip('messagesTip');});
//$('#listItems').focusin(function(){focusInTip('messagesTip')});
$('#listItems').mouseleave(function(){hidTip('messagesTip')});
//$('#listItems').focusout(function(){focusOutTip('messagesTip')});
$('#uuid-flex-container').mouseover(function(){ showTip('UUIDFieldTip') });
$('#uuid-flex-container').mouseleave(function(){ hidTip('UUIDFieldTip') });
$('#uuid-edit-field').mouseover(function(){ showTip('UUIDFieldTip') });
$('#uuid-edit-field').mouseleave(function(){ hidTip('UUIDFieldTip') });
$('#uuid-validation-strategy').mouseover(function(){ showTip('UUIDValidationStrategyTip') });
$('#uuid-validation-strategy').mouseleave(function(){ hidTip('UUIDValidationStrategyTip') });