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

src/app.html

@@ -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">
+            <form class="p-3"></form>
-                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__edit bi bi-pencil"
+            <div class="Api__view-controls stricky-bottom">
-                        fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <button class="Button__edit btn btn-light">
-                        <path fill-rule="evenodd"
+                    <i class="fas fa-pencil-alt Edit__icon">
-                            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" />
+                        <span class="Button__edit-text"></span>
-                        <path fill-rule="evenodd"
+                    </i>
-                            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>
                 </button>
-                <button class="Button__delete">
+                <button class="Button__delete btn btn-light">
-                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__delete bi bi-trash"
+                    <i class="far fa-trash-alt">
-                        fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <span class="Button__delete-text"></span>
-                        <path
+                    </i>
-                            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" />
+                </button>
-                        <path fill-rule="evenodd"
+                <button class="Button__cancel btn btn-light">
-                            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" />
+                    <i class="fas fa-ban">
-                    </svg>
+                        <span class="Button__cancel-text"></span>
+                    </i>
                 </button>
             </div>
-            <form class="p-3"></form>
         </div>
     </template>
 

src/components/api-table-view-form/ApiTableViewForm.css

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

src/components/api-table-view-form/ApiTableViewForm.js

@@ -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;