Browse Source

[WebUI] Replace spinner with animated glyphicon

tags/1.5.0
Alexander Moisseev 7 years ago
parent
commit
c5d4c5395d
5 changed files with 18 additions and 31 deletions
  1. 13
    28
      interface/css/rspamd.css
  2. BIN
      interface/img/spinner.gif
  3. BIN
      interface/img/spinner.png
  4. 2
    2
      interface/index.html
  5. 3
    1
      interface/js/rspamd.js

+ 13
- 28
interface/css/rspamd.css View File

font-size:11px !important; font-size:11px !important;
} }


/* spinners optional */
input {
margin:0px;
padding:0px;
width:60px;
}
input[type=number] {
padding-right:25px; /* at least image width */
text-align:right;
width:60px;
}
input.number { /* should be same as type=number for IE and overriding */
padding-right:25px; /* at least image width */
text-align:right;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display:none; <- Crashes Chrome on hover */
-webkit-appearance:none;
margin:0; /* <-- Apparently some margin are still there even though it's hidden */
}

/* history table */ /* history table */
.table-log { .table-log {
table-layout:fixed; table-layout:fixed;
color:#005580; color:#005580;
text-decoration:underline; text-decoration:underline;
} }
.spinner {
background:url('../img/spinner.gif') no-repeat -100px;
}
.loading .spinner {
background-position:0 50%;
}

/* Glyphicons animated spinners */
.loading .glyphicon-spin {
animation: spin 1000ms infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}


/* widget */ /* widget */
.widget-box { .widget-box {

BIN
interface/img/spinner.gif View File


BIN
interface/img/spinner.png View File


+ 2
- 2
interface/index.html View File

<li role="presentation"><a id="history_nav" aria-controls="history" role="tab" href="#history" data-toggle="tab">History</a></li> <li role="presentation"><a id="history_nav" aria-controls="history" role="tab" href="#history" data-toggle="tab">History</a></li>
</ul> </ul>
<ul class="nav navbar-nav nav-pills pull-right" style="display:none"> <ul class="nav navbar-nav nav-pills pull-right" style="display:none">
<li><a href="#" data-toggle="tab" id="refresh"><i class="glyphicon glyphicon-refresh"></i> Refresh</a></li>
<li class="spinner"><a href="#" data-toggle="tab" id="disconnect"><i class="glyphicon glyphicon-off"></i> Disconnect</a></li>
<li><a href="#" data-toggle="tab" id="refresh"><i class="glyphicon glyphicon-refresh glyphicon-spin"></i> Refresh</a></li>
<li><a href="#" data-toggle="tab" id="disconnect"><i class="glyphicon glyphicon-off"></i> Disconnect</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>

+ 3
- 1
interface/js/rspamd.js View File

$('#navBar').addClass('loading'); $('#navBar').addClass('loading');
}); });
$(document).ajaxComplete(function () { $(document).ajaxComplete(function () {
$('#navBar').removeClass('loading');
setTimeout(function () {
$('#navBar').removeClass('loading');
}, 1000);
}); });
$('#status_nav').bind('click', function (e) { $('#status_nav').bind('click', function (e) {
getChart(); getChart();

Loading…
Cancel
Save