darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-25 16:54:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add conditional placeholder detection

Browse Source 
Implements: https://github.com/alphagov/notifications-utils/pull/51

Copies the same regex.

Adds some CSS to display conditional placeholders differently to
normal placeholders (vertical rather that curved right-hand edge).
This commit is contained in:
Chris Hill-Scott
2016-07-12 12:48:09 +01:00
parent d380eaf060
commit c006b8748c
4 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/highlightTags.js
View File

@@ -5,7 +5,7 @@
!('oninput' in document.createElement('input'))
) return;
const tagPattern = /\(\([^\)\(]+\)\)/g;
const tagPattern = /\(\(([^\)\((\?)]+)(\?\?)?([^\)\(]*)\)\)/g;
Modules.HighlightTags = function() {
@@ -43,7 +43,9 @@
this.replacePlaceholders = () => this.$background.html(
this.escapedMessage().replace(
tagPattern, match => `<span class='placeholder'>${match}</span>`
tagPattern, (match, name, separator, value) => value && separator ?
`<span class='placeholder-conditional'>((${name}??</span>${value}))` :
`<span class='placeholder'>((${name}${value}))</span>`
)
);

16
app/assets/stylesheets/components/placeholder.scss
View File

@@ -22,3 +22,19 @@
border-radius: 1px;
box-shadow: inset 0 -2px 0 0 $white, inset 0 2px 0 0 $white;
}
.placeholder-conditional {
@extend %placeholder;
border-radius: 0;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
box-shadow: inset 9px 0 0 0 $white, inset -17px 0 0 0 $white, inset 0 -3px 0 0 $white, inset 0 3px 0 0 $white;
.sms-message-wrapper & {
box-shadow: inset 9px 0 0 0 $panel-colour, inset -17px 0 0 0 $panel-colour, inset 0 -3.5px 0 0 $panel-colour, inset 0 3.5px 0 0 $panel-colour;
}
}