Added function url field and copy action to the UI

This change adds a function URL field to the UI and a 'copy to
clipboard' button next to it. If the browser does not support the copy
command, the copy icon will be hidden.

Signed-off-by: Ken Fukuyama <kenfdev@gmail.com>
This commit is contained in:
Ken Fukuyama 2018-07-13 23:28:44 +09:00 committed by Alex Ellis
parent e6a3658ac3
commit db465b82a4
4 changed files with 47 additions and 0 deletions

View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Bounding_Boxes">
<g id="ui_x5F_spec_x5F_header_copy_3" display="none">
</g>
<path fill="none" d="M0,0h24v24H0V0z"/>
</g>
<g id="Outline">
<g id="ui_x5F_spec_x5F_header" display="none">
</g>
<g>
<path d="M16,1H4C2.9,1,2,1.9,2,3v14h2V3h12V1z"/>
<path d="M15,5H8C6.9,5,6.01,5.9,6.01,7L6,21c0,1.1,0.89,2,1.99,2H19c1.1,0,2-0.9,2-2V11L15,5z M8,21V7h6v5h5v9L8,21z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 747 B

View File

@ -123,6 +123,11 @@
<label>Image</label>
<input ng-model="function.image" type="text" readonly="readonly">
</md-input-container>
<md-input-container class="md-block function-url" flex-gt-sm>
<label>URL</label>
<input ng-value="baseUrl + 'function/' + function.name" type="text" readonly="readonly">
<md-icon ng-if="canCopyToClipboard" md-svg-src="img/icons/outline-file_copy-24px.svg" ng-click="copyClicked($event)"></md-icon>
</md-input-container>
</div>
<div layout-gt-sm="row" ng-show="function.envProcess">
<md-input-container class="md-block" flex-gt-sm>

View File

@ -21,6 +21,25 @@ app.controller("home", ['$scope', '$log', '$http', '$location', '$interval', '$f
contentType: "text"
};
$scope.baseUrl = $location.absUrl().replace(/\ui\/$/, '');
try {
$scope.canCopyToClipboard = document.queryCommandSupported('copy');
} catch (err) {
console.error(err);
$scope.canCopyToClipboard = false;
}
$scope.copyClicked = function(e) {
e.target.parentElement.querySelector('input').select()
var copySuccessful = false;
try {
copySuccessful = document.execCommand('copy');
} catch (err) {
console.error(err);
}
var msg = copySuccessful ? 'Copied to Clipboard' : 'Copy failed. Please copy it manually';
showPostInvokedToast(msg);
}
$scope.toggleSideNav = function() {
$mdSidenav('left').toggle();
};

View File

@ -104,4 +104,9 @@ md-icon {
md-icon.link {
fill: #303AA5;
}
md-input-container.function-url md-icon {
display: inline-block;
cursor: pointer;
}