Merge branch 'appearance-tab' into shigusegubu-themes3
This commit is contained in:
Henry Jameson
commit
6447f89d77
16 changed files with 267 additions and 111 deletions
|
|
@ -106,6 +106,9 @@ const EmojiPicker = {
|
|||
}
|
||||
},
|
||||
inject: ['popoversZLayer'],
|
||||
mounted () {
|
||||
this.updateEmojiSize()
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
keyword: '',
|
||||
|
|
@ -120,6 +123,7 @@ const EmojiPicker = {
|
|||
groupRefs: {},
|
||||
emojiRefs: {},
|
||||
filteredEmojiGroups: [],
|
||||
emojiSize: 0,
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
|
|
@ -130,6 +134,23 @@ const EmojiPicker = {
|
|||
Popover
|
||||
},
|
||||
methods: {
|
||||
updateEmojiSize () {
|
||||
const css = window.getComputedStyle(this.$refs.popover.$el)
|
||||
const emojiSize = css.getPropertyValue('--emojiSize')
|
||||
const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
|
||||
const emojiSizeValue = emojiSize.replace(/[^0-9,.]+/, '')
|
||||
const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
|
||||
|
||||
let emojiSizeReal
|
||||
if (emojiSizeUnit.endsWith('em')) {
|
||||
emojiSizeReal = emojiSizeValue * fontSize
|
||||
} else {
|
||||
emojiSizeReal = emojiSizeValue
|
||||
}
|
||||
|
||||
const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSize)
|
||||
this.emojiSize = fullEmojiSize
|
||||
},
|
||||
showPicker () {
|
||||
this.$refs.popover.showPopover()
|
||||
this.onShowing()
|
||||
|
|
@ -268,14 +289,25 @@ const EmojiPicker = {
|
|||
minItemSize () {
|
||||
return this.emojiHeight
|
||||
},
|
||||
// used to watch it
|
||||
fontSize () {
|
||||
this.$nextTick(() => {
|
||||
this.updateEmojiSize()
|
||||
})
|
||||
return this.$store.getters.mergedConfig.fontSize
|
||||
},
|
||||
emojiHeight () {
|
||||
return 32 + 4
|
||||
return this.emojiSize
|
||||
},
|
||||
emojiWidth () {
|
||||
return 32 + 4
|
||||
return this.emojiSize
|
||||
},
|
||||
itemPerRow () {
|
||||
return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
|
||||
console.log(
|
||||
this.emojiWidth,
|
||||
this.width
|
||||
)
|
||||
return this.width ? Math.floor(this.width / this.emojiWidth) : 6
|
||||
},
|
||||
activeGroupView () {
|
||||
return this.showingStickers ? '' : this.activeGroup
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
$emoji-picker-header-height: 36px;
|
||||
$emoji-picker-header-picture-width: 32px;
|
||||
$emoji-picker-header-picture-height: 32px;
|
||||
$emoji-picker-emoji-size: 32px;
|
||||
|
||||
.emoji-picker {
|
||||
--__emoji-picker-header: 2.2em;
|
||||
|
||||
width: 25em;
|
||||
max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
|
||||
display: flex;
|
||||
|
|
@ -13,24 +10,26 @@ $emoji-picker-emoji-size: 32px;
|
|||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: $emoji-picker-header-picture-width;
|
||||
max-width: $emoji-picker-header-picture-width;
|
||||
height: $emoji-picker-header-picture-height;
|
||||
max-height: $emoji-picker-header-picture-height;
|
||||
width: var(--__emoji-picker-header);
|
||||
max-width: var(--__emoji-picker-header);
|
||||
height: var(--__emoji-picker-header);
|
||||
max-height: var(--__emoji-picker-header);
|
||||
|
||||
.still-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
width: var(--__emoji-picker-header);
|
||||
max-width: var(--__emoji-picker-header);
|
||||
height: var(--__emoji-picker-header);
|
||||
max-height: var(--__emoji-picker-header);
|
||||
object-fit: contain;
|
||||
|
||||
--_still_image-label-scale: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.keep-open,
|
||||
.too-many-emoji,
|
||||
.hide-custom-emoji {
|
||||
padding: 7px;
|
||||
padding: 0.5em;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
|
|
@ -44,13 +43,13 @@ $emoji-picker-emoji-size: 32px;
|
|||
}
|
||||
|
||||
.keep-open-label {
|
||||
padding: 0 7px;
|
||||
padding: 0 0.5em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.heading {
|
||||
display: flex;
|
||||
padding: 10px 7px 5px;
|
||||
padding: 0.7em 0.5em 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -65,13 +64,14 @@ $emoji-picker-emoji-size: 32px;
|
|||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.additional-tabs {
|
||||
display: flex;
|
||||
border-left: 1px solid;
|
||||
border-left-color: var(--border);
|
||||
padding-left: 7px;
|
||||
padding-left: 0.5em;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -80,25 +80,29 @@ $emoji-picker-emoji-size: 32px;
|
|||
flex-basis: auto;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
scrollbar-width: thin;
|
||||
|
||||
&-item {
|
||||
padding: 0 7px;
|
||||
padding: 0 0.5em;
|
||||
cursor: pointer;
|
||||
font-size: 1.85em;
|
||||
width: $emoji-picker-header-picture-width;
|
||||
max-width: $emoji-picker-header-picture-width;
|
||||
height: $emoji-picker-header-picture-height;
|
||||
max-height: $emoji-picker-header-picture-height;
|
||||
width: var(--__emoji-picker-header);
|
||||
max-width: var(--__emoji-picker-header);
|
||||
height: var(--__emoji-picker-header);
|
||||
max-height: var(--__emoji-picker-header);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.svg-inline--fa {
|
||||
font-size: 1.85em;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.toggled {
|
||||
border-bottom: 4px solid;
|
||||
border-bottom: 0.2em solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -125,7 +129,7 @@ $emoji-picker-emoji-size: 32px;
|
|||
|
||||
.emoji {
|
||||
&-search {
|
||||
padding: 5px;
|
||||
padding: 0.3em;
|
||||
flex: 0 0 auto;
|
||||
|
||||
input {
|
||||
|
|
@ -139,6 +143,7 @@ $emoji-picker-emoji-size: 32px;
|
|||
flex: 1 1 1px;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
user-select: none;
|
||||
mask:
|
||||
linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
|
||||
|
|
@ -165,13 +170,13 @@ $emoji-picker-emoji-size: 32px;
|
|||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 5px;
|
||||
justify-content: left;
|
||||
|
||||
&-title {
|
||||
font-size: 0.85em;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding-left: 0.3em;
|
||||
|
||||
&.disabled {
|
||||
display: none;
|
||||
|
|
@ -180,24 +185,28 @@ $emoji-picker-emoji-size: 32px;
|
|||
}
|
||||
|
||||
&-item {
|
||||
width: $emoji-picker-emoji-size;
|
||||
height: $emoji-picker-emoji-size;
|
||||
width: var(--emoji-size);
|
||||
height: var(--emoji-size);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
line-height: $emoji-picker-emoji-size;
|
||||
line-height: var(--emoji-size);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 4px;
|
||||
margin: 0.2em;
|
||||
cursor: pointer;
|
||||
|
||||
.emoji-picker-emoji.-custom {
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: var(--emoji-size);
|
||||
max-width: var(--emoji-size);
|
||||
height: var(--emoji-size);
|
||||
max-height: var(--emoji-size);
|
||||
|
||||
--_still_image-label-scale: 0.5;
|
||||
}
|
||||
|
||||
.emoji-picker-emoji.-unicode {
|
||||
font-size: 24px;
|
||||
font-size: 20.2em;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,11 @@ const AppearanceTab = {
|
|||
key: mode,
|
||||
value: mode,
|
||||
label: this.$t(`settings.third_column_mode_${mode}`)
|
||||
})),
|
||||
forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
|
||||
key: mode,
|
||||
value: i - 1,
|
||||
label: this.$t(`settings.forced_roundness_mode_${mode}`)
|
||||
}))
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -128,11 +128,36 @@
|
|||
<div class="setting-item">
|
||||
<h2>{{ $t('settings.visual_tweaks') }}</h2>
|
||||
<ul class="setting-list">
|
||||
<li>
|
||||
<ChoiceSetting
|
||||
id="forcedRoundness"
|
||||
path="forcedRoundness"
|
||||
:options="forcedRoundnessOptions"
|
||||
>
|
||||
{{ $t('settings.force_interface_roundness') }}
|
||||
</ChoiceSetting>
|
||||
</li>
|
||||
<li v-if="instanceWallpaperUsed">
|
||||
<BooleanSetting path="hideInstanceWallpaper">
|
||||
{{ $t('settings.hide_wallpaper') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting
|
||||
path="forceThemeRecompilation"
|
||||
:expert="1"
|
||||
>
|
||||
{{ $t('settings.force_theme_recompilation_debug') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<BooleanSetting
|
||||
path="themeDebug"
|
||||
:expert="1"
|
||||
>
|
||||
{{ $t('settings.theme_debug') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -148,14 +148,6 @@
|
|||
<div class="setting-item">
|
||||
<h2>{{ $t('settings.post_look_feel') }}</h2>
|
||||
<ul class="setting-list">
|
||||
<li>
|
||||
<BooleanSetting
|
||||
path="forceThemeRecompilation"
|
||||
:expert="1"
|
||||
>
|
||||
{{ $t('settings.force_theme_recompilation_debug') }}
|
||||
</BooleanSetting>
|
||||
</li>
|
||||
<li>
|
||||
<ChoiceSetting
|
||||
id="conversationDisplay"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue