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:
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')