UX: Apply admin table to Automation settings page (#30341)
* UX: Apply admin table classes for consistent mobile styling on the automation page * UX: Remove icon beside the automation page title * DEV: Add status label to translations * UX: Reorder the status and name when on mobile * DEV: Add comment explaining tablet-specific status reorder * DEV: Apply prettier
This commit is contained in:
Ella E.
GitHub
parent
b2dc32f41c
commit
ddca2ca629
|
|
@ -1,5 +1,5 @@
|
|||
{{#if this.model.length}}
|
||||
<table class="automations">
|
||||
<table class="d-admin-table automations">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
|
|
@ -14,9 +14,12 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
{{#each this.model as |automation|}}
|
||||
<tr>
|
||||
<tr class="d-admin-row__content">
|
||||
{{#if automation.script.not_found}}
|
||||
<td colspan="5" class="alert alert-danger">
|
||||
<td colspan="5" class="d-admin-row__detail alert alert-danger">
|
||||
<div class="d-admin-row__mobile-label">
|
||||
{{i18n "discourse_automation.models.automation.status.label"}}
|
||||
</div>
|
||||
{{i18n
|
||||
"discourse_automation.scriptables.not_found"
|
||||
script=automation.script.id
|
||||
|
|
@ -24,7 +27,10 @@
|
|||
}}
|
||||
</td>
|
||||
{{else if automation.trigger.not_found}}
|
||||
<td colspan="5" class="alert alert-danger">
|
||||
<td colspan="5" class="d-admin-row__detail alert alert-danger">
|
||||
<div class="d-admin-row__mobile-label">
|
||||
{{i18n "discourse_automation.models.automation.status.label"}}
|
||||
</div>
|
||||
{{i18n
|
||||
"discourse_automation.triggerables.not_found"
|
||||
trigger=automation.trigger.id
|
||||
|
|
@ -33,35 +39,59 @@
|
|||
</td>
|
||||
{{else}}
|
||||
<td
|
||||
class="automations__status"
|
||||
class="d-admin-row__detail automations__status"
|
||||
role="button"
|
||||
{{on "click" (fn this.editAutomation automation)}}
|
||||
>{{format-enabled-automation
|
||||
>
|
||||
<div class="d-admin-row__mobile-label">
|
||||
{{i18n "discourse_automation.models.automation.status.label"}}
|
||||
</div>
|
||||
{{format-enabled-automation
|
||||
automation.enabled
|
||||
automation.trigger
|
||||
}}</td>
|
||||
}}
|
||||
</td>
|
||||
<td
|
||||
class="automations__name"
|
||||
class="d-admin-row__overview automations__name"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
{{on "keypress" (fn this.editAutomation automation)}}
|
||||
{{on "click" (fn this.editAutomation automation)}}
|
||||
>{{if
|
||||
>
|
||||
{{if
|
||||
automation.name
|
||||
automation.name
|
||||
(i18n "discourse_automation.unnamed_automation")
|
||||
}}</td>
|
||||
}}
|
||||
</td>
|
||||
<td
|
||||
class="automations__script"
|
||||
class="d-admin-row__detail automations__script"
|
||||
role="button"
|
||||
{{on "click" (fn this.editAutomation automation)}}
|
||||
>{{if automation.trigger.id automation.trigger.name "-"}}</td>
|
||||
>
|
||||
<div class="d-admin-row__mobile-label">
|
||||
{{i18n "discourse_automation.models.automation.trigger.label"}}
|
||||
</div>
|
||||
{{if automation.trigger.id automation.trigger.name "-"}}
|
||||
</td>
|
||||
<td
|
||||
class="automations__version"
|
||||
class="d-admin-row__detail automations__version"
|
||||
role="button"
|
||||
{{on "click" (fn this.editAutomation automation)}}
|
||||
>{{automation.script.name}} (v{{automation.script.version}})</td>
|
||||
<td>
|
||||
>
|
||||
<div class="d-admin-row__mobile-label">
|
||||
{{i18n "discourse_automation.models.automation.script.label"}}
|
||||
</div>
|
||||
{{automation.script.name}}
|
||||
(v{{automation.script.version}})
|
||||
</td>
|
||||
<td class="d-admin-row__detail automations__updated-by">
|
||||
<div class="d-admin-row__mobile-label">
|
||||
{{i18n
|
||||
"discourse_automation.models.automation.last_updated_by.label"
|
||||
}}
|
||||
</div>
|
||||
<div class="automations__user-timestamp">
|
||||
<a
|
||||
href={{automation.last_updated_by.userPath}}
|
||||
data-user-card={{automation.last_updated_by.username}}
|
||||
|
|
@ -69,10 +99,11 @@
|
|||
{{avatar automation.last_updated_by imageSize="small"}}
|
||||
</a>
|
||||
{{format-date automation.updated_at leaveAgo="true"}}
|
||||
</div>
|
||||
</td>
|
||||
{{/if}}
|
||||
|
||||
<td class="automations__delete">
|
||||
<td class="d-admin-row__controls automations__delete">
|
||||
<DButton
|
||||
@icon="trash-can"
|
||||
@action={{action "destroyAutomation" automation}}
|
||||
|
|
|
|||
|
|
@ -2,38 +2,6 @@
|
|||
@route="adminPlugins.discourse-automation"
|
||||
class="discourse-automation-title"
|
||||
>
|
||||
<svg
|
||||
width="32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 41.3 41.3"
|
||||
><title>Asset 4</title><path
|
||||
d="M20.42,40.21a2.52,2.52,0,0,1-1.78-.78l-.08-.07-1.94-2a2.48,2.48,0,0,1-.72-1.23l-1.15.64a2.51,2.51,0,0,1-1.25.33,2.59,2.59,0,0,1-1.86-.79l-.73-.76a1.79,1.79,0,0,1-.24-.21l-.84-.88a1.31,1.31,0,0,1-.27-.24l-4.67-4.9A2.5,2.5,0,0,1,4.5,26.3l.92-1.47-.48-.14a2.3,2.3,0,0,1-.9-.47l-.17-.14L1.72,21.93a2.09,2.09,0,0,1-.14-.17A2.55,2.55,0,0,1,1,20.1l.08-3.85a2.57,2.57,0,0,1,2-2.44l2.73-.65L6,12.78,4.59,10.33a2.57,2.57,0,0,1,.47-3.11L7.84,4.56a2.56,2.56,0,0,1,1.77-.72A2.74,2.74,0,0,1,11,4.23l2.46,1.52.3-.11.78-2.77A2.6,2.6,0,0,1,17,1l3.88.08.14,0a1,1,0,0,1,.24,0,2.65,2.65,0,0,1,.51.15h0a1.11,1.11,0,0,1,.31.15l.28.2.08.06a.52.52,0,0,1,.11.1l2.08,2.08a2.57,2.57,0,0,1,.73,1.25l.1.45,1.56-.87a2.5,2.5,0,0,1,1.24-.33,2.62,2.62,0,0,1,1.87.8l.55.57.21.19L32,7a1.43,1.43,0,0,1,.29.24l4.63,4.86a2.56,2.56,0,0,1,.43,3.12l-.84,1.36a2.66,2.66,0,0,1,.86.5,1.27,1.27,0,0,1,.12.1l.09.1,2,2a.64.64,0,0,1,.1.13,2.56,2.56,0,0,1,.69,1.77L40.21,25a2.56,2.56,0,0,1-2,2.45l-2.62.61c-.07.18-.14.35-.22.53l1.3,2.33A2.55,2.55,0,0,1,36.24,34l-2.78,2.67a2.6,2.6,0,0,1-1.78.71h0A2.61,2.61,0,0,1,30.33,37l-2.2-1.36c-.21.08-.42.17-.63.24l-.71,2.52a2.57,2.57,0,0,1-2.47,1.87Z"
|
||||
></path><path
|
||||
d="M17,2l3.85.08.13,0h0l.07,0a1.27,1.27,0,0,1,.38.11l.1,0,.08.06.16.12.11.08,2,2h0a1.54,1.54,0,0,1,.52.83l.41,1.74,2.72-1.52a1.61,1.61,0,0,1,.75-.2h.05a1.57,1.57,0,0,1,1.1.48l.65.69h0a.25.25,0,0,1,.1.08l1.14,1.19a.32.32,0,0,1,.17.12l4.64,4.86a1.58,1.58,0,0,1,.3,1.91l-1.53,2.48,1.16.33a1.54,1.54,0,0,1,.64.38h0l0,0h0L37.82,19l0,0,1,1h0a1.55,1.55,0,0,1,.51,1.17L39.21,25A1.55,1.55,0,0,1,38,26.48l-3.13.74a12.5,12.5,0,0,1-.61,1.41l1.56,2.79a1.56,1.56,0,0,1-.28,1.9L32.77,36a1.56,1.56,0,0,1-1.09.44,1.53,1.53,0,0,1-.82-.24L28.2,34.54a13.33,13.33,0,0,1-1.52.6l-.85,3a1.57,1.57,0,0,1-1.51,1.14h0l-3.85-.09a1.57,1.57,0,0,1-1.17-.57h0L17.32,36.7a1.47,1.47,0,0,1-.45-.77l-.3-1.27L14.26,36a1.49,1.49,0,0,1-.76.2,1.61,1.61,0,0,1-1.14-.48l-.82-.86a.49.49,0,0,1-.14-.11l-1-1a.53.53,0,0,1-.17-.12L5.61,28.68a1.49,1.49,0,0,1-.26-1.85l1.58-2.55,0-.07-1.69-.48a1.55,1.55,0,0,1-.63-.37h0l-.1-.1h0L3.31,22.1h0l-.86-.87h0A1.58,1.58,0,0,1,2,20.12l.08-3.85a1.58,1.58,0,0,1,1.21-1.49L6.52,14a13.1,13.1,0,0,1,.58-1.27L5.47,9.84a1.56,1.56,0,0,1,.28-1.9L8.53,5.28a1.55,1.55,0,0,1,1.08-.43h0a1.48,1.48,0,0,1,.79.23l2.9,1.79c.39-.17.79-.32,1.21-.46l.92-3.27A1.6,1.6,0,0,1,17,2m0-2h0a3.62,3.62,0,0,0-3.46,2.6l-.49,1.74-1.56-1a3.47,3.47,0,0,0-1.8-.53H9.61a3.58,3.58,0,0,0-2.46,1L4.37,6.5a3.55,3.55,0,0,0-.65,4.32l.9,1.59-1.79.42a3.57,3.57,0,0,0-2.74,3.4L0,20.08a3.55,3.55,0,0,0,.77,2.27,2.09,2.09,0,0,0,.24.28l.87.87h0L3,24.67h0l.11.11a2.48,2.48,0,0,0,.3.25,4.53,4.53,0,0,0,.46.3l-.27.44a3.47,3.47,0,0,0,.52,4.28L8.83,35a2.67,2.67,0,0,0,.34.29l.78.82a2,2,0,0,0,.3.27l.67.7a3.59,3.59,0,0,0,2.58,1.1,3.67,3.67,0,0,0,1.74-.45l.21-.12a3.64,3.64,0,0,0,.48.56l1.92,1.92.11.11a3.55,3.55,0,0,0,2.43,1l3.85.09h.08a3.58,3.58,0,0,0,3.43-2.6l.51-1.78,1.55,1a3.55,3.55,0,0,0,4.34-.45l2.78-2.67a3.57,3.57,0,0,0,.65-4.32l-.9-1.59,1.78-.42A3.55,3.55,0,0,0,41.21,25l.09-3.84a3.55,3.55,0,0,0-.92-2.45l-.17-.19-1-.95,0,0h0l-1-1.06-.13-.12-.19-.16.3-.48a3.58,3.58,0,0,0-.57-4.35L33,6.56a2.3,2.3,0,0,0-.35-.31l-1-1A2.53,2.53,0,0,0,31.39,5l-.5-.52a3.52,3.52,0,0,0-2.49-1.1h-.1a3.53,3.53,0,0,0-1.73.46l-.49.27a3.87,3.87,0,0,0-.69-.93.46.46,0,0,0-.07-.07l-2-2a1.59,1.59,0,0,0-.24-.2L23,.83,22.75.66l0,0a2,2,0,0,0-.62-.31h0a3.83,3.83,0,0,0-.58-.16A1.59,1.59,0,0,0,21.13.1h-.22L17.06,0Z"
|
||||
></path><path
|
||||
d="M8.78,24.14l1.93,2.21a13.21,13.21,0,0,0,.83,2.11L9.85,31.19A1.15,1.15,0,0,0,10,32.6l2.66,2.78a1.15,1.15,0,0,0,1.4.21L17,34a11.35,11.35,0,0,0,1.6.69l.77,3.27a1.15,1.15,0,0,0,1.1.89l3.85.09A1.16,1.16,0,0,0,25.43,38l.91-3.23a12.77,12.77,0,0,0,1.89-.74l2.85,1.76a1.13,1.13,0,0,0,1.4-.15L35.26,33a1.15,1.15,0,0,0,.21-1.4l-1.67-3a12.63,12.63,0,0,0,.77-1.77l3.34-.79A1.15,1.15,0,0,0,38.8,25l.09-3.85A1.16,1.16,0,0,0,38,20l-3.4-1a11.44,11.44,0,0,0-.52-1.35l2-3.2a1.18,1.18,0,0,0-.25-1.41L33.19,10.3a1.18,1.18,0,0,0-.81-.36.85.85,0,0,0-.48.15l-3.17,1.77a14.55,14.55,0,0,0-1.8-.81L24.67,9.76c-.12-.52-.23-1.5-.75-1.52L21.15,6.56A1.16,1.16,0,0,0,20,7.4l-1,3.48a11.87,11.87,0,0,0-1.57.61L14.37,9.58a1.23,1.23,0,0,0-.58-.18,1.2,1.2,0,0,0-.83.33l-2.78,2.66a1.17,1.17,0,0,0-.21,1.4l1.74,3.1A11.92,11.92,0,0,0,11,18.52l-3.45.81a1.16,1.16,0,0,0-.89,1.1l.63,2.19C7.26,23.15,9.4,22.1,8.78,24.14Zm14.1-8.74a7.33,7.33,0,1,1-7.48,7.16A7.32,7.32,0,0,1,22.88,15.4Z"
|
||||
fill="#00aeef"
|
||||
></path><path
|
||||
d="M8.54,23.9l1.2,1.48a12.89,12.89,0,0,0,.84,2.11l-1.7,2.74A1.16,1.16,0,0,0,9,31.63l2.66,2.78a1.14,1.14,0,0,0,1.4.21L16,33a12.46,12.46,0,0,0,1.59.68l.77,3.27a1.14,1.14,0,0,0,1.1.89l3.85.09a1.17,1.17,0,0,0,1.14-.84l.91-3.24a11.3,11.3,0,0,0,1.88-.74l2.85,1.76a1.16,1.16,0,0,0,1.41-.14l2.78-2.67a1.15,1.15,0,0,0,.21-1.39l-1.67-3a12.74,12.74,0,0,0,.76-1.77l3.34-.79A1.14,1.14,0,0,0,37.83,24l.09-3.85A1.16,1.16,0,0,0,37.08,19l-3.41-1a11,11,0,0,0-.51-1.35l1.93-3.15a1.15,1.15,0,0,0-.15-1.41L32.28,9.38A1.17,1.17,0,0,0,31.47,9a1,1,0,0,0-.54.1L27.76,10.9a11.24,11.24,0,0,0-1.8-.81l-2.28.18c-1.46,2.2-.07-2.12-.59-2.13L20.18,5.59a1.16,1.16,0,0,0-1.13.84l-1,3.48a12,12,0,0,0-1.58.61L13.4,8.61a1.15,1.15,0,0,0-1.4.15L9.22,11.42A1.14,1.14,0,0,0,9,12.82l1.74,3.11A11.85,11.85,0,0,0,10,17.55l-3.44.81a1.14,1.14,0,0,0-.89,1.1l1.07,2.71C6.74,22.7,9.89,23.35,8.54,23.9Zm13.38-9.47a7.33,7.33,0,1,1-7.49,7.17A7.33,7.33,0,0,1,21.92,14.43Z"
|
||||
fill="#00a94f"
|
||||
></path><path
|
||||
d="M3.25,21.27l3.31.93a12.89,12.89,0,0,0,.84,2.11L5.7,27.05a1.09,1.09,0,0,0,.21,1.35l2.66,2.78a1.08,1.08,0,0,0,1.34.26l2.93-1.63a12.46,12.46,0,0,0,1.59.68l.77.31a1.16,1.16,0,0,0,1.1.89l3.85,3.05a1.17,1.17,0,0,0,1.14-.84l.91-3.24a11.3,11.3,0,0,0,1.88-.74l2.85,1.77a1.18,1.18,0,0,0,1.41-.15l2.78-2.67a1.15,1.15,0,0,0,.21-1.39l-1.67-3a12.74,12.74,0,0,0,.76-1.77l3.34-.79a1.14,1.14,0,0,0,.89-1.09l-2.88-2.37a1.16,1.16,0,0,0-.84-1.14l-.44-2.44A11,11,0,0,0,30,13.54l2-3.2a1.16,1.16,0,0,0-.15-1.4L29.15,6.15a1.15,1.15,0,0,0-.81-.35,1.12,1.12,0,0,0-.59.14L24.58,7.72a11.24,11.24,0,0,0-1.8-.81L22,3.39a1.14,1.14,0,0,0-1.1-.89L17,2.41a1.16,1.16,0,0,0-1.13.84l-1,3.48a12,12,0,0,0-1.58.61L10.22,5.43a1.15,1.15,0,0,0-1.4.15L6,8.24a1.14,1.14,0,0,0-.21,1.4l1.74,3.11a11.85,11.85,0,0,0-.74,1.62l-3.44.81a1.14,1.14,0,0,0-.89,1.1l-.09,3.85A1.17,1.17,0,0,0,3.25,21.27Zm15.49-10a7.33,7.33,0,1,1-7.49,7.17A7.33,7.33,0,0,1,18.74,11.25Z"
|
||||
fill="#d0232b"
|
||||
></path><path
|
||||
d="M24.39,20.28A4.71,4.71,0,0,1,16.8,24a4.71,4.71,0,1,0,6.61-6.61A4.74,4.74,0,0,1,24.39,20.28Z"
|
||||
fill="#00a94f"
|
||||
></path><path
|
||||
d="M4,22,7.32,23a12.12,12.12,0,0,0,.83,2.12L6.46,27.8a1.16,1.16,0,0,0,.22,1.41L9.34,32a1.05,1.05,0,0,0,1.33.21l2.92-1.64a11.35,11.35,0,0,0,1.6.69L17.44,33a1.16,1.16,0,0,0,1.1.89l2.36,1.56A1.14,1.14,0,0,0,22,34.65L23,31.42a13.35,13.35,0,0,0,1.88-.74l2.85,1.76a1.15,1.15,0,0,0,1.41-.15l2.78-2.66a1.15,1.15,0,0,0,.21-1.4l-1.67-3a12.63,12.63,0,0,0,.77-1.77l3.34-.79a1.15,1.15,0,0,0,.89-1.1L34,19.23a1.15,1.15,0,0,0-.84-1.14l-1.92-2.45a12,12,0,0,0-.52-1.34l2-3.2a1.16,1.16,0,0,0-.14-1.41L29.9,6.91a1.15,1.15,0,0,0-.81-.36,1.26,1.26,0,0,0-.59.15L25.34,8.47a14.55,14.55,0,0,0-1.8-.81l-.83-3.52a1.15,1.15,0,0,0-1.1-.89l-3.85-.08A1.15,1.15,0,0,0,16.62,4l-1,3.48a12.58,12.58,0,0,0-1.58.61L11,6.19A1.13,1.13,0,0,0,10.4,6a1.23,1.23,0,0,0-.83.32L6.79,9a1.15,1.15,0,0,0-.21,1.4l1.74,3.1a11.4,11.4,0,0,0-.73,1.63l-3.45.81A1.15,1.15,0,0,0,3.25,17l-.08,3.85A1.15,1.15,0,0,0,4,22ZM19.49,12A7.33,7.33,0,1,1,12,19.17,7.33,7.33,0,0,1,19.49,12Z"
|
||||
fill="#f15d22"
|
||||
></path><circle cx="20.64" cy="20.86" r="8.33" fill="#fff"></circle><path
|
||||
d="M36,17.92l-3.41-1q-.23-.69-.51-1.35l2-3.2A1.18,1.18,0,0,0,33.88,11L31.22,8.22a1.13,1.13,0,0,0-.81-.35,1.1,1.1,0,0,0-.59.14L26.65,9.79A12.73,12.73,0,0,0,24.85,9L24,5.46a1.14,1.14,0,0,0-1.1-.89l-3.85-.09a1.15,1.15,0,0,0-1.13.84L17,8.8a11.87,11.87,0,0,0-1.57.61L12.29,7.5a1.15,1.15,0,0,0-1.4.15L8.1,10.31a1.17,1.17,0,0,0-.21,1.4l1.74,3.1a14,14,0,0,0-.73,1.63l-3.44.81a1.14,1.14,0,0,0-.89,1.1L4.48,22.2a1.16,1.16,0,0,0,.84,1.13l3.31.94a12.89,12.89,0,0,0,.84,2.11l-1.7,2.73a1.16,1.16,0,0,0,.15,1.41l2.66,2.78a1.15,1.15,0,0,0,1.4.21l2.92-1.64a11.87,11.87,0,0,0,1.6.69l.77,3.27a1.14,1.14,0,0,0,1.1.89l3.85.09A1.16,1.16,0,0,0,23.35,36l.92-3.24A11.3,11.3,0,0,0,26.15,32L29,33.75a1.15,1.15,0,0,0,1.4-.14l2.78-2.67a1.14,1.14,0,0,0,.21-1.4l-1.67-3a12.14,12.14,0,0,0,.77-1.77L35.83,24a1.14,1.14,0,0,0,.89-1.1l.09-3.85A1.16,1.16,0,0,0,36,17.92ZM25.72,23.64l-3.84,1.78-2.38.87-3-1.46-1.35-2.51-.22-3.75,2.65-2.65h3.56l3.2,1.55,2.2,2.63Z"
|
||||
fill="#fff9ae"
|
||||
></path><path
|
||||
d="M20.45,26.15a5.92,5.92,0,1,1,5.93-5.92A5.93,5.93,0,0,1,20.45,26.15Zm0-10.57a4.65,4.65,0,1,0,4.65,4.65A4.65,4.65,0,0,0,20.45,15.58Z"
|
||||
stroke="#000"
|
||||
stroke-miterlimit="10"
|
||||
></path></svg>
|
||||
|
||||
<h1 class="title">
|
||||
{{i18n "discourse_automation.title"}}
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,46 @@
|
|||
}
|
||||
}
|
||||
|
||||
.d-admin-table.automations {
|
||||
.d-admin-row__content {
|
||||
@include breakpoint("tablet") {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(5, auto);
|
||||
}
|
||||
}
|
||||
|
||||
.d-admin-row__overview {
|
||||
@include breakpoint("tablet") {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.d-admin-row__detail.automations__status {
|
||||
@include breakpoint("tablet") {
|
||||
order: 2; // move below the name to avoid empty spacing
|
||||
}
|
||||
}
|
||||
|
||||
.d-admin-row__detail.automations__script {
|
||||
@include breakpoint("tablet") {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.d-admin-row__detail.automations__version {
|
||||
@include breakpoint("tablet") {
|
||||
order: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.d-admin-row__detail.automations__updated-by {
|
||||
@include breakpoint("tablet") {
|
||||
order: 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-section-landing__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -408,6 +408,8 @@ en:
|
|||
label: Script
|
||||
version:
|
||||
label: Version
|
||||
status:
|
||||
label: Status
|
||||
enabled:
|
||||
label: Enabled
|
||||
disabled:
|
||||
|
|
|
|||
Loading…
Reference in New Issue