diff --git a/_locales/en/messages.json b/_locales/en/messages.json index e7f5877e..7c9e7989 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -353,6 +353,18 @@ "message": "Find more styles for this site", "description": "Text for a link that gets a list of styles for the current site" }, + "headerTitleColumn": { + "message": "Title", + "description": "Entry title column header" + }, + "headerActionsColumn": { + "message": "Actions", + "description": "Entry actions column header" + }, + "headerAppliesToColumn": { + "message": "Sites", + "description": "Entry applies to (sites) column header" + }, "helpAlt": { "message": "Help", "description": "Alternate text for help buttons" diff --git a/manage/manage.css b/manage/manage.css index 8de33df9..569f278a 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -104,6 +104,32 @@ label.nobreak input { border-top: none; } +.newUI .entry:first-child > * { + position: relative; + padding-top: 20px; +} + +.newUI .entry:first-child > :after { + font-weight: bold; + font-size: 14px; + border-bottom: 1px solid #ddd; + width: 100%; + height: 1.2rem; + position: absolute; + left: 0; + top: -1.1rem; + z-index: 1; + pointer-events: none; +} + +.entry:first-child .style-name:after { + text-indent: 1.2rem; +} + +.entry:first-child .actions:after { + text-indent: -25px; /* adjust for svg negative margin */ +} + .svg-icon { cursor: pointer; vertical-align: middle; @@ -267,7 +293,7 @@ label.nobreak input { .newUI #installed { display: table; - margin-top: .75rem; + margin-top: 1.3rem; margin-bottom: .75rem; } @@ -912,6 +938,7 @@ fieldset select { #installed { padding-left: 0; + margin-top: .75rem; } fieldset { diff --git a/manage/manage.js b/manage/manage.js index e8fc983a..3c5eb734 100644 --- a/manage/manage.js +++ b/manage/manage.js @@ -91,6 +91,7 @@ function initGlobalEvents() { #update-all-no-updates[data-skipped-edited="true"]:after { content: " ${t('updateAllCheckSucceededSomeEdited')}"; } + ${getHeaderText()} `})); } @@ -512,6 +513,20 @@ function switchUI({styleOnly} = {}) { } +function getHeaderText() { + return ` + .newUI .entry:first-child .style-name:after { + content: "${t('headerTitleColumn')}" + } + .newUI .entry:first-child .actions:after { + content: "${t('headerActionsColumn')}" + } + .newUI .entry:first-child .applies-to:after { + content: "${t('headerAppliesToColumn')}" + }`; +} + + function rememberScrollPosition() { history.replaceState({scrollY: window.scrollY}, document.title); }