moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
lambda 2017-11-24 07:29:49 +00:00
parent 1dfb8d14b2 10be553910
commit 38cab5e4b6
7 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/delete_button/delete_button.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div v-if="canDelete"> <div v-if="canDelete">
<a href="#" v-on:click.prevent="deleteStatus()"> <a href="#" v-on:click.prevent="deleteStatus()">
<i class='fa icon-cancel delete-status'></i> <i class='base09 icon-cancel delete-status'></i>
</a> </a>
</div> </div>
</template> </template>

2
src/components/favorite_button/favorite_button.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <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> <span v-if='status.fave_num > 0'>{{status.fave_num}}</span>
</div> </div>
</template> </template>

4
src/components/media_upload/media_upload.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop"> <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
<label class="btn btn-default"> <label class="btn btn-default">
<i class="fa icon-spin4 animate-spin" v-if="uploading"></i> <i class="base09 icon-spin4 animate-spin" v-if="uploading"></i>
<i class="fa icon-upload" v-if="!uploading"></i> <i class="base09 icon-upload" v-if="!uploading"></i>
<input type=file style="position: fixed; top: -100em"></input> <input type=file style="position: fixed; top: -100em"></input>
</label> </label>
</div> </div>

2
src/components/retweet_button/retweet_button.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <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> <span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span>
</div> </div>
</template> </template>

14
src/components/status/status.vue
View File

@ -5,7 +5,7 @@
<div class='status-actions'> <div class='status-actions'>
<div> <div>
<a href="#" v-on:click.prevent="toggleReplying"> <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> </a>
</div> </div>
<retweet-button :status=status></retweet-button> <retweet-button :status=status></retweet-button>
@ -19,7 +19,7 @@
<div class="media status container muted"> <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><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
<small class="muteWords">{{muteWordHits.join(', ')}}</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> </div>
</template> </template>
<template v-if="!muted"> <template v-if="!muted">
@ -75,10 +75,10 @@
</h4> </h4>
</div> </div>
<div class="heading-icons"> <div class="heading-icons">
<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="fa icon-eye-off"></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="fa icon-binoculars"></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"> <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> </template>
</div> </div>
</div> </div>
@ -94,7 +94,7 @@
</div> </div>
</div> </div>
<div class="status-preview status-preview-loading base00-background base03-border" v-else-if="showPreview"> <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>
<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div> <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
@ -109,7 +109,7 @@
<div class='status-actions'> <div class='status-actions'>
<div> <div>
<a href="#" v-on:click.prevent="toggleReplying"> <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> </a>
</div> </div>
<retweet-button :status=status></retweet-button> <retweet-button :status=status></retweet-button>

6
src/components/user_settings/user_settings.vue
View File

@ -22,7 +22,7 @@
<div> <div>
<input type="file" @change="uploadFile(0, $event)" ></input> <input type="file" @change="uploadFile(0, $event)" ></input>
</div> </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> <button class="btn btn-default base05 base02-background" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
</div> </div>
<div class="setting-item"> <div class="setting-item">
@ -35,7 +35,7 @@
<div> <div>
<input type="file" @change="uploadFile(1, $event)" ></input> <input type="file" @change="uploadFile(1, $event)" ></input>
</div> </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> <button class="btn btn-default base05 base02-background" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
</div> </div>
<div class="setting-item"> <div class="setting-item">
@ -46,7 +46,7 @@
<div> <div>
<input type="file" @change="uploadFile(2, $event)" ></input> <input type="file" @change="uploadFile(2, $event)" ></input>
</div> </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> <button class="btn btn-default base05 base02-background" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
</div> </div>
</div> </div>

11
src/services/style_setter/style_setter.js
View File

@ -73,6 +73,7 @@ const setColors = (col, commit) => {
if (isDark) { if (isDark) {
mod = mod * -1 mod = mod * -1
} }
colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background 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['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 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['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['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['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 num = 10
const color = colors[`base0${8 - n}`] times(num, (n) => {
styleSheet.insertRule(`.base0${8 - n} { color: ${color}`, 'index-max') const color = colors[`base0${num - 1 - n}`]
styleSheet.insertRule(`.base0${8 - n}-background { background-color: ${color}`, 'index-max') 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') styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')