vigdorov/storage-service-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HM-94 Переместил кнопки управления вниз и оживил кнопку редактированияб пока без возможности сохранить изменения (#57)

Browse Source
This commit is contained in:
mrPadre
2020-08-19 13:52:59 +03:00
committed by GitHub
parent bf4ea2ab15
commit 71466600c2
3 changed files with 87 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/app.html
View File

@ -388,29 +388,28 @@
<!-- Шаблоны форм для просмотры api -->
<template id="api-view-form">
<div class="h-100 overflow-auto">
<div class="h-100 overflow-auto Api__view-container">
<p class="h2 mb-2 p-3 pr-5 sticky-top border-bottom bg-light"></p>
<div class="Api__view-controls">
<button class="Button__edit">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__edit bi bi-pencil"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z" />
<path fill-rule="evenodd"
d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z" />
</svg>
<form class="p-3"></form>
<div class="Api__view-controls stricky-bottom">
<button class="Button__edit btn btn-light">
<i class="fas fa-pencil-alt Edit__icon">
<span class="Button__edit-text"></span>
</i>
</button>
<button class="Button__delete">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__delete bi bi-trash"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
<path fill-rule="evenodd"
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
</svg>
<button class="Button__delete btn btn-light">
<i class="far fa-trash-alt">
<span class="Button__delete-text"></span>
</i>
</button>
<button class="Button__cancel btn btn-light">
<i class="fas fa-ban">
<span class="Button__cancel-text"></span>
</i>
</button>
</div>
<form class="p-3"></form>
</div>
</template>

44
src/components/api-table-view-form/ApiTableViewForm.css
View File

@ -2,17 +2,43 @@
height: 200px;
}
.Api__view-controls {
position: absolute;
right: 40px;
top: 10px;
font-size: 20px;
z-index: 10000;
position: sticky;
bottom: 0;
width: 100%;
font-size: 1em;
display: flex;
flex-direction: row;
justify-content: space-around;
background-color: white;
min-height: 50px;
}
.Button__delete {
background: none;
border: none;
width: 100%;
}
.Button__delete-text {
margin: 10px;
}
.Button__edit {
background: none;
border: none;
width: 100%;
}
.Button__edit-text {
margin: 10px;
}
.Button__cancel {
width: 100%;
}
.Button__cancel-text {
margin: 10px;
}
@media (max-width: 600px) {
.Button__delete-text {
display: none;
}
.Button__edit-text {
display: none;
}
.Button__cancel-text {
display: none;
}
}

36
src/components/api-table-view-form/ApiTableViewForm.js
View File

@ -13,6 +13,7 @@ class ApiTableViewForm extends Component {
content: this.mainNode
});
this.key = null;
this.isEdit = false;
this.title = this.mainNode.querySelector('.h2');
this.form = this.mainNode.querySelector('form');
@ -22,10 +23,23 @@ class ApiTableViewForm extends Component {
this.deleteApi(this.key);
}
});
this.editBtn = this.mainNode.querySelector('.Button__edit');
this.addEventListener(this.editBtn, 'click', () => {
this.editApi();
});
this.editIcon = this.mainNode.querySelector('.Edit__icon');
this.editBtnText = this.mainNode.querySelector('.Button__edit-text');
this.editBtnText.textContent = 'Редактировать';
this.deleteBtnText = this.mainNode.querySelector('.Button__delete-text');
this.deleteBtnText.textContent = 'Удалить';
this.cancelBtnText = this.mainNode.querySelector('.Button__cancel-text');
this.cancelBtnText.textContent = 'Отменить';
this.title.textContent = 'Информация о хранилище';
const inputs = [
this.inputs = [
this.keyInput = this.createComponent(FormControl, this.form, {
id: 'api-key-input',
label: 'Название хранилища'
@ -50,7 +64,7 @@ class ApiTableViewForm extends Component {
}),
];
inputs.forEach((input) => {
this.inputs.forEach((input) => {
input.disabled(true);
});
}
@ -76,5 +90,23 @@ class ApiTableViewForm extends Component {
this.next('deleteApi');
this.sidebar.hide();
}
editApi () {
if (!this.isEdit) {
this.inputs.forEach((input) => {
input.disabled(false);
});
this.editBtnText.textContent = 'Сохранить';
this.editIcon.className = 'fas fa-check Edit__icon';
this.isEdit = true;
} else {
this.inputs.forEach((input) => {
input.disabled(true);
});
this.editBtnText.textContent = 'Редактировать';
this.editIcon.className = 'fas fa-pencil-alt Edit__icon';
this.isEdit = false;
}
}
}
export default ApiTableViewForm;