open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

manage: use svg icons in messageBox()

Browse Source
This commit is contained in:
tophf 2017-04-03 02:18:43 +03:00
parent 8b2226936d
commit 0ceff44000
3 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
manage.html
View File

@ -110,6 +110,9 @@
<symbol id="svg-icon-external-link" height="16" width="16" viewBox="0 0 8 8"> <symbol id="svg-icon-external-link" height="16" width="16" viewBox="0 0 8 8">
<path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"></path> <path d="M0 0v8h8v-2h-1v1h-6v-6h1v-1h-2zm4 0l1.5 1.5-2.5 2.5 1 1 2.5-2.5 1.5 1.5v-4h-4z"></path>
</symbol> </symbol>
<symbol id="svg-icon-close" height="16" width="12" viewBox="0 0 12 16">
<path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"></path>
</symbol>
</svg> </svg>
<script src="manage.js"></script> <script src="manage.js"></script>

12
msgbox/msgbox.css
View File

@ -78,15 +78,15 @@
font-weight: bold; font-weight: bold;
} }
#message-box.danger #message-box-close-icon svg:hover {
fill: #600;
}
#message-box-close-icon { #message-box-close-icon {
cursor: pointer; cursor: pointer;
width: 8px;
height: 8px;
border: 8px solid transparent;
position: absolute; position: absolute;
right: 0; right: 3px;
top: 0; top: 7px;
background: linear-gradient(-45deg, transparent 5px, black 5px, black 6px, transparent 6.5px) no-repeat, linear-gradient(45deg, transparent 5px, black 5px, black 6px, transparent 6.5px) no-repeat;
} }
#message-box-contents { #message-box-contents {

5
msgbox/msgbox.js
View File

@ -55,7 +55,10 @@ function messageBox({
messageBox.element = $element({id, className, appendChild: [ messageBox.element = $element({id, className, appendChild: [
$element({appendChild: [ $element({appendChild: [
$element({id: `${id}-title`, innerHTML: title}), $element({id: `${id}-title`, innerHTML: title}),
$element({id: `${id}-close-icon`, onclick: messageBox.listeners.closeIcon}), $element({
id: `${id}-close-icon`,
innerHTML: '<svg class="svg-icon"><use xlink:href="#svg-icon-close"/></svg>',
onclick: messageBox.listeners.closeIcon}),
$element({id: `${id}-contents`, [putAs]: contents}), $element({id: `${id}-contents`, [putAs]: contents}),
$element({id: `${id}-buttons`, appendChild: $element({id: `${id}-buttons`, appendChild:
buttons.map((textContent, buttonIndex) => textContent && buttons.map((textContent, buttonIndex) => textContent &&