[MacPorts] #66500: Remove $ dollar sign from line copy&paste (user terminal commands)

[MacPorts]

#66500: Remove $ dollar sign from line copy&paste (user terminal commands)
--------------------------+--------------------
  Reporter:  esbugz       |      Owner:  (none)
      Type:  enhancement  |     Status:  new
  Priority:  Normal       |  Milestone:
 Component:  guide        |    Version:
Resolution:               |   Keywords:
      Port:               |
--------------------------+--------------------

Comment (by esbugz):

 One good example seems to simply put the `$` (`>` in their case) in a
 separate `span` from the text command
 [https://scoop.sh/#/apps?q=wget&s=0&d=1&o=true]

 {{{#!html
 <div class="mt-2 row">
   <div id="app-command" class="copy-command-group input-group input-group-
 sm">
     <!-- ↓ is the > prompt sign -->
     <span class="border-end-0 copy-command-prefix input-group-
 text">></span>
     <!-- ↓ is the text after the > prompt sign, it's an input field, so
 triple click selects only its content -->
     <input title="Copy to clipboard" type="text" readonly="" class
 ="border-start-0 copy-command-text form-control" value="scoop install
 wget">
     <!-- ↓ is the copy button, you already have similar button in
 https://ports.macports.org/port/wget/ -->
     <button type="button" title="Copy to clipboard" class="copy-command-
 button btn btn-outline-secondary">
       <svg stroke="currentColor" fill="currentColor" stroke-width="0"
 viewBox="0 0 384 512" class="react-icon" height="1em" width="1em"
 xmlns="http://www.w3.org/2000/svg">
       <path d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64
 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5
 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24
 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3
 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4
 12-12v-36h42c3.3 0 6 2.7 6 6z">
       </path>
       </svg>
     </button>
   </div>
 </div>
 }}}

 {{{
 <div class="mt-2 row">
   <div id="app-command" class="copy-command-group input-group input-group-
 sm">
     <!-- ↓ is the > prompt sign -->
     <span class="border-end-0 copy-command-prefix input-group-
 text">></span>
     <!-- ↓ is the text after the > prompt sign, it's an input field, so
 triple click selects only its content -->
     <input title="Copy to clipboard" type="text" readonly="" class
 ="border-start-0 copy-command-text form-control" value="scoop install
 wget">
     <!-- ↓ is the copy button, you already have similar button in
 https://ports.macports.org/port/wget/ -->
     <button type="button" title="Copy to clipboard" class="copy-command-
 button btn btn-outline-secondary">
       <svg stroke="currentColor" fill="currentColor" stroke-width="0"
 viewBox="0 0 384 512" class="react-icon" height="1em" width="1em"
 xmlns="http://www.w3.org/2000/svg">
       <path d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64
 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5
 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24
 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3
 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4
 12-12v-36h42c3.3 0 6 2.7 6 6z">
       </path>
       </svg>
     </button>
   </div>
 </div>
 }}}


 Meanwhile there is one simple fix :) based on the existing functionality
 of [https://ports.macports.org/port/wget/]
 {{{#!html
 <div style="display: inline-block" class="text-center bg-light rounded-lg
 py-3 px-2 mt-3">
   <!-- add ↓ line -->
   <span>$</span>
   <!-- ↓ replaces code with input -->
   <input id="install" title="cmd" type="text" readonly="" value="sudo port
 install wget">
   <!-- ↓ fix this button's 'copyText' function :) to work with ↑ 'input'
 instead of 'code' -->
   <button onclick="copyText('install')" class="btn btn-outline-secondary
 btn-sm ml-2">Copy</button>
 </div>
 }}}

 {{{
 <div class="mt-2 row">
   <div id="app-command" class="copy-command-group input-group input-group-
 sm">
     <!-- ↓ is the > prompt sign -->
     <span class="border-end-0 copy-command-prefix input-group-
 text">></span>
     <!-- ↓ is the text after the > prompt sign, it's an input field, so
 triple click selects only its content -->
     <input title="Copy to clipboard" type="text" readonly="" class
 ="border-start-0 copy-command-text form-control" value="scoop install
 wget">
     <!-- ↓ is the copy button, you already have similar button in
 https://ports.macports.org/port/wget/ -->
     <button type="button" title="Copy to clipboard" class="copy-command-
 button btn btn-outline-secondary">
       <svg stroke="currentColor" fill="currentColor" stroke-width="0"
 viewBox="0 0 384 512" class="react-icon" height="1em" width="1em"
 xmlns="http://www.w3.org/2000/svg">
       <path d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64
 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5
 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24
 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3
 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4
 12-12v-36h42c3.3 0 6 2.7 6 6z">
       </path>
       </svg>
     </button>
   </div>
 </div>
 }}}


 Then the only missing piece will be making a hover on the input field
 select the copy button and a single click on the input field the whole
 text, but at least here a triple click does NOT select `$`, so that's
 already an improvement (and in the guide there is no copy button, so
 that's not a regression :))

-- 
Ticket URL: <https://trac.macports.org/ticket/66500#comment:5>
MacPorts <https://www.macports.org/>
Ports system for macOS