logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe
commit: 38cab5e4b695eea90b01c2866976960e9fc01128
parent: 1dfb8d14b21cac8a1349146df03d35c1d2ec6005
Author: lambda <pleromagit@rogerbraun.net>
Date:   Fri, 24 Nov 2017 07:29:49 +0000

Merge branch 'fix/better-icon-colors' into 'develop'

Update icons to use base09 where appropriate, calculate base09 by averaging bg and text colors.

See merge request pleroma/pleroma-fe!174

Diffstat:

Msrc/components/delete_button/delete_button.vue2+-
Msrc/components/favorite_button/favorite_button.vue2+-
Msrc/components/media_upload/media_upload.vue4++--
Msrc/components/retweet_button/retweet_button.vue2+-
Msrc/components/status/status.vue14+++++++-------
Msrc/components/user_settings/user_settings.vue6+++---
Msrc/services/style_setter/style_setter.js11+++++++----
7 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue @@ -1,7 +1,7 @@ <template> <div v-if="canDelete"> <a href="#" v-on:click.prevent="deleteStatus()"> - <i class='fa icon-cancel delete-status'></i> + <i class='base09 icon-cancel delete-status'></i> </a> </div> </template> diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue @@ -1,6 +1,6 @@ <template> <div> - <i :class='classes' class='favorite-button fa' @click.prevent='favorite()'/> + <i :class='classes' class='favorite-button base09' @click.prevent='favorite()'/> <span v-if='status.fave_num > 0'>{{status.fave_num}}</span> </div> </template> diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue @@ -1,8 +1,8 @@ <template> <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop"> <label class="btn btn-default"> - <i class="fa icon-spin4 animate-spin" v-if="uploading"></i> - <i class="fa icon-upload" v-if="!uploading"></i> + <i class="base09 icon-spin4 animate-spin" v-if="uploading"></i> + <i class="base09 icon-upload" v-if="!uploading"></i> <input type=file style="position: fixed; top: -100em"></input> </label> </div> diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue @@ -1,6 +1,6 @@ <template> <div> - <i :class='classes' class='icon-retweet fa' v-on:click.prevent='retweet()'></i> + <i :class='classes' class='icon-retweet base09' v-on:click.prevent='retweet()'></i> <span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span> </div> </template> diff --git a/src/components/status/status.vue b/src/components/status/status.vue @@ -5,7 +5,7 @@ <div class='status-actions'> <div> <a href="#" v-on:click.prevent="toggleReplying"> - <i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i> + <i class="base09 icon-reply" :class="{'icon-reply-active': replying}"></i> </a> </div> <retweet-button :status=status></retweet-button> @@ -19,7 +19,7 @@ <div class="media status container muted"> <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small> <small class="muteWords">{{muteWordHits.join(', ')}}</small> - <a href="#" class="unmute" @click.prevent="toggleMute"><i class="fa icon-eye-off"></i></a> + <a href="#" class="unmute" @click.prevent="toggleMute"><i class="base09 icon-eye-off"></i></a> </div> </template> <template v-if="!muted"> @@ -75,10 +75,10 @@ </h4> </div> <div class="heading-icons"> - <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="fa icon-eye-off"></i></a> - <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="fa icon-binoculars"></i></a> + <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="base09 icon-eye-off"></i></a> + <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="base09 icon-binoculars"></i></a> <template v-if="expandable"> - <a href="#" @click.prevent="toggleExpanded" class="expand"><i class="fa icon-plus-squared"></i></a> + <a href="#" @click.prevent="toggleExpanded" class="expand"><i class="base09 icon-plus-squared"></i></a> </template> </div> </div> @@ -94,7 +94,7 @@ </div> </div> <div class="status-preview status-preview-loading base00-background base03-border" v-else-if="showPreview"> - <i class="fa icon-spin4 animate-spin"></i> + <i class="base09 icon-spin4 animate-spin"></i> </div> <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div> @@ -109,7 +109,7 @@ <div class='status-actions'> <div> <a href="#" v-on:click.prevent="toggleReplying"> - <i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i> + <i class="base09 icon-reply" :class="{'icon-reply-active': replying}"></i> </a> </div> <retweet-button :status=status></retweet-button> diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue @@ -22,7 +22,7 @@ <div> <input type="file" @change="uploadFile(0, $event)" ></input> </div> - <i class="fa icon-spin4 animate-spin" v-if="uploading[0]"></i> + <i class="base09 icon-spin4 animate-spin" v-if="uploading[0]"></i> <button class="btn btn-default base05 base02-background" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button> </div> <div class="setting-item"> @@ -35,7 +35,7 @@ <div> <input type="file" @change="uploadFile(1, $event)" ></input> </div> - <i class="fa icon-spin4 animate-spin uploading" v-if="uploading[1]"></i> + <i class="base09 icon-spin4 animate-spin uploading" v-if="uploading[1]"></i> <button class="btn btn-default base05 base02-background" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button> </div> <div class="setting-item"> @@ -46,7 +46,7 @@ <div> <input type="file" @change="uploadFile(2, $event)" ></input> </div> - <i class="fa icon-spin4 animate-spin uploading" v-if="uploading[2]"></i> + <i class="base09 icon-spin4 animate-spin uploading" v-if="uploading[2]"></i> <button class="btn btn-default base05 base02-background" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button> </div> </div> diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js @@ -73,6 +73,7 @@ const setColors = (col, commit) => { if (isDark) { mod = mod * -1 } + colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background colors['base01'] = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg colors['base02'] = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons @@ -82,11 +83,13 @@ const setColors = (col, commit) => { colors['base06'] = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2) colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b) // links + colors['base09'] = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons - times(9, (n) => { - const color = colors[`base0${8 - n}`] - styleSheet.insertRule(`.base0${8 - n} { color: ${color}`, 'index-max') - styleSheet.insertRule(`.base0${8 - n}-background { background-color: ${color}`, 'index-max') + const num = 10 + times(num, (n) => { + const color = colors[`base0${num - 1 - n}`] + styleSheet.insertRule(`.base0${num - 1 - n} { color: ${color}`, 'index-max') + styleSheet.insertRule(`.base0${num - 1 - n}-background { background-color: ${color}`, 'index-max') }) styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')