From 0b99a3521e73ac2d9af3c1e4e18f8f6bc081bde7 Mon Sep 17 00:00:00 2001 From: juanvallejo Date: Mon, 14 Nov 2016 16:10:27 -0500 Subject: [PATCH] Add ability to copy commands in cli tools page --- app/scripts/directives/util.js | 13 ++++++++++--- app/styles/_core.less | 2 +- app/views/command-line.html | 12 +++++------- app/views/directives/_copy-to-clipboard.html | 14 ++++++++++---- dist/scripts/scripts.js | 14 +++++++++----- dist/scripts/templates.js | 19 +++++++++---------- dist/styles/main.css | 2 +- 7 files changed, 45 insertions(+), 31 deletions(-) diff --git a/app/scripts/directives/util.js b/app/scripts/directives/util.js index c72cb21d93..876f7a4240 100644 --- a/app/scripts/directives/util.js +++ b/app/scripts/directives/util.js @@ -76,7 +76,9 @@ angular.module('openshiftConsole') restrict: 'E', scope: { clipboardText: "=", - isDisabled: "=?" + isDisabled: "=?", + displayWide: "=?", + inputText: "=?" }, templateUrl: 'views/directives/_copy-to-clipboard.html', controller: function($scope) { @@ -88,8 +90,13 @@ angular.module('openshiftConsole') return; } - var node = $('a', element); - var clipboard = new Clipboard( node.get(0) ); + var nodeElem = $('a', element); + var node = nodeElem.get(0); + if ($scope.inputText) { + node = nodeElem.get(1); + } + + var clipboard = new Clipboard( node ); clipboard.on('success', function (e) { $(e.trigger) .attr('title', 'Copied!') diff --git a/app/styles/_core.less b/app/styles/_core.less index 6385873165..7f888b0651 100644 --- a/app/styles/_core.less +++ b/app/styles/_core.less @@ -1205,7 +1205,7 @@ h1 small.meta, .build-config-summary .meta { } // don't allow copy-to-clipboard .input-groups get bigger than 600px so Github webhook secrets aren't revealed within the input-group -copy-to-clipboard .input-group { +copy-to-clipboard .input-group.limit-width { max-width: 300px; } diff --git a/app/views/command-line.html b/app/views/command-line.html index 09b6780e41..ec2c352807 100644 --- a/app/views/command-line.html +++ b/app/views/command-line.html @@ -37,30 +37,28 @@

Command Line Tools

After downloading and installing it, you can start by logging in using this current session token: -

- oc login {{loginBaseURL}} --token={{sessionToken}}...click to show token... -
+ 
                       oc login {{loginBaseURL}}

-
+
A token is a form of a password. Do not share your API token.

After you login to your account you will get a list of projects that you can switch between: - 

oc project project-name
+

If you do not have any existing projects, you can create one: - 

oc new-project project-name
+

To show a high level overview of the current project: - 

oc status
+

For other information about the command line tools, check the CLI Reference and Basic CLI Operations.

diff --git a/app/views/directives/_copy-to-clipboard.html b/app/views/directives/_copy-to-clipboard.html index db6e3ff322..e8ed444d66 100644 --- a/app/views/directives/_copy-to-clipboard.html +++ b/app/views/directives/_copy-to-clipboard.html @@ -1,11 +1,17 @@ -
- +
+ - + -
+
\ No newline at end of file diff --git a/dist/scripts/scripts.js b/dist/scripts/scripts.js index f37d66c7ae..61a29588ba 100644 --- a/dist/scripts/scripts.js +++ b/dist/scripts/scripts.js @@ -9756,7 +9756,9 @@ return { restrict:"E", scope:{ clipboardText:"=", -isDisabled:"=?" +isDisabled:"=?", +displayWide:"=?", +inputText:"=?" }, templateUrl:"views/directives/_copy-to-clipboard.html", controller:[ "$scope", function(a) { @@ -9764,14 +9766,16 @@ a.id = _.uniqueId("clipboardJs"); } ], link:function(b, c) { if (a) return void (b.hidden = !0); -var d = $("a", c), e = new Clipboard(d.get(0)); -e.on("success", function(a) { +var d = $("a", c), e = d.get(0); +b.inputText && (e = d.get(1)); +var f = new Clipboard(e); +f.on("success", function(a) { $(a.trigger).attr("title", "Copied!").tooltip("fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("fixTitle"), a.clearSelection(); -}), e.on("error", function(a) { +}), f.on("error", function(a) { var b = /Mac/i.test(navigator.userAgent) ? "Press ⌘C to copy" :"Press Ctrl-C to copy"; $(a.trigger).attr("title", b).tooltip("fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("fixTitle"); }), c.on("$destroy", function() { -e.destroy(); +f.destroy(); }); } }; diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js index fa4d7dcc9f..31e876bec8 100644 --- a/dist/scripts/templates.js +++ b/dist/scripts/templates.js @@ -3871,26 +3871,24 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function( "

\n" + "

\n" + "After downloading and installing it, you can start by logging in using this current session token:\n" + - "

\n" + - "oc login {{loginBaseURL}} --token={{sessionToken}}...click to show token...\n" + - "
\n" + + "'\">\n" + "
\n" +
     "                      oc login {{loginBaseURL}}\n" +
     "
\n" + "

\n" + - "
\n" + + "
\n" + "\n" + "A token is a form of a password.\n" + "Do not share your API token.\n" + "
\n" + "

After you login to your account you will get a list of projects that you can switch between:\n" + - "

oc project project-name
\n" + + "'\">\n" + "

\n" + "

If you do not have any existing projects, you can create one:\n" + - "

oc new-project project-name
\n" + + "'\">\n" + "

\n" + "

To show a high level overview of the current project:\n" + - "

oc status
\n" + + "\n" + "

\n" + "

For other information about the command line tools, check the CLI Reference and Basic CLI Operations.

\n" + "
\n" + @@ -4839,10 +4837,11 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function( $templateCache.put('views/directives/_copy-to-clipboard.html', - "
\n" + - "\n" + + "
\n" + + "\n" + "\n" + - "\n" + + "\n" + + "\n" + "\n" + "
" ); diff --git a/dist/styles/main.css b/dist/styles/main.css index 8eba87b158..8e68e67934 100644 --- a/dist/styles/main.css +++ b/dist/styles/main.css @@ -3995,7 +3995,7 @@ labels+.resource-details{margin-top:10px} .environment-variables.table.table-bordered>tbody>tr>td:last-child .env-var-value a{font-family:"Open Sans",Helvetica,Arial,sans-serif} .pretty-json{font-family:Menlo,Monaco,Consolas,monospace;white-space:pre-wrap} .info-popover,.warnings-popover{cursor:help;vertical-align:middle;margin-left:2px} -copy-to-clipboard .input-group{max-width:300px} +copy-to-clipboard .input-group.limit-width{max-width:300px} .strong{font-weight:700} .tech-preview-header{justify-content:space-between} @media (max-width:479px){.col-xxs-12{width:100%}