Copy button, consistency

This commit is contained in:
Tony Murray
2020-06-21 14:41:43 -05:00
parent 2c82e919f6
commit e3d75a8a09
6 changed files with 75 additions and 18 deletions

View File

@@ -62,6 +62,8 @@ return [
'thanks' => 'Thank you for setting up LibreNMS.',
'statistics' => 'It would be great if you would consider contributing to our statistics, you can do this on the :about and check the box under Statistics.',
'statistics_link' => 'About LibreNMS Page',
'retry' => 'Retry'
'retry' => 'Retry',
'copied' => 'Copied to clipboard',
'manual_copy' => 'Press Ctrl-C to copy',
]
];

View File

@@ -12,11 +12,11 @@
>
<span id="credential-status">
@if($valid_credentials === null)
<i class="fa fa-lg fa-question-circle text-muted"></i>
<i class="fa fa-lg fa-question-circle-o text-muted"></i>
@elseif($valid_credentials)
<i class="fa fa-lg fa-check-circle text-success"></i>
<i class="fa fa-lg fa-check-square-o text-success"></i>
@else
<i class="fa fa-lg fa-times-circle text-danger"></i>
<i class="fa fa-lg fa-times-rectangle-o text-danger"></i>
@endif
</span>
@lang('install.database.credentials')
@@ -82,11 +82,11 @@
>
<span id="migrate-status">
@if($migrated === null)
<i class="fa fa-lg fa-question-circle text-muted"></i>
<i class="fa fa-lg fa-question-circle-o text-muted"></i>
@elseif($migrated)
<i class="fa fa-lg fa-check-circle text-success"></i>
<i class="fa fa-lg fa-check-square-o text-success"></i>
@else
<i class="fa fa-lg fa-times-circle text-danger"></i>
<i class="fa fa-lg fa-times-rectangle-o text-danger"></i>
@endif
</span>
@lang('install.migrate.migrate')
@@ -124,11 +124,11 @@
data: $('#database-form').serialize(),
success: function (response) {
if (response.result === 'ok') {
$('#credential-status>i').attr('class', 'fa fa-lg fa-check-circle text-success');
$('#credential-status>i').attr('class', 'fa fa-lg fa-check-square-o text-success');
$('#migrate-step').show();
$('#db-form-container').collapse('hide')
} else {
$('#credential-status>i').attr('class', 'fa fa-lg fa-times-circle text-danger')
$('#credential-status>i').attr('class', 'fa fa-lg fa-times-rectangle-o text-danger')
if (response.message) {
$('#error-box').append($('<div class="alert alert-danger">' + response.message + '</div>'))
}
@@ -155,7 +155,7 @@
if (output.innerHTML.indexOf('Error!') !== -1) {
// if error word in output, show the retry button
$('#migrate-warning').hide();
$('#migrate-status>i').attr('class', 'fa fa-lg fa-times-circle text-danger')
$('#migrate-status>i').attr('class', 'fa fa-lg fa-times-rectangle-o text-danger')
$('#migrate-btn').removeClass('disabled').text('@lang('install.migrate.retry')')
$('#error-box').append($('<div class="alert alert-danger">@lang('install.migrate.error')</div>'));
}
@@ -171,7 +171,7 @@
$('#migrate-warning').hide();
checkStepStatus(function (status) {
if (status.database.complete) {
$('#migrate-status>i').attr('class', 'fa fa-lg fa-check-circle text-success');
$('#migrate-status>i').attr('class', 'fa fa-lg fa-check-square-o text-success');
$('#migrate-container').collapse('hide');
}
});

View File

@@ -2,11 +2,11 @@
@section('content')
<div class="card mb-2">
<div class="card-header" data-toggle="collapse" data-target="#env-file-text" aria-expanded="{{ $success ? 'false' : 'true' }}">
<div class="card-header h6" data-toggle="collapse" data-target="#env-file-text" aria-expanded="{{ $success ? 'false' : 'true' }}">
@if($success)
<i class="fa fa-lg fa-check-circle text-success"></i>
<i class="fa fa-lg fa-check-square-o text-success"></i>
@else
<i class="fa fa-lg fa-times-circle text-danger"></i>
<i class="fa fa-lg fa-times-rectangle-o text-danger"></i>
@endif
{{ $env_message }}
@if($env)<i class="fa fa-lg fa-chevron-down rotate-if-collapsed pull-right"></i>@endif($env)
@@ -17,13 +17,25 @@
<strong>
@lang('install.finish.env_manual', ['file' => base_path('.env')])
</strong>
<pre class="card bg-light p-3 mt-3">{{ $env }}</pre>
<div class="text-right mt-3">
<button
class="btn btn-sm btn-light text-muted copy-btn"
data-clipboard-target="#env-content"
data-toggle="tooltip"
data-placement="bottom"
data-trigger="manual"
data-title="@lang('install.finish.copied')"
>
<i class="fa fa-clipboard"></i>
</button>
</div>
<pre id="env-content" class="card bg-light p-3">{{ $env }}</pre>
</div>
@endif
</div>
<div class="card mb-2">
<div class="card-header" data-toggle="collapse" data-target="#config-file-text" aria-expanded="false">
<i class="fa fa-lg fa-check-circle text-success"></i>
<div class="card-header h6" data-toggle="collapse" data-target="#config-file-text" aria-expanded="false">
<i class="fa fa-lg fa-check-square-o text-success"></i>
{{ $config_message }}
@if($config)<i class="fa fa-lg fa-chevron-down rotate-if-collapsed pull-right"></i>@endif
</div>
@@ -32,7 +44,19 @@
<strong>
@lang('install.finish.config_not_required')
</strong>
<pre class="card bg-light p-3 mt-3">{{ $config }}</pre>
<div class="text-right mt-3">
<button
class="btn btn-sm btn-light text-muted copy-btn"
data-clipboard-target="#config-content"
data-toggle="tooltip"
data-placement="bottom"
data-trigger="manual"
data-title="@lang('install.finish.copied')"
>
<i class="fa fa-clipboard"></i>
</button>
</div>
<pre id="config-content" class="card bg-light p-3">{{ $config }}</pre>
</div>
@endif
</div>
@@ -55,3 +79,20 @@
</div>
@endif
@endsection
@section('scripts')
<script>
var clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', function(e) {
$(e.trigger).tooltip('show');
setTimeout(() => $(e.trigger).tooltip('hide'), 2000);
e.clearSelection();
});
clipboard.on('error', function(e) {
$(e.trigger).data('title', '@lang('install.finish.manual_copy')').tooltip('show');
setTimeout(() => $(e.trigger).tooltip('hide'), 2000);
});
</script>
@endsection

View File

@@ -9,7 +9,9 @@
<link href="{{ asset(\LibreNMS\Config::get('stylesheet')) }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" type="text/css"/>
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/popper.min.js') }}"></script>
<script src="{{ asset('js/bootstrap4.min.js') }}"></script>
<script src="{{ asset('js/clipboard.min.js') }}"></script>
<style type="text/css">
body {
background-color: #046C8B;