Mirrors/uppy
1
0
Fork 0
mirror of https://github.com/transloadit/uppy.git synced 2026-07-18 00:55:35 +00:00
Code Issues Projects Releases Wiki Activity

Trying out button/icon rendering, style refactoring

Browse source
This commit is contained in:
Artur Paikin 2016-02-25 14:49:43 -05:00
parent 9140f9e5e0
commit ee9c4164d6
2 changed files with 62 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/plugins/Modal.js
View file

@ -45,12 +45,15 @@ export default class Modal extends Plugin {
modalTabs.appendChild(modalTab)
modalTab.outerHTML = `
<li>
<button class="UppyModalTabs-tab"
<li class="UppyModalTab">
<button class="UppyModalTab-btn"
role="tab"
aria-controls="${callerPluginName}"
href="#${callerPluginName}">
${callerPluginName}
<svg class="UppyModalTab-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
<path d="M2.955 14.93l2.667-4.62H16l-2.667 4.62H2.955zm2.378-4.62l-2.666 4.62L0 10.31l5.19-8.99 2.666 4.62-2.523 4.37zm10.523-.25h-5.333l-5.19-8.99h5.334l5.19 8.99z"></path>
</svg>
<span class="UppyModalTab-name">${callerPluginName}</span>
</button>
</li>
`
@ -78,23 +81,10 @@ export default class Modal extends Plugin {
<button class="UppyModal-close" title="Close uploader modal" data-modal-hide>×</button>
<ul class="UppyModalTabs" role="tablist">
<li><button class="UppyModalTabs-tab" role="tab" aria-controls="dragdrop" href="#dragdrop">Dizzy</button></li>
<li><button class="UppyModalTabs-tab" role="tab" aria-controls="dropbox" href="#dropbox">Ninja</button></li>
<li><button class="UppyModalTabs-tab" role="tab" aria-controls="instagram" href="#instagram">Missy</button></li>
</ul>
<ul class="UppyModalTabs" role="tablist"></ul>
<div class="UppyModalСontent"></div>
<div class="UppyModalСontent">
<div class="UppyModalContent-panel" role="tabpanel" id="dragdrop">
123
</div>
<div class="UppyModalContent-panel" role="tabpanel" id="dropbox">
456
</div>
<div class="UppyModalContent-panel" role="tabpanel" id="instagram">
789
</div>
</div>
<div class="UppyModal-progressContainer">
progress here
</div>
@ -115,7 +105,7 @@ export default class Modal extends Plugin {
}
initEvents () {
const tabs = Utils.qsa('.UppyModalTabs-tab')
const tabs = Utils.qsa('.UppyModalTab-btn')
this.tabPanels = []
tabs.forEach(tab => {
const tabId = tab.getAttribute('href')

106
src/scss/_modal.scss
View file

@ -71,9 +71,45 @@ body {
transition: 300ms width;
white-space: nowrap;
width: 55px;
&:hover {
transition: width 300ms ease-out;
width: 200px;
}
&:hover .UppyModalTab-name {
display: inline;
opacity: 1;
transition: opacity 300ms 40ms;
}
}
.UppyModalTabs-tab {
.UppyModalTab {
}
.UppyModalHeader {
background-color: #fff;
padding: 11px 0;
width: 100%;
}
.UppyModalTab-name {
color: #eee;
font-size: 14px;
opacity: 0;
transition: opacity 400ms 40ms;
vertical-align: middle;
}
.UppyModalTab-btn {
width: 100%;
background-color: transparent;
border: 0;
cursor: pointer;
outline: none;
padding: 0;
text-align: left;
margin-bottom: 8px;
padding: 12px;
@ -82,70 +118,32 @@ body {
}
}
// .UppyModalDialog {
// width: 100%;
// }
.UppyModalHeader {
background-color: #fff;
padding: 11px 0;
width: 100%;
}
.UppyModalTabs span {
color: #eee;
font-size: 14px;
opacity: 0;
transition: opacity 400ms 40ms;
vertical-align: middle;
}
.UppyModalTabs:hover span {
display: inline;
opacity: 1;
transition: opacity 300ms 40ms;
}
.UppyModalTabs:hover {
transition: width 300ms ease-out;
width: 200px;
}
.UppyModalTabs-tab {
background-color: transparent;
border: 0;
cursor: pointer;
outline: none;
padding: 0;
text-align: center;
}
.UppyModalTabs-tab svg {
.UppyModalTab-icon {
fill: #eee;
margin-right: 8px;
width: 28px;
vertical-align: middle;
}
.tab span {
.UppyModalTab-name {
display: inline-block;
}
.UppyModalHeader-logo svg {
fill: #eee;
width: 20px;
}
// .UppyModalHeader-logo svg {
// fill: #eee;
// width: 20px;
// }
.UppyModalHeader-logo {
background-color: #78bdf2;
padding: 10px 17px 6px 17px;
}
// .UppyModalHeader-logo {
// background-color: #78bdf2;
// padding: 10px 17px 6px 17px;
// }
.UppyModalHeader-title {
font-size: 14px;
text-align: center;
vertical-align: middle;
}
// .UppyModalHeader-title {
// font-size: 14px;
// text-align: center;
// vertical-align: middle;
// }
.UppySidebarTab--instagram svg {
width: 26px;