From 3e834678412ca6094e0a633bf32ccb50d5da447c Mon Sep 17 00:00:00 2001 From: Adam Bem Date: Fri, 3 Mar 2023 14:10:42 +0100 Subject: [PATCH] Polished UI --- .../main/resources/static/css/r11flexbox.css | 57 ++++++++++++++----- .../src/main/resources/static/css/r11tool.css | 2 +- .../src/main/resources/static/html/mock.html | 48 +++++++++------- .../main/resources/static/js/datatransfer.js | 10 +++- .../main/resources/static/js/uianimation.js | 8 +-- 5 files changed, 82 insertions(+), 43 deletions(-) diff --git a/Backend/mocked-services/src/main/resources/static/css/r11flexbox.css b/Backend/mocked-services/src/main/resources/static/css/r11flexbox.css index 3eaf2fb..7000295 100644 --- a/Backend/mocked-services/src/main/resources/static/css/r11flexbox.css +++ b/Backend/mocked-services/src/main/resources/static/css/r11flexbox.css @@ -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; } \ No newline at end of file diff --git a/Backend/mocked-services/src/main/resources/static/css/r11tool.css b/Backend/mocked-services/src/main/resources/static/css/r11tool.css index 7e413b8..fd559f4 100644 --- a/Backend/mocked-services/src/main/resources/static/css/r11tool.css +++ b/Backend/mocked-services/src/main/resources/static/css/r11tool.css @@ -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; diff --git a/Backend/mocked-services/src/main/resources/static/html/mock.html b/Backend/mocked-services/src/main/resources/static/html/mock.html index ee4e09d..bb373c8 100644 --- a/Backend/mocked-services/src/main/resources/static/html/mock.html +++ b/Backend/mocked-services/src/main/resources/static/html/mock.html @@ -19,24 +19,28 @@
-
- - -
-
- - -
-
- - - -
- - +
+
+ +
+
+ + +
+
+ +
+ + + + + + + +
@@ -311,10 +315,10 @@
- - - - - + + + + + diff --git a/Backend/mocked-services/src/main/resources/static/js/datatransfer.js b/Backend/mocked-services/src/main/resources/static/js/datatransfer.js index 63737fc..e137ce9 100644 --- a/Backend/mocked-services/src/main/resources/static/js/datatransfer.js +++ b/Backend/mocked-services/src/main/resources/static/js/datatransfer.js @@ -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"); diff --git a/Backend/mocked-services/src/main/resources/static/js/uianimation.js b/Backend/mocked-services/src/main/resources/static/js/uianimation.js index ffe38f5..46dfb20 100644 --- a/Backend/mocked-services/src/main/resources/static/js/uianimation.js +++ b/Backend/mocked-services/src/main/resources/static/js/uianimation.js @@ -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') });