jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add initial upgrade button version

Browse Source 
This is currently always hidden
This commit is contained in:
Johannes Zellner
2016-04-08 13:57:19 +02:00
parent 275d8c2121
commit 103c0bd688
3 changed files with 77 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
webadmin/src/index.html
View File

@@ -167,6 +167,15 @@
</div>
</div>
<div class="upgrade hide">
<div class="content">
<h4>Your Cloudron trial ends soon</h4>
<p>To keep your Cloudron, just <a href="https://cloudron.io/console.html#/billing" target="_blank">setup a payment method at cloudron.io</a> or <a href="mailto: support@cloudron.io">send us a mail</a>.</p>
</div>
<div class="trigger">Keep your Cloudron</div>
</div>
<!-- Footer -->
<footer class="text-center">
<span class="text-muted">Copyright &copy; <a href="https://cloudron.io" target="_blank">Cloudron</a> 2014-16</span>

10
webadmin/src/js/main.js
View File

@@ -134,6 +134,16 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
}
});
$('.upgrade .trigger').hover(function () {
$('.upgrade .content')[0].classList.add('active');
$('.upgrade .trigger')[0].classList.add('active');
});
$('.upgrade').hover(function () {}, function () {
$('.upgrade .content')[0].classList.remove('active');
$('.upgrade .trigger')[0].classList.remove('active');
});
// setup all the dialog focus handling
['updateModal'].forEach(function (id) {
$('#' + id).on('shown.bs.modal', function () {

59
webadmin/src/theme.scss
View File

@@ -582,7 +582,7 @@ footer {
color: #555;
font-size: 14px;
padding: 5px;
z-index: 10000;
z-index: 1000;
opacity: 0.5;
transition: all 250ms;
}
@@ -940,3 +940,60 @@ $graphs-success-alt: lighten(#27CE65, 20%);
text-overflow: ellipsis;
white-space: nowrap;
}
// ----------------------------
// Upgrade
// ----------------------------
.upgrade {
position: fixed;
right: 10px;
bottom: 30px;
color: white;
z-index: 1200;
text-align: right;
.content {
height: 0;
overflow: hidden;
transition: height 250ms;
background-color: #00A500;
text-align: left;
border-radius: 0;
transition: all 250ms;
box-shadow: 0 3px 5px rgba(0,0,0,.5);
a {
color: white;
text-decoration: underline;
&:hover {
font-weight: bold;
}
}
&.active {
padding: 10px;
border-radius: 5px;
border-bottom-right-radius: 0;
height: auto;
}
}
.trigger {
cursor: pointer;
padding: 4px 10px;
display: inline-block;
font-size: 18px;
background-color: #00A500;
border-radius: 5px;
transition: all 250ms;
box-shadow: 0 3px 5px rgba(0,0,0,.5);
&.active {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
}