Floating Action Button aka FAB (Material Google inspired) :)

[dontpanic]

Hey guys
I managed to add a fab in my website bcoz in the top upload cta the "Add image URLs" was kind of hidden and is a nice feature i can tell...
Btw @Rodolfo is it possible to add a website url and fetch images? That would be pretty cool 😉

Checkout the gif or go to http://www.lillipaint.com

To do so you have to edit the footer.php hook and add the following

<?php if(is_upload_allowed()) { ?>
<div id="container-floating">
     <a data-trigger="anywhere-upload-input">
       <div class="tooltip">
       <div class="nd1 nds" data-toggle="tooltip" data-placement="left" data-original-title="Browse from your computer"><span class="tooltiptext">Browse & Upload</span><img class="reminder" src="http://lillipaint.com/app/themes/Lilli/theme-img/upload_white.svg" alt="Browse from your computer" title="Browse from your computer" height="20" width="20">
       </div></div>
     </a>
     <a data-modal="form" data-target="anywhere-upload-paste-url">
       <div class="tooltip">
       <div class="nd2 nds" data-toggle="tooltip" data-placement="left" data-original-title="Add image URLs"><span class="tooltiptext">Add Image URLs</span><img class="reminder" src="http://lillipaint.com/app/themes/Lilli/theme-img/link_white.svg" alt="Add image URLs" title="Add image URLs" height="20" width="20">
       </div></div>
     </a>
   <div id="floating-button" class="tooltip" data-toggle="tooltip" data-placement="left" data-original-title="Create">
  <p class="plus">+</p>
   <span style="bottom: 13px; width: 150px;" class="tooltiptext">Upload or Add URLs</span>
  <img class="edit" src="http://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/bt_compose2_1x.png">
</div>
<?php } ?>

Also in style.css hook add the following

/* Add your custom CSS here */
#floating-button{
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #b971f7;
  position: fixed;
  bottom: 30px;
  right: 30px;
  cursor: pointer;
  box-shadow: 5px 5px 10px RGBA(176, 150, 150, 0.62);
}

.plus{
  color: white;
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 62px;
  font-size: 38px;
  font-family: 'Roboto';
  font-weight: 300;
  animation: plus-out 0.3s;
  transition: all 0.3s;
}

#container-floating{
  position: fixed;
  width: 70px;
  height: 70px;
  bottom: 30px;
  right: 30px;
  z-index: 50px;
}

#container-floating:hover{
  height: 400px;
  width: 90px;
  padding: 30px;
}

#container-floating:hover .plus{
  animation: plus-in 0.15s linear;
  animation-fill-mode: forwards;
}

.edit{
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  display: block;
  right: 0;
  padding: 0;
  opacity: 0;
  margin: auto;
  line-height: 65px;
  transform: rotateZ(-70deg);
  transition: all 0.3s;
  animation: edit-out 0.3s;
}

#container-floating:hover .edit{
  animation: edit-in 0.2s;
   animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

@keyframes edit-in{
    from {opacity: 0; transform: rotateZ(-70deg);}
    to {opacity: 1; transform: rotateZ(0deg);}
}

@keyframes edit-out{
    from {opacity: 1; transform: rotateZ(0deg);}
    to {opacity: 0; transform: rotateZ(-70deg);}
}

@keyframes plus-in{
    from {opacity: 1; transform: rotateZ(0deg);}
    to {opacity: 0; transform: rotateZ(180deg);}
}

@keyframes plus-out{
    from {opacity: 0; transform: rotateZ(180deg);}
    to {opacity: 1; transform: rotateZ(0deg);}
}

.nds{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: fixed;
  z-index: 300;
  transform:  scale(0);
  cursor: pointer;
}

.nd1 {
    background: #f3d840;
    right: 38px;
    bottom: 110px;
    animation-delay: 0.2s;
    animation: bounce-out-nds 0.3s linear;
    animation-fill-mode: forwards;
    box-shadow: 0px 2px 5px RGBA(176, 150, 150, 0.23);
}

.nd2 {
    background: #f86bce;
    right: 38px;
    bottom: 175px;
    animation-delay: 0.15s;
    animation: bounce-out-nds 0.15s linear;
    animation-fill-mode: forwards;
    box-shadow: 0px 2px 5px RGBA(176, 150, 150, 0.23);
}

.nd3{
  background: #3c80f6;
  right: 40px;
  bottom: 180px;
  animation-delay: 0.15s;
    animation: bounce-out-nds 0.15s linear;
  animation-fill-mode:  forwards;
}

.nd4{
  background: #ba68c8;
  right: 40px;
  bottom: 240px;
  animation-delay: 0.1s;
    animation: bounce-out-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

.nd5{
  background-image: url('https://lh3.googleusercontent.com/-X-aQXHatDQY/Uy86XLOyEdI/AAAAAAAAAF0/TBEZvkCnLVE/w140-h140-p/fb3a11ae-1fb4-4c31-b2b9-bf0cfa835c27');
  background-size: 100%;
  right: 40px;
  bottom: 300px;
  animation-delay: 0.08s;
  animation: bounce-out-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

@keyframes bounce-nds{
    from {opacity: 0;}
    to {opacity: 1; transform: scale(1);}
}

@keyframes bounce-out-nds{
    from {opacity: 1; transform: scale(1);}
    to {opacity: 0; transform: scale(0);}
}

#container-floating:hover .nds{
 
  animation: bounce-nds 0.1s linear;
  animation-fill-mode:  forwards;
}

#container-floating:hover .nd3{
  animation-delay: 0.08s;
}
#container-floating:hover .nd4{
  animation-delay: 0.15s;
}
#container-floating:hover .nd5{
  animation-delay: 0.2s;
}

.letter{
  font-size: 23px;
  font-family: 'Roboto';
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  line-height: 40px;
}

.reminder{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  line-height: 40px;
}

.profile{
  border-radius: 50%;
  width: 30px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 20px;
}


.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 0px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 135px;
    background-color: #555;
    color: #fff;
    text-align: right;
    border-radius: 3px;
    padding: 8px 13px;
    position: absolute;
    z-index: 1;
    bottom: 5px;
    right: 95%;
    margin-right: 20px;
    opacity: 0;
    transition: opacity 1s;
    font-size:.85em;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #555;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

There may be some extra tags -- remove at your will.

 

[Rodolfo]

Looks very neat, very good job there.

I don't fully understand your question, you want to input a website url and let the system fetch all images in that website?

 

[Da' Pimp]

I THINK he's talking about what I started a thread about the other day. But I think his idea is more about adding something like the pic below (since the "Add image URLs" is kind of hidden up top) instead of my idea of the "Start Upload" button activating the drop down menu already in place. Im in full favor of anything like this.

 

[dontpanic]

Well not exactly @Da' Pimp
I was thinking something like Pinterest. You add a website link and grabs one or more images..
Then check/uncheck which ones you want to upload..

It;s a tricky feature dont know if anyone needs this. We should poll it..