fix: add url box and width distribution (#6334)

Co-authored-by: Areeb Jamal <[email protected]>

Author: maze-runnar

app/controllers/events/list.js

@@ -12,7 +12,7 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
       {
         name            : this.l10n.t('Name'),
         valuePath       : 'name',
-        width           : 150,
+        width           : 180,
         isSortable      : true,
         extraValuePaths : ['identifier', 'logoUrl'],
         headerComponent : 'tables/headers/sort',
@@ -26,7 +26,7 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
         valuePath       : 'startsAt',
         extraValuePaths : ['endsAt', 'timezone'],
         isSortable      : true,
-        width           : 180,
+        width           : 220,
         headerComponent : 'tables/headers/sort',
         cellComponent   : 'ui-table/cell/cell-event-date'
 
@@ -40,7 +40,7 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
       },
       {
         name            : this.l10n.t('Tickets'),
-        width           : 130,
+        width           : 180,
         valuePath       : 'tickets',
         extraValuePaths : ['totalSales'],
         cellComponent   : 'ui-table/cell/cell-tickets'
@@ -58,7 +58,7 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
       {
         name          : this.l10n.t('Public URL'),
         valuePath     : 'url',
-        width         : 250,
+        width         : 220,
         cellComponent : 'ui-table/cell/cell-link'
       }
     ];

app/templates/components/ui-table/cell/cell-link.hbs

@@ -1,3 +1 @@
-<a href="{{this.record}}">
-  {{this.record}}
-</a>
+<UrlBox @url={{this.record}} />

app/templates/components/url-box.hbs

@@ -0,0 +1,16 @@
+<div class="ui action input" style="width: 100%; height: 36px">
+  <input class="truncate" style="flex: 1 0 !important" type="text" value={{@url}} placeholder={{@url}} readonly>
+  <UiPopup @on="click" @content={{t "Link copied to clipboard"}} @position="bottom right">
+    <CopyButton @clipboardText={{@url}} @class="ui grey icon button rounded-none m-0">
+      <i class="copy icon"></i>
+    </CopyButton>
+  </UiPopup>
+  <a 
+    id="public_url"
+    href="{{@url}}" 
+    target="_blank" rel="noopener">
+    <div  class="ui blue icon button ml-auto rounded-l-none m-0">
+      <i class="share icon" ></i>
+    </div>
+  </a>
+</div>