Skip to content

Commit

Permalink
Merge pull request #30 from emrysr/feature/issue-29-prompt-user-to-us…
Browse files Browse the repository at this point in the history 
…e-device-template

Feature/issue 29 prompt user to use device template
  • Loading branch information
@TrystanLea
TrystanLea authored Oct 26, 2018
2 parents da1ecfb + d91eed5 commit a1e063b
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 30 deletions.
98 changes: 98 additions & 0 deletions Views/device_dialog.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,3 +166,101 @@
.table-inputs td:nth-of-type(3) { width:5%; }
.table-inputs td:nth-of-type(4) { width:10%; }
.table-inputs td:nth-of-type(5) { width:25%; }


.modal {
margin: 0;
border-radius: 0;
border: none;
width: 100%;
left: 0;
top: 3%;
}
#device-config-body {
padding: 0
}
.modal .accordion-toggle {
white-space: nowrap;
overflow: hidden;
}
#device-content {
left: 0.2rem;
margin-left: 0;
transition: width 0.5s ease-in-out;
}
#device-sidebar-close {
cursor: pointer;
position: absolute;
right: 0;
top: .5em;
line-height: 1.3;
background: #f2f2f2;
padding: .3em .6em;
}
#device-sidebar {
transition: width 0.3s ease-in-out;
width: 0;
}
#device-sidebar.show {
width: 100%;
}
.key {
font-size: 12px !important;
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}
.modal .modal-content {
margin-top: 0
}
.modal .modal-sidebar {
margin: 0
}

/* add horizontal padding to devices larger than iphone5 (320px)*/
@media (min-width: 340px) {
.modal {
margin: 0 auto
}
.modal .modal-sidebar {
margin: 0 -1rem
}
#device-content {
left: 15px;
}
#device-config-body {
padding: 0 1rem
}
}

@media (min-width: 680px) {
#device-sidebar.show {
width: 250px;
transition: none;
}
#device-content {
left: 270px;
}
.modal {
margin: 0;
border-radius: 6px;
border: 1px solid rgba(0,0,0,0.3);
width: 94%;
left: 3%;
}
.modal .modal-sidebar {
margin: 0 -1rem
}

}

/* hide/show items on very small devices */
.visible-xs {
display: none
}
@media (max-width: 375px) {
.hidden-xs {
display: none
}
.visible-xs {
display: inline-block
}
}
38 changes: 14 additions & 24 deletions Views/device_dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,9 +152,11 @@ var device_dialog =
$("#device-save").html("Save");
if (this.device.type != null && this.device.type != '') {
$("#device-init").show();
}
else {
$('#select-device-alert').addClass('hidden')
} else {
$("#device-init").hide();
$('#device-sidebar').addClass('show')
$('#select-device-alert').removeClass('hidden')
}
}
else {
Expand Down Expand Up @@ -183,23 +185,11 @@ var device_dialog =
if (width < 680) {
$("#device-sidebar-open").show();
$("#device-sidebar-close").show();

$("#device-sidebar").css("transition","0.5s");
$("#device-sidebar").css("width","0");

$("#device-content").css("transition","0.5s");
$("#device-content").css("margin-left","0");
$("#device-config-modal").css("margin-left","0").css("margin-right","0");
$("#device-sidebar").removeClass('show')
} else {
$("#device-sidebar-open").hide();
$("#device-sidebar-close").hide();

$("#device-sidebar").css("transition","0");
$("#device-sidebar").css("width","250px");

$("#device-content").css("transition","0");
$("#device-content").css("margin-left","250px");
$("#device-config-modal").css("margin-left","auto").css("margin-right","auto");
$("#device-sidebar").addClass('show')
}
},

Expand All @@ -225,19 +215,19 @@ var device_dialog =
$('#template-info').hide();
$("#device-init").show()
}
if ($(window).width() < 1024) {
$("#device-sidebar").css("width","0");
if ($(window).width() < 680) {
$("#device-sidebar").removeClass('show')
}

device_dialog.drawTemplate();
});

$("#device-sidebar-open").off('click').on('click', function () {
$("#device-sidebar").css("width","250px");
$("#device-sidebar").addClass('show')
});

$("#device-sidebar-close").off('click').on('click', function () {
$("#device-sidebar").css("width","0");
$("#device-sidebar").removeClass('show')
});

$("#device-save").off('click').on('click', function () {
Expand Down Expand Up @@ -322,8 +312,8 @@ var device_dialog =
return;
}

console.log("deviceType:"+device_dialog.deviceType)
console.log(device_dialog.templates)
// console.log("deviceType:"+device_dialog.deviceType)
// console.log(device_dialog.templates)
var template = device_dialog.templates[device_dialog.deviceType];
$('#template-description').html('<em style="color:#888">'+template.description+'</em>');
$('#template-info').show();
Expand Down
18 changes: 12 additions & 6 deletions Views/device_dialog.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,14 @@
<div id="device-config-body" class="modal-body">
<div id="device-sidebar" class="modal-sidebar">
<h3 style="padding-left:10px;">
<span><?php echo _('Devices'); ?></span>
<span id="device-sidebar-close" style="float:right; cursor:pointer;"><i class="icon-remove" style="margin:8px;"></i></span>
<span><?php echo _('Devices'); ?></span>
<span id="device-sidebar-close"><i class="icon-remove"></i></span>
</h3>
<div id="select-device-alert" class="hidden" style="max-height: 3rem; overflow: hidden">
<div class="alert" style="border: 0; line-height: 1.1; margin-bottom: 0; padding-left: .8em; border-radius: 0;">
<?php echo _('Please select the correct device template to setup your device:'); ?>
</div>
</div>
<div style="overflow-x: hidden; width:100%">
<div id="template-list" class="accordion"></div>
</div>
Expand Down Expand Up @@ -47,15 +52,16 @@

<label><b><?php echo _('Device Key'); ?></b></label>
<div class="input-append">
<input id="device-config-devicekey" class="input-large" type="text" style="width:260px">
<input id="device-config-devicekey" class="input-large key" type="text" style="width:245px;">
<button id="device-config-devicekey-new" class="btn"><?php echo _('New'); ?></button>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"><?php echo _('Cancel'); ?></button>
<button id="device-delete" class="btn btn-danger" style="cursor:pointer"><i class="icon-trash icon-white"></i> <?php echo _('Delete'); ?></button>
<button id="device-init" class="btn btn-primary"><i class="icon-refresh icon-white"></i> <?php echo _('Initialize'); ?></button>
<button class="btn hidden-xs" data-dismiss="modal" aria-hidden="true"><?php echo _('Cancel'); ?></button>
<button class="btn visible-xs pull-left" title="<?php echo _('Cancel'); ?>" style="margin-left:0;font-weight:bold" data-dismiss="modal" aria-hidden="true" type="button">×</button>
<button id="device-delete" class="btn btn-danger" style="cursor:pointer"><i class="icon-trash icon-white hidden-xs"></i> <?php echo _('Delete'); ?></button>
<button id="device-init" class="btn btn-primary"><i class="icon-refresh icon-white hidden-xs"></i> <?php echo _('Initialize'); ?></button>
<button id="device-save" class="btn btn-primary"><?php echo _('Save'); ?></button>
</div>
</div>
Expand Down

0 comments on commit a1e063b

Please sign in to comment.