Unverified Commit 1d0f07f3 authored by Fernando Verdugo's avatar Fernando Verdugo Committed by GitHub
Browse files

Feat/1317 description (#1318)

feature(frontend): Show description mouseover VM

Issue #1317
parent 50397f13
......@@ -130,14 +130,14 @@ Returns: listref of machines
sub list_machines_user($self, $user, $access_data={}) {
my $sth = $CONNECTOR->dbh->prepare(
"SELECT id,name,is_public, screenshot"
"SELECT id,name,is_public, description, screenshot"
." FROM domains "
." WHERE is_base=1"
." ORDER BY name "
);
my ($id, $name, $is_public, $screenshot);
my ($id, $name, $is_public, $description, $screenshot);
$sth->execute;
$sth->bind_columns(\($id, $name, $is_public, $screenshot ));
$sth->bind_columns(\($id, $name, $is_public, $description, $screenshot));
my @list;
while ( $sth->fetch ) {
......@@ -151,6 +151,7 @@ sub list_machines_user($self, $user, $access_data={}) {
my %base = ( id => $id, name => $name
, is_public => ($is_public or 0)
, screenshot => ($screenshot or '')
, description => ($description or '')
, is_active => 0
, id_clone => undef
, name_clone => undef
......@@ -171,6 +172,8 @@ sub list_machines_user($self, $user, $access_data={}) {
$base{name_clone} = $clone->name;
$base{screenshot} = ( $clone->_data('screenshot')
or $base{screenshot});
$base{description} = ( $clone->_data('description')
or $base{description});
$base{is_active} = $clone->is_active;
$base{id_clone} = $clone->id;
$base{can_remove} = 0;
......
......@@ -863,3 +863,6 @@ msgstr ""
msgid "Enable last for not allowed restrictions."
msgstr ""
msgid "Add description"
msgstr ""
......@@ -393,4 +393,49 @@ ul.alert-dropdown {
.show>.nav-pills .nav-link{
color: white;
background-color: #d73a49 !important
}
\ No newline at end of file
}
.container {
position: relative;
width: 100%;
height: auto;
padding-right: 0;
padding-left: 0;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0.5); /*#008CBA;*/
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
border-top-left-radius: calc(-1px + 0.25rem);
border-top-right-radius: calc(-1px + 0.25rem);
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border: 5px solid #FFFFFF;
pointer-events: none;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 17px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
......@@ -142,6 +142,7 @@
for (var i = 0; i < data.length; i++) {
if ( !$scope.machines[i] || $scope.machines[i].id != data[i].id ) {
$scope.machines[i] = data[i];
$scope.machines[i].description = data[i].description;
} else {
$scope.machines[i].can_hibernate = data[i].can_hibernate;
$scope.machines[i].id= data[i].id;
......@@ -152,6 +153,7 @@
$scope.machines[i].name = data[i].name;
$scope.machines[i].name_clone = data[i].name_clone;
$scope.machines[i].screenshot = data[i].screenshot;
$scope.machines[i].description = data[i].description;
}
if ( data[i].is_public == 1) {
$scope.public_bases++;
......
......@@ -8,7 +8,7 @@
$_anonymous=<%= ($_anonymous or 0) %>;
</script>
<div id="page-wrapper" ng-controller="bases" ng-init="anonymous=<%= $_anonymous or 0 %>;subscribe_list_machines_user('<%= url_for('ws_subscribe')->to_abs %>', $scope)">
<div id="page-wrapper" ng-controller="bases" ng-init="is_admin=<%= $user->is_admin %>;anonymous=<%= $_anonymous or 0 %>;subscribe_list_machines_user('<%= url_for('ws_subscribe')->to_abs %>', $scope)">
%= include 'main/list_bases_ng_head'
<!--MACHINES SELECTION-->
<div class="card-body">
......@@ -23,17 +23,23 @@
role="button">{{machine.name}}</a>
<i ng-show="!machine.is_public"><i class="far fa-eye-slash fa-xs" title="<%=l 'not public' %>"></i></i>
</h3>
<div class="container">
<a ng-show="machine.screenshot" href="/machine/clone/{{machine.id}}.html"><img
ng-src="data:image/png;base64,{{machine.screenshot}}" alt="{{machine.description}}" class="img-thumbnail" width="260"
ng-src="data:image/png;base64,{{machine.screenshot}}" alt="{{machine.name}}" class="img-thumbnail" width="260"
></a>
<a ng-show="!machine.screenshot" href="/machine/clone/{{machine.id}}.html"><img
src="/img/default_screenshot.png" class="screenshot-default img-thumbnail"
alt="{{machine.description}}"
width="260"></a>
alt="{{machine.name}}" width="260"
></a>
<div ng-show="machine.description || (!machine.description && is_admin)" class="overlay">
<div ng-show="machine.description" class="text" ng-bind-html="machine.description"></div>
<div ng-show="!machine.description" class="text"><a style="background-color: white; pointer-events: auto;" href="/machine/manage/{{machine.id}}.html#v-pills-description"><%=l 'Add description' %></a></div>
</div>
</div>
</div>
<div class="card-body" id="step2">
<div class="row">
<a type="button" class="btn btn-success" ng-hide="machine.action"
<a type="button" class="btn btn-success mr-2" ng-hide="machine.action"
href="/machine/clone/{{machine.id}}.html"><strong><i class="fa fa-play" aria-hidden="true"></i>&nbsp;<%=l 'Start' %></strong></a>
<a type="button" class="btn btn-danger text-white"
ng-show="machine.id_clone && !machine.is_active && machine.can_remove && !host_restore"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment