Moved Mock Services assets to better location

2023-05-12 09:37:45 +02:00
parent 3c2f5f195e
commit 03be63f935
22 changed files with 9 additions and 9 deletions
--- a/Frontend/assets/css/tools/mock/common.css
+++ b/Frontend/assets/css/tools/mock/common.css
@@ -0,0 +1,32 @@
+@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
+/* @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); */
+@import url('r11addons.css');
+@import url('r11tables.css');
+@import url('r11tool.css');
+@import url('r11tooltip.css');
+@import url('r11modal.css');
+@import url('r11flexbox.css');
+
+@font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+}
+  
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -moz-font-feature-settings: 'liga';
+    -moz-osx-font-smoothing: grayscale;
+}
+  
--- a/Frontend/assets/css/tools/mock/font/Material-Icons.woff2
+++ b/Frontend/assets/css/tools/mock/font/Material-Icons.woff2
--- a/Frontend/assets/css/tools/mock/font/Nunito-VariableFont_wght.ttf
+++ b/Frontend/assets/css/tools/mock/font/Nunito-VariableFont_wght.ttf
--- a/Frontend/assets/css/tools/mock/font/fontello.eot
+++ b/Frontend/assets/css/tools/mock/font/fontello.eot
--- a/Frontend/assets/css/tools/mock/font/fontello.svg
+++ b/Frontend/assets/css/tools/mock/font/fontello.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2021 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="plus" unicode="&#xe801;" d="M786 439v-107q0-22-16-38t-38-15h-232v-233q0-22-16-37t-38-16h-107q-22 0-38 16t-15 37v233h-232q-23 0-38 15t-16 38v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q23 0 38-16t16-38z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="cancel" unicode="&#xe802;" d="M724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
+</font>
+</defs>
+</svg>
--- a/Frontend/assets/css/tools/mock/font/fontello.ttf
+++ b/Frontend/assets/css/tools/mock/font/fontello.ttf
--- a/Frontend/assets/css/tools/mock/font/fontello.woff
+++ b/Frontend/assets/css/tools/mock/font/fontello.woff
--- a/Frontend/assets/css/tools/mock/font/fontello.woff2
+++ b/Frontend/assets/css/tools/mock/font/fontello.woff2
--- a/Frontend/assets/css/tools/mock/fontello.css
+++ b/Frontend/assets/css/tools/mock/fontello.css
@@ -0,0 +1,59 @@
+@font-face {
+    font-family: 'fontello';
+    src: url('font/fontello.eot?49304387');
+    src: url('font/fontello.eot?49304387#iefix') format('embedded-opentype'),
+         url('font/fontello.woff2?49304387') format('woff2'),
+         url('font/fontello.woff?49304387') format('woff'),
+         url('font/fontello.ttf?49304387') format('truetype'),
+         url('font/fontello.svg?49304387#fontello') format('svg');
+    font-weight: normal;
+    font-style: normal;
+  }
+  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+  /*
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    @font-face {
+      font-family: 'fontello';
+      src: url('../font/fontello.svg?49304387#fontello') format('svg');
+    }
+  }
+  */
+   
+   [class^="icon-"]:before, [class*=" icon-"]:before {
+    font-family: "fontello";
+    font-style: normal;
+    font-weight: normal;
+    speak: never;
+   
+    display: inline-block;
+    text-decoration: inherit;
+    width: 1em;
+    margin-right: .2em;
+    text-align: center;
+    /* opacity: .8; */
+   
+    /* For safety - reset parent styles, that can break glyph codes*/
+    font-variant: normal;
+    text-transform: none;
+   
+    /* fix buttons height, for twitter bootstrap */
+    line-height: 1em;
+   
+    /* Animation center compensation - margins should be symmetric */
+    /* remove if not needed */
+    margin-left: .2em;
+   
+    /* you can be more comfortable with increased icons size */
+    /* font-size: 120%; */
+   
+    /* Font smoothing. That was taken from TWBS */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+   
+    /* Uncomment for 3D effect */
+    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+  }
+   
+  .icon-plus:before { content: '\e801'; } /* '' */
+  .icon-cancel:before { content: '\e802'; } /* '' */
--- a/Frontend/assets/css/tools/mock/main.css
+++ b/Frontend/assets/css/tools/mock/main.css
@@ -0,0 +1,4 @@
+.overflowedTableContent {
+    max-height: 750px;
+    overflow: scroll;
+}
--- a/Frontend/assets/css/tools/mock/r11addons.css
+++ b/Frontend/assets/css/tools/mock/r11addons.css
@@ -0,0 +1,72 @@
+.modification-button.btn-tile:hover {
+    color: #ca1111;
+}
+
+.modification-button.btn-tile {
+    width: 10%;
+    margin: 20% 0 0 0;
+    font-size: 14px;
+    color: #00000020
+}
+
+.modification-button.btn-addtile {
+    font-size: 38px;
+    color: #00000030;
+}
+
+.modification-button.btn-copy {
+    width: 24px;
+    height: 24px;
+    align-content: center;
+    display: grid;
+    justify-content: center;
+}
+
+.modification-button.btn-copy img {
+    width: 100%;
+    height: 100%;
+}
+
+.modification-button.btn-addtile:hover {
+    color: #58ac43;
+}
+
+.tile {
+    width: 100%;
+    padding-top: 40%;
+    border-radius: 5px;
+    position: relative;
+    background: #D5D7E6;
+    margin-bottom: 10px;
+    cursor: default;
+    border-bottom: 1px solid darkgray;
+}
+
+.tile:hover {
+    filter: brightness(110%);
+}
+
+.tile.active {
+    background: #2A93B0;
+    color: white;
+    filter: none;
+}
+
+.tile.active .btn-tile {
+    opacity: 0;
+}
+
+.tile .content {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0 2% 0 7%;
+    display: flex;
+}
+
+.content p {
+    margin: 0;
+    padding: 0;
+}
--- a/Frontend/assets/css/tools/mock/r11flexbox.css
+++ b/Frontend/assets/css/tools/mock/r11flexbox.css
@@ -0,0 +1,57 @@
+#editable-block {
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+#uuid-edit {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+#uuid-edit-field {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    width: 70%;
+    margin-right: 10px;
+    
+}
+
+#uuid-edit-field .uuid-inputField-icon{
+    background: none;
+    color: black;
+    border: 0;
+}
+
+#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;
+}
--- a/Frontend/assets/css/tools/mock/r11modal.css
+++ b/Frontend/assets/css/tools/mock/r11modal.css
@@ -0,0 +1,104 @@
+#overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  background: rgba(0, 0 , 0, 0.5);
+  pointer-events: none;
+}
+
+#overlay.active {
+	pointer-events: all;
+	opacity: 1;
+}
+
+.modal {
+	display: none;
+	width: 390px;
+	min-height: 71px;
+	max-height: 700px;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background: white;
+	padding: 5px;
+	border: 1px solid #f0f0f0;
+}
+
+.modal.active {
+	display: block;
+}
+
+.modal div.header {
+	width: 384px;
+	height: 24px;
+	background: #2e3133;
+	color: white;
+	font-size: 24px;
+	font-weight: 700;
+	padding: 3px;
+	margin-bottom: 5px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.modal div.header button {
+	font-size: 100%;
+	font-family: inherit;
+	border: 0;
+	padding: 0;
+	background: 0;
+	color: inherit;
+	cursor: pointer;
+}
+
+.modal div.header button:hover {
+	color: white;
+	font-weight: 700;
+}
+
+.modal div.body {
+	width: 370px;
+	padding: 10px;
+	background: #f0f0f0;
+	color: #2e3133;
+	min-height: 16px;
+	text-align: justify;
+	font-size: 16px;
+}
+
+.modal div.function {
+	width: 385px;
+	min-height: 30px;
+	padding-top: 5px;
+	display: flex;
+	justify-content: space-evenly;
+	background: inherit;
+}
+
+.modal div.function button {
+	min-height: 22px;
+	min-width: 34px;
+	max-width: 74px;
+	padding: 3px 20px;
+	outline: none;
+	border: 1px solid #f0f0f0;
+	background: rgba(205,205,205,1);
+	font-size: 16px;
+	text-align: center;
+	cursor: pointer;
+}
+
+.modal div.function button:hover {
+	filter: brightness(110%);
+}
+
+.r-exclamation:before {
+	content: '!';
+	color: #3bc4f1;
+	font-style: normal;
+}
--- a/Frontend/assets/css/tools/mock/r11tables.css
+++ b/Frontend/assets/css/tools/mock/r11tables.css
@@ -0,0 +1,71 @@
+.table-map {
+    width: 60%;
+}
+
+.table-map input{
+    font-size: 16px;
+    padding: 7px;
+    border: 1px solid rgba(145, 146, 146, 0.849);
+    border-radius: 5px;
+}
+
+.table-map input.key {
+    background: #f0f0f0;
+}
+
+.modification-button.btn-add {
+    font-size: 16px;
+    color: #00000030;
+    margin: auto 0 auto 0;
+}
+
+.modification-button.btn-add:hover {
+    color:#58ac43;
+}
+
+.modification-button.btn-hashmap {
+    font-size: 16px;
+    color: #00000030;
+    margin: auto 0 auto 0;
+}
+
+.modification-button.btn-hashmap:hover {
+    color: #ca1111;
+}
+
+.table-default {
+    width: 80%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.table-default tr {
+    background: #f0f0f02d;
+}
+
+.table-default tr.bottom-border {
+    border-bottom: 1px solid black;
+}
+
+.table-default th {
+    background: #ffffff;
+}
+
+.table-default tr.even {
+    background: #f0f0f0;
+}
+
+.table-doc td, .table-doc th{
+    border-spacing: 0px;
+    padding: 0px 10px;
+}
+
+.table-doc td {
+    background-color: rgba(155, 165, 160, 0.342);
+}
+
+.table-doc th {
+    background-color: #3bc4f1;
+    text-align: left;
+    color: white;
+}
--- a/Frontend/assets/css/tools/mock/r11tool.css
+++ b/Frontend/assets/css/tools/mock/r11tool.css
@@ -0,0 +1,325 @@
+@font-face {
+    font-family: "Nunito";
+    src: url('font/Nunito-VariableFont_wght.ttf') format('truetype');
+}
+
+input {
+    box-sizing: border-box;
+}
+
+.hyperlink, .hyperlink:visited, .hyperlink:active {
+    color: rgb(47, 125, 146);
+    cursor: pointer;
+}
+
+.hyperlink:hover {
+    filter: brightness(120%);
+}
+
+.bordered-field {
+    background-color: #FFFFFF;
+    border: 2px solid rgba(93, 99, 96, 0.705);
+    border-radius: 5px;
+    padding: 8px;
+    
+}
+
+.bordered-field:focus {
+    outline: none;
+    box-shadow: 0 0 5px rgba(81, 203, 238);
+    border: 2px solid #00000070;
+}
+
+.bordered-field:disabled {
+    background: #eeeeeed2;
+}
+
+.vertically-resizeable {
+    resize: vertical;
+}
+
+body {
+    font-family: 'Nunito', sans-serif;
+}
+
+.container {
+    display: flex;
+    justify-content: left;
+    width: 100%;
+}
+
+.tool {
+    width: 55%;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.tool.extended {
+    width: 65%;
+}
+
+.tool .tool-context {
+    width: 90%;
+}
+
+.tool.extended .tool-context {
+    width: 75%;
+}
+
+.tool.extended .tool-extention {
+    width: 20%;
+    padding-top: 2%;
+    display: block;
+}
+
+.tool .tool-extention {
+    display: none;
+}
+
+.tool-extention {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.tool-extention.active {
+    opacity: 100%;
+    pointer-events: all;
+}
+
+.clickable-text {
+    padding: 0;
+    outline: none;
+    background: none;
+    border: none;
+    font-weight: 300;
+    cursor: pointer;
+}
+
+.clickable-text.highlight:hover {
+    color: #3bc4f1;
+}
+
+.clickable-text.switch {
+    font-size: 18px;
+    font-weight: 300;
+}
+
+.clickable-text.switch span.toggleIndicator:before {
+    content: '>';
+}
+
+.clickable-text.switch span.toggleIndicator.active:before {
+    content: 'v';
+}
+
+.modification-button {
+    padding: 0;
+    outline: none;
+    background: none;
+    border: none;
+    font-weight: 300;
+}
+
+.text-aligned-to-right {
+    text-align: right;
+}
+
+.centered-vertically {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.display-space-between {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.display-space-evenly {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.float-left {
+    display: flex;
+    justify-content: left;
+    width: 100%;
+}
+
+.version-span {
+    font-size: 13px;
+    font-weight: 400;
+    color: rgba(85,85,85,0.555);
+}
+
+.block-display {
+    display: block;
+}
+
+.block-label {
+    display: block;
+    margin: 0 0 0 5px;
+}
+
+.tabmenu {
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    border-bottom: 1px solid rgba(185, 185, 185, 0.5);
+}
+
+.tabitem {
+    flex-grow: 1;
+    cursor: pointer;
+    padding: 5px 0;
+}
+
+.tabitem:hover {
+    font-weight: 700;
+}
+
+.tabitem.active {
+    background: rgba(33, 34, 34, 0.705);
+    color: white;
+    font-weight: 700;
+    cursor:default;
+    flex-grow: 1;
+}
+
+.big-font {
+    font-size: 20px;
+}
+
+.action-button.active {
+    background: #2A93B0;
+    border: 1px solid #7ed0eb;
+    cursor: pointer;
+    
+}
+
+.action-button.active:hover {
+    filter: brightness(110%);
+}
+
+.action-button {
+    background: #CCD1CF;
+    border:1px solid rgba(186, 197, 191, 0.507);
+    border-radius: 5px;
+    color: white;
+    padding: 10px 20px;
+    font-weight: 700;
+    margin: 3px 0;
+}
+
+.quater-width {
+    width: 25%;
+}
+
+.half-width {
+    width: 50%;
+}
+
+.tree-fourth-width {
+    width: 75%;
+}
+
+.half-width.with-padding {
+    width: 45%;
+}
+
+.max-width {
+    width: 100%;
+}
+
+.max-width.with-padding {
+    width: 94%;
+}
+
+.max-height {
+    height: 100%;
+}
+
+.height-300 {
+    height: 300px;
+}
+
+.max-height.with-padding {
+    height: 90%;
+}
+
+.small-margins {
+    margin: 3%;
+}
+
+.small-vertical-margin {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.medium-vertical-margin {
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+.large-vertical-margin {
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.textarea-300 {
+    height: 300px;
+}
+
+.centered-content {
+    display: flex;
+    justify-content: center;
+}
+
+
+.tabcontent {
+    display: none;
+}
+
+.tabcontent.active {
+    display: flex;
+    justify-content: center;
+}
+
+.hiddable {
+    display: none;
+}
+
+.hiddable.active {
+    display: inherit;
+}
+
+/* In case of collision with classes that use 'active' */
+.hidden {
+    display: none;
+}
+
+h1 {
+    font-weight: 400;
+}
+
+h2 {
+    font-weight: 400;
+}
+
+h3 {
+    font-weight: 400;
+}
+
+
+
+/* TODO: Add proper class */
+/* textarea {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+} */
+
+/* TODO: Add proper class */
+/* code{
+    line-height: 150%;
+} */
--- a/Frontend/assets/css/tools/mock/r11tooltip.css
+++ b/Frontend/assets/css/tools/mock/r11tooltip.css
@@ -0,0 +1,76 @@
+.tooltip-window {
+    position: fixed;
+    right: 0;
+    background: #FFFFFF;
+    padding: 15px 30px;
+    font-family: 'Nunito', sans-serif;
+    width: 40%;
+    height: 100%;
+    overflow: scroll;
+}
+
+.tooltip-window.lite {
+    width: 30%;
+}
+
+.tip {
+    display: none;
+}
+
+.tip.active {
+    display: block;
+}
+
+/* TODO: Remove !important. It's bad practice and it can cause errors in future */
+.section-button {
+    width: 100%;
+    padding: 15px 0;
+    font-size: 18px;
+    background: #b4b4b4c5;
+    cursor: pointer;
+    border-bottom: darkgray 2px solid !important;
+}
+
+.section-button:hover {
+    backdrop-filter: brightness(110%); 
+}
+
+.section-button .active {
+    background: #00000030;
+}
+
+.List .collapsibleContent {
+    border-left: #bdc5c9 2px solid;
+    overflow: hidden;
+    background: #ffffff50;
+}
+
+/* TODO: .section class is to generic. It should be renamed */
+.section{
+    padding: 10px 0px 20px 0px ;
+}
+
+/* TODO: content subclass already in use. Creating content class overrides the subclass.
+Make .content a subclass of .content */
+/* .content {
+    padding: 0px 15px 0px 15px ;
+    text-align: justify;
+    overflow: hidden;
+    transition: max-height .2s ease-out;
+    max-height: 0px;
+    border-left: #c0c2c3 2px solid;
+    
+} */
+
+.collapsibleMini::before{
+    content: "►";
+}
+
+.collapsibleMini.active::before{
+    content: "▼";
+}
+
+/* TODO: Add proper class */
+/* button:hover{
+    filter: brightness(110%);
+} */