settings: Restyle "emoji style" section.

This restyles and rewords some of the emoji style section to look
better and fit it more with the current style guide.

Tweaked by tabbott to modify the historical migration rather than
adding a new one.  This is OK because the emojiset choices text change
doesn't touch the database; it's just a Django Python code thing.

Also removed translation tags, since we don't need them for a set of
brand names.
This commit is contained in:
Brock Whittaker 2017-11-10 16:55:40 -08:00 committed by Tim Abbott
parent 439bc2920a
commit ca2f93db31
4 changed files with 31 additions and 16 deletions

View File

@ -838,8 +838,9 @@ input[type=checkbox].inline-block {
}
.emojiset_choices {
padding-left: 20px;
width: 230px;
width: 250px;
margin-top: 10px;
padding: 0px 10px;
}
.emojiset_choices .emoji {
@ -848,10 +849,25 @@ input[type=checkbox].inline-block {
}
.emojiset_choices label {
line-height: 2em;
border-bottom: 1px solid #ddd;
padding: 8px 0px 10px 0px;
}
.emojiset_choices span {
.emojiset_choices label:last-of-type {
border-bottom: none;
}
.emojiset_choices label input[type=radio] {
position: relative;
top: -2px;
margin: 0px 5px 0px 0px;
}
.emojiset_choices label input[type=radio]:checked + span {
font-weight: 600;
}
.emojiset_choices .right {
float: right;
}

View File

@ -82,19 +82,18 @@
</div>
</div>
<h3 class="light">Emoji settings</h3>
<h3 class="light">Emoji style</h3>
<div class="input-group side-padded-container">
<label>{{t "Emoji style" }}:</label>
<div class="emojiset_choices">
{{#each page_params.emojiset_choices}}
<div class="emojiset_choices grey-box">
{{#each page_params.emojiset_choices }}
<label>
<input type="radio" class="emojiset_choice" name="emojiset_group" value="{{@key}}" />
{{this}}
<span>
<span>{{this}}</span>
<span class="right">
<img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f642.png" />
<img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f44d.png" />
<img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f680.png" />
<img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f4a9.png" />
<img class="emoji" src="/static/generated/emoji/images-{{@key}}-64/1f389.png" />
</span>
</label>
{{/each}}

View File

@ -14,6 +14,6 @@ class Migration(migrations.Migration):
migrations.AddField(
model_name='userprofile',
name='emojiset',
field=models.CharField(choices=[('apple', 'Apple style'), ('emojione', 'Emoji One style'), ('google', 'Google style'), ('twitter', 'Twitter style')], default='google', max_length=20),
field=models.CharField(choices=[('apple', 'Apple'), ('emojione', 'Emoji One'), ('google', 'Google'), ('twitter', 'Twitter')], default='google', max_length=20),
),
]

View File

@ -650,10 +650,10 @@ class UserProfile(AbstractBaseUser, PermissionsMixin):
EMOJIONE_EMOJISET = u'emojione'
GOOGLE_EMOJISET = u'google'
TWITTER_EMOJISET = u'twitter'
EMOJISET_CHOICES = ((APPLE_EMOJISET, _("Apple style")),
(EMOJIONE_EMOJISET, _("Emoji One style")),
(GOOGLE_EMOJISET, _("Google style")),
(TWITTER_EMOJISET, _("Twitter style")))
EMOJISET_CHOICES = ((APPLE_EMOJISET, "Apple"),
(EMOJIONE_EMOJISET, "Emoji One"),
(GOOGLE_EMOJISET, "Google"),
(TWITTER_EMOJISET, "Twitter"))
emojiset = models.CharField(default=GOOGLE_EMOJISET, choices=EMOJISET_CHOICES, max_length=20) # type: Text
# Define the types of the various automatically managed properties