Added new override markup (#97)

* Issue#94

* up

* up

* up

* removed npm generated files

Co-authored-by: Alexander <alexander.kazakov@union.expert>
This commit is contained in:
iko 2021-09-15 15:02:58 +03:00 committed by GitHub
parent f8bc81ce31
commit 726e4a6ca4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 358 additions and 61 deletions

1
.gitignore vendored
View File

@ -10,3 +10,4 @@ octopod-css/node_modules
dev/certs/*
tmp/*
octopod-css/production
.idea/

View File

@ -106,13 +106,20 @@
<td>
<div class="listing listing--for-text">
<div class="listing__item">
<b>ENVIRONENT:</b> production
<span class="listing__key">ENVIRONMENT:</span>
<span class="listing__value">production</span>
</div>
<div class="listing__item">
<b>app_api_url:</b> http://my-api.my-domain.com
<span class="listing__key">app_api_url:</span>
<span class="listing__value">http://my-api.my-domain.com</span>
</div>
<div class="listing__item">
<b>SECRET_CODE:</b> asdfaisdjri235868ear7%lorem-ipsum-dolor-sit-amen
<span class="listing__key default">SECRET_CODE:</span>
<span class="listing__value">asdfaisdjri235868ear7%lorem-ipsum-dolor-sit-amen</span>
</div>
<div class="listing__item">
<span class="listing__key default">INFO:</span>
<span class="listing__value default">New Project Staging</span>
</div>
<button class="listing__more expander" type="button">
Show all (5)
@ -498,13 +505,28 @@
<td>
<div class="listing listing--for-text">
<div class="listing__item">
<b>ENVIRONENT:</b> production
<span class="listing__key">
ENVIRONMENT:
</span>
<span class="listing__value">
production
</span>
</div>
<div class="listing__item">
<b>app_api_url:</b> http://my-api.my-domain.com
<span class="listing__key">
app_api_url:
</span>
<span class="listing__value">
http://my-api.my-domain.com
</span>
</div>
<div class="listing__item">
<b>SECRET_CODE:</b> asdfaisdjri235868ear7%lorem-ipsum-dolor-sit-amen
<span class="listing__key item-default">
SECRET_CODE:
</span>
<span class="listing__value item-default">
asdfaisdjri235868ear7%lorem-ipsum-dolor-sit-amen
</span>
</div>
</div>
</td>
@ -589,6 +611,7 @@
</h2>
<div class="popup__operations">
<button class="popup__action button button--save" type="button">Save</button>
<button class="popup__action button button--save-loading" type="button" disabled>Save</button>
<button class="popup__action button button--secondary" type="button">Cancel</button>
</div>
<div class="popup__menu drop drop--actions">
@ -634,9 +657,23 @@
</h3>
<div class="deployment__widget">
<div class="overrides">
<button class="overrides__add dash dash--add" type="button">
Add an override
</button>
<div class="overrides__item">
<div class="overrides__key input">
<input class="input__widget" type="text" placeholder="key" value="ENVIRONENT">
<input class="input__widget" type="text" placeholder="key">
</div>
<div class="overrides__value input">
<input class="input__widget" type="text" placeholder="value">
</div>
<button class="overrides__delete spot spot--cancel">
Delete
</button>
</div>
<div class="overrides__item">
<div class="overrides__key input">
<input class="input__widget" type="text" placeholder="key" value="ENVIRONMENT">
</div>
<div class="overrides__value input">
<input class="input__widget" type="text" placeholder="value" value="production">
@ -657,30 +694,61 @@
</button>
</div>
<div class="overrides__item">
<div class="overrides__key input">
<div class="overrides__key input input--default">
<input class="input__widget" type="text" placeholder="key" value="SECRET_CODE">
</div>
<div class="overrides__value input">
<input class="input__widget" type="text" placeholder="value" value="asdfaisdjri235868ear7%^&IUAK$^%&asdfasdfij">
<div class="overrides__value input input--default">
<input class="input__widget" type="text" placeholder="value" value="production">
</div>
<button class="overrides__delete spot spot--cancel">
Delete
</button>
</div>
<div class="overrides__item">
<div class="overrides__key input input--deleted">
<input class="input__widget" type="text" placeholder="key" value="APP_URL" disabled>
</div>
<div class="overrides__value input input--deleted">
<input class="input__widget" type="text" placeholder="value" value="http://my-api.my-domain.com" disabled>
</div>
<button class="overrides__delete spot spot--undo">
Delete
</button>
</div>
<div class="overrides__item">
<div class="overrides__key input input--disable">
<input class="input__widget" type="text" placeholder="key" disabled>
</div>
<div class="overrides__value input input--disable">
<input class="input__widget" type="text" placeholder="value" value="production" disabled>
</div>
</div>
<div class="overrides__item">
<div class="overrides__key input">
<input class="input__widget" type="text" placeholder="key">
<input class="input__widget" type="text" placeholder="key" value="LiveSearch">
<ul class="overrides__search">
<li class="overrides__search-item"><b>S</b>ECRET_PASSWORD</li>
<li class="overrides__search-item"><b>S</b>ECRET_INFO</li>
<li class="overrides__search-item"><b>S</b>oviet Socialist Republics</li>
<li class="overrides__search-item"><b>S</b>oviet Socialist Republics</li>
<li class="overrides__search-item"><b>S</b>oviet Socialist Republics</li>
<li class="overrides__search-item"><b>S</b>oviet Socialist Republics</li>
<li class="overrides__search-item"><b>S</b>oviet Socialist Republics</li>
<li class="overrides__search-item"><b>S</b>oviet Socialist Republics</li>
<li class="overrides__search-item"><b>S</b>oviet Socialist Republics</li>
<li class="overrides__search-item"><b>S</b>oviet Socialist Republics</li>
<li class="overrides__search-item"><b>S</b>oviet Socialist Republics</li>
<li class="overrides__search-item"><b>S</b>oviet Socialist Republics</li>
<li class="overrides__search-item"><b>S</b>oviet Socialist Republics</li>
</ul>
</div>
<div class="overrides__value input">
<input class="input__widget" type="text" placeholder="value">
<input class="input__widget" type="text" placeholder="value" value="Value">
</div>
<button class="overrides__delete spot spot--cancel">
Delete
</button>
</div>
<button class="overrides__add dash dash--add" type="button">
Add an override
</button>
</div>
</div>
</section>
@ -690,6 +758,20 @@
</h3>
<div class="deployment__widget">
<div class="overrides">
<button class="overrides__add dash dash--add" type="button">
Add an override
</button>
<div class="overrides__item">
<div class="overrides__key input">
<input class="input__widget" type="text" placeholder="key">
</div>
<div class="overrides__value input">
<input class="input__widget" type="text" placeholder="value">
</div>
<button class="overrides__delete spot spot--cancel">
Delete
</button>
</div>
<div class="overrides__item">
<div class="overrides__key input">
<input class="input__widget" type="text" placeholder="key" value="ENVIRONENT">
@ -714,7 +796,34 @@
</div>
<div class="overrides__item">
<div class="overrides__key input">
<input class="input__widget" type="text" placeholder="key" value="SECRET_CODE">
<input class="input__widget input--default" type="text" placeholder="key" value="SECRET_CODE">
</div>
<div class="overrides__value input">
<input class="input__widget" type="text" placeholder="value" value="asdfaisdjri235868ear7%^&IUAK$^%&asdfasdfij">
</div>
<button class="overrides__delete spot spot--cancel">
Delete
</button>
</div>
<div class="overrides__item loader">
<div class="overrides__placeholder"></div>
<div class="overrides__placeholder"></div>
<div class="overrides__delete spot spot--loader"></div>
</div>
<div class="overrides__item loader">
<div class="overrides__placeholder"></div>
<div class="overrides__placeholder"></div>
<div class="overrides__delete spot spot--loader"></div>
</div>
<div class="overrides__item loader">
<div class="overrides__placeholder"></div>
<div class="overrides__placeholder"></div>
<div class="overrides__delete spot spot--loader"></div>
</div>
<div class="overrides__item">
<div class="overrides__key input input--error">
<input class="input__widget input--default" type="text" placeholder="key" value="SECRET_CODE">
<div class="input__output">Duplicate key values</div>
</div>
<div class="overrides__value input">
<input class="input__widget" type="text" placeholder="value" value="asdfaisdjri235868ear7%^&IUAK$^%&asdfasdfij">
@ -724,19 +833,29 @@
</button>
</div>
<div class="overrides__item">
<div class="overrides__key input">
<input class="input__widget" type="text" placeholder="key">
<div class="overrides__key input input--error">
<input class="input__widget" type="text" placeholder="key" value="ENVIRONMENT">
<div class="input__output">Duplicate key values</div>
</div>
<div class="overrides__value input">
<input class="input__widget" type="text" placeholder="value">
<input class="input__widget" type="text" placeholder="value" value="production">
</div>
<button class="overrides__delete spot spot--cancel">
Delete
</button>
</div>
<div class="overrides__item">
<div class="overrides__key input input--error">
<input class="input__widget" type="text" placeholder="key" value="">
<div class="input__output">Empty key value</div>
</div>
<div class="overrides__value input">
<input class="input__widget" type="text" placeholder="value" value="production">
</div>
<button class="overrides__delete spot spot--cancel">
Delete
</button>
</div>
<button class="overrides__add dash dash--add" type="button">
Add an override
</button>
</div>
</div>
</section>

View File

@ -116,13 +116,20 @@
<div class="deployment__widget">
<div class="listing listing--for-text listing--larger">
<div class="listing__item">
<b>ENVIRONENT:</b> production
<span class="listing__key">ENVIRONMENT:</span>
<span class="listing__value">production</span>
</div>
<div class="listing__item">
<b>app_api_url:</b> http: //my-api.my-domain.com
<span class="listing__key">app_api_url:</span>
<span class="listing__value">http://my-api.my-domain.com</span>
</div>
<div class="listing__item">
<b>SECRET_CODE:</b> asdfaisdjri235868ear7%^&IUAK$^%&asdfasdfij
<span class="listing__key default">SECRET_CODE:</span>
<span class="listing__value">asdfaisdjri235868ear7%lorem-ipsum-dolor-sit-amen</span>
</div>
<div class="listing__item">
<span class="listing__key default">INFO:</span>
<span class="listing__value default">New Project Staging</span>
</div>
</div>
</div>
@ -459,6 +466,20 @@
</h3>
<div class="deployment__widget">
<div class="overrides">
<button class="overrides__add dash dash--add" type="button">
Add an override
</button>
<div class="overrides__item">
<div class="overrides__key input">
<input class="input__widget" type="text" placeholder="key">
</div>
<div class="overrides__value input">
<input class="input__widget" type="text" placeholder="value">
</div>
<button class="overrides__delete spot spot--cancel">
Delete
</button>
</div>
<div class="overrides__item">
<div class="overrides__key input">
<input class="input__widget" type="text" placeholder="key" value="ENVIRONENT">
@ -492,20 +513,6 @@
Delete
</button>
</div>
<div class="overrides__item">
<div class="overrides__key input">
<input class="input__widget" type="text" placeholder="key">
</div>
<div class="overrides__value input">
<input class="input__widget" type="text" placeholder="value">
</div>
<button class="overrides__delete spot spot--cancel">
Delete
</button>
</div>
<button class="overrides__add dash dash--add" type="button">
Add an override
</button>
</div>
</div>
</section>
@ -515,6 +522,20 @@
</h3>
<div class="deployment__widget">
<div class="overrides">
<button class="overrides__add dash dash--add" type="button">
Add an override
</button>
<div class="overrides__item">
<div class="overrides__key input">
<input class="input__widget" type="text" placeholder="key">
</div>
<div class="overrides__value input">
<input class="input__widget" type="text" placeholder="value">
</div>
<button class="overrides__delete spot spot--cancel">
Delete
</button>
</div>
<div class="overrides__item">
<div class="overrides__key input">
<input class="input__widget" type="text" placeholder="key" value="ENVIRONENT">
@ -548,20 +569,6 @@
Delete
</button>
</div>
<div class="overrides__item">
<div class="overrides__key input">
<input class="input__widget" type="text" placeholder="key">
</div>
<div class="overrides__value input">
<input class="input__widget" type="text" placeholder="value">
</div>
<button class="overrides__delete spot spot--cancel">
Delete
</button>
</div>
<button class="overrides__add dash dash--add" type="button">
Add an override
</button>
</div>
</div>
</section>

View File

@ -100,6 +100,33 @@
background-repeat: no-repeat;
}
.button--save-loading {
position: relative;
padding-left: 40px;
color: rgba(255, 255, 255, 0.6);
cursor: default;
}
.button--save-loading:hover {
background-color: var(--primary);
}
.button--save-loading::before {
content: "";
position: absolute;
display: block;
width: 24px;
height: 24px;
left: 11px;
top: 0;
bottom: 0;
margin: auto;
background-image: url("../vectors/button-loader.svg");
background-repeat: no-repeat;
animation: loading 2.2s linear infinite;
}
.button--logs {
padding-left: 40px;
background-image: url("../vectors/common-use-logs.svg");

View File

@ -18,6 +18,8 @@
color: rgba(0, 0, 0, 0.87);
}
.input__widget:hover {
box-shadow: inset 0 -1px #326EE6;
}
@ -71,12 +73,16 @@
background-position: left center;
}
.input--error {
}
.input--error .input__widget {
box-shadow: inset 0 -2px var(--red);
color: var(--red);
box-shadow: inset 0 -1px var(--red);
}
.input--error .input__widget::placeholder {
color: rgba(212, 42, 42, 0.5);
}
.input__output {
@ -89,3 +95,47 @@
.input__output + .input__output {
margin-top: 3px;
}
.input--default {
}
.input--default .input__widget {
font-weight: 300;
font-style: italic;
}
.input--deleted {
}
.input--deleted .input__widget {
font-weight: 300;
font-style: italic;
text-decoration-line: line-through;
opacity: 0.2;
}
.input--deleted .input__widget:hover {
box-shadow: inset 0 -1px #B0B0B0;
}
.input--disable {
}
.input--disable .input__widget {
color: #B0B0B0;
}
.input--disable .input__widget::placeholder {
color: #B0B0B0;
}
.input--disable .input__widget:hover {
box-shadow: inset 0 -1px #B0B0B0;
}

View File

@ -41,10 +41,24 @@
.listing--for-text .listing__item:first-child {
margin-top: 0;
}
.listing--for-text b {
.listing--for-text .listing__key {
font-weight: 500;
}
.listing--for-text .listing__value {
font-weight: 400;
}
.listing--for-text .listing__key.default {
font-weight: 300;
font-style: italic;
}
.listing--for-text .listing__value.default {
font-weight: 300;
font-style: italic;
}
.listing--for-text .listing__more {
margin-top: 8px;
}

View File

@ -2,13 +2,14 @@
}
.overrides__item {
margin-top: 8px;
position: relative;
margin-bottom: 8px;
display: flex;
align-self: flex-start;
}
.overrides__item:first-child {
margin-top: 0;
.overrides__item:last-child {
margin-bottom: 0;
}
.overrides__key {
width: 400px;
@ -23,6 +24,62 @@
margin-left: 2px;
}
.overrides__search {
z-index: 2;
position: absolute;
top: 30px;
background: #FFFFFF;
padding: 8px 0;
list-style: none;
border-radius: 2px;
box-shadow: 0 8px 8px 0 #0000003D, 0 0 8px 0 #0000001F;
max-height: 274px;
overflow-y: auto;
}
.overrides__search-item {
font-size: 16px;
line-height: 24px;
padding: 12px 16px;
cursor: pointer;
color: rgba(0, 0, 0, 0.87);
font-weight: 400;
}
.overrides__search-item b {
font-weight: 700;
}
.overrides__search-item:hover {
background: #F8F8F8;
}
.overrides__placeholder {
position: relative;
width: 400px;
height: 40px;
padding: 14px 0;
box-shadow: inset 0 -1px 0 rgba(176, 176, 176, 0.2);
}
.overrides__placeholder::before {
position: relative;
content: "";
display: block;
height: 12px;
width: 350px;
border-radius: 2px;
background: rgba(238, 238, 238, 0.5);
}
.overrides__placeholder:first-child {
margin-right: 16px;
}
.overrides__placeholder:first-child::before {
width: 200px;
}
.overrides__add {
margin-top: 4px;
padding: 8px 0 8px 24px !important;
}

View File

@ -23,3 +23,14 @@
.spot--cancel:hover {
opacity: 1;
}
.spot--undo {
opacity: 1;
background-image: url("../vectors/spot-undo.svg");
}
.spot--loader {
opacity: 1;
background-image: url("../vectors/spot-loader.svg");
animation: loading 2.2s linear infinite;
}

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.6">
<path d="M19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12C4.5 7.85786 7.85786 4.5 12 4.5" stroke="white" stroke-width="2"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 276 B

View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 12C19.5 16.1421 16.1421 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12C4.5 7.85786 7.85786 4.5 12 4.5" stroke="#B0B0B0" stroke-width="2"/>
</svg>

After

Width:  |  Height:  |  Size: 255 B

View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.92896 4.92896C1.02596 8.83196 1.02596 15.168 4.92896 19.072C8.83196 22.974 15.168 22.975 19.072 19.072C22.974 15.169 22.974 8.83296 19.072 4.92896C15.168 1.02596 8.83196 1.02596 4.92896 4.92896ZM16.597 16.597C14.256 18.937 10.452 18.938 8.11096 16.597L9.52496 15.182C11.088 16.745 13.619 16.745 15.182 15.182C16.745 13.62 16.745 11.088 15.182 9.52496C13.598 7.94096 10.982 7.94096 9.41896 9.64596H11.64L11.647 11.647H5.98996V5.98996H7.98396V8.25196C10.359 5.72096 14.25 5.76396 16.597 8.11096C18.938 10.452 18.938 14.255 16.597 16.597Z" fill="#3671E3"/>
</svg>

After

Width:  |  Height:  |  Size: 669 B

View File

@ -17,4 +17,4 @@
"postcss-sprites": "3.1.2",
"run-sequence": "1.2.2"
}
}
}