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

HM-50. Сделан универсальный компонент модалки (#19)

Browse Source
This commit is contained in:
Nikolay
2020-07-18 14:24:04 +03:00
committed by GitHub
parent 24f9b80ad6
commit d01ee79202
5 changed files with 158 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/app.html
View File

@ -9,18 +9,12 @@
<body>
<!-- Шаблон верхнего меню -->
<template id='main-menu'>
<template id="main-menu">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="Logo__box">
</div>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
@ -52,45 +46,71 @@
</div>
</template>
<!-- Шаблон Modal -->
<template id="universal-modal">
<div class="Modal">
<div class="Modal__window modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
</div>
</template>
<!-- Шаблон кнопки -->
<template id="test-button">
<button type="button" class="btn btn-primary">Проверка сборки</button>
</template>
<!-- Шаблон колонки таблицы -->
<template id="table-column">
<th scope='col' class='Table__column'></th>
<!-- Шаблон колонки таблицы -->
<template id="table-column">
<th scope="col" class="Table__column"></th>
</template>
<!-- Шаблон строки таблицы -->
<template id="table-row">
<!-- Шаблон строки таблицы -->
<template id="table-row">
<tr class="Table__body-row">
<th class="Body__row-index"></th>
<th class="Body__row-index"></th>
</tr>
</template>
<!-- Шаблон главной таблицы -->
<template id="main-table">
<table class="table table-striped">
<thead class="Table__head">
<tr class='Table__head-row'>
<th scope='col' class='Table__column'>#</th>
</tr>
<thead class="Table__head">
<tr class="Table__head-row">
<th scope="col" class="Table__column">#</th>
</tr>
</thead>
<tbody class='Table__body'>
<tbody class="Table__body">
</tbody>
</table>
</template>
<!-- Шаблон информации об апи -->
<template id="api-info">
<!-- Шаблон информации об апи -->
<template id="api-info">
<div class="card text-center Info__container">
<div class="card-header">
<h1 class="Info__title"></h1>
<div class="Info__controls">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="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 width="1em" height="1em" viewBox="0 0 16 16" class="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>
<svg width="1em" height="1em" viewBox="0 0 16 16" class="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 width="1em" height="1em" viewBox="0 0 16 16" class="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>
</div>
</div>
@ -100,7 +120,7 @@
<code contenteditable class="Info__editor"></code>
</div>
<div class="Info__footer card-footer text-muted">
</div>
</div>
</template>