nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 02:50:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

scss changes in SetFolderIcon, add translation to sk/cn

Browse Source
This commit is contained in:
Milos Holba
2021-02-11 20:14:27 +01:00
parent 7be02edead
commit eebeee6948
10 changed files with 243 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/FileItemGrid.vue
+3 -3
View File
@@ -26,10 +26,10 @@
<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/>
<!-- If folder have set emoji -->
<Emoji class="emoji" v-if="isFolder && folderIconHandle" :emoji="folderIconHandle" size="80" />
<Emoji class="emoji" v-if="isFolder && setFolderEmojiOrColor" :emoji="setFolderEmojiOrColor" size="80" />
<!--Else show only folder icon-->
<FontAwesomeIcon v-if="isFolder && !folderIconHandle" :ref="`folder${this.data.unique_id}`" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
<FontAwesomeIcon v-if="isFolder && !setFolderEmojiOrColor" :ref="`folder${this.data.unique_id}`" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
</div>
@@ -89,7 +89,7 @@ export default {
...mapGetters([
'FilePreviewType', 'sharedDetail', 'fileInfoDetail'
]),
folderIconHandle(){
setFolderEmojiOrColor(){
// If folder have set some color
if(this.data.icon_color) {
resources/js/components/FilesView/FileItemList.vue
+3 -3
View File
@@ -32,10 +32,10 @@
<img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/>
<!-- If folder have set emoji -->
<Emoji v-if="isFolder && folderIconHandle" :emoji="folderIconHandle" size="52" />
<Emoji v-if="isFolder && setFolderEmojiOrColor" :emoji="setFolderEmojiOrColor" size="52" />
<!--Else show only folder icon-->
<FontAwesomeIcon v-if="isFolder && !folderIconHandle" :ref="`folder${this.data.unique_id}`" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>
<FontAwesomeIcon v-if="isFolder && !setFolderEmojiOrColor" :ref="`folder${this.data.unique_id}`" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>
</div>
@@ -95,7 +95,7 @@ export default {
computed: {
...mapGetters(['FilePreviewType', 'fileInfoDetail']),
...mapGetters({ allData: 'data' }),
folderIconHandle(){
setFolderEmojiOrColor(){
// If folder have set some icon color
if(this.data.icon_color) {
resources/js/components/Others/Emoji.vue
+5 -15
View File
@@ -15,15 +15,16 @@ export default {
transferEmoji () {
// Transfer single emoji to twemoji
return !this.isIos
? twemoji.parse(this.emoji.char, {
let tweomjiParse = twemoji.parse(this.emoji.char, {
folder: 'svg',
ext: '.svg',
attributes: () => ({
loading: 'lazy',
})
})
: this.emoji.char
// Check the OS, if is OS not iOS return transfered emoji to twemoji
return !this.isIos ? tweomjiParse : this.emoji.char
},
},
data () {
@@ -32,18 +33,7 @@ export default {
}
},
created () {
const toMatch = [
/iPhone/i,
/iPad/i,
/iPod/i,
/iOS/i,
/macOS/i,
/Macintosh/i
]
this.isIos = toMatch.some(toMatchItem => {
return navigator.userAgent.match(toMatchItem)
})
this.isIos = this.$isIos()
}
}
</script>
resources/js/components/Others/SetFolderIcon.vue
+51 -35
View File
@@ -6,11 +6,12 @@
<!-- Emojis -->
<TabOption :selected="true" id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
<div class="select-emoji-wrapper">
<label class="main-label">Pick Yout Emoji Icon:</label>
<label class="main-label">{{$t('popup_rename.select_emoji_label')}}:</label>
<!-- Selected Emoji input -->
<div @click.stop="openMenu" class="select-input-wrapper">
<div @click.stop="openMenu" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
<!-- If is emoji selected -->
<div class="select-input" v-if="selectedEmoji">
<div @click.stop="resetEmoji" class="select-input-icon-wrapper">
<x-icon size="14" class="select-input-icon"/>
@@ -19,18 +20,18 @@
<span>{{selectedEmoji.name}}</span>
</div>
<!-- If is emoji not selected -->
<div class="not-selected" v-if="! selectedEmoji">
<span> {{$t('popup_rename.set_emoji_input_placeholder')}}</span>
</div>
<chevron-down-icon :class="{'active-menu' : selectOpen}" size="19"/>
<chevron-down-icon class="row-icon" size="19"/>
</div>
<!-- Emojis List -->
<transition v-if="selectOpen" name="slide-in">
<div>
<transition name="slide-in">
<div v-if="selectOpen">
<!-- Spinner -->
<div v-if="!loadedList" class="emoji-wrapper">
<Spinner />
@@ -74,9 +75,7 @@
</div>
</div>
</div>
</transition>
</div>
</TabOption>
@@ -84,7 +83,7 @@
<!-- Colors -->
<TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
<div class="color-pick-wrapper">
<label class="main-label">{{$t('popup_rename.color_pick_label')}}</label>
<label class="main-label">{{$t('popup_rename.color_pick_label')}}:</label>
<ul class="color-wrapper">
<li v-for="(color, index) in colors"
:key="index"
@@ -190,11 +189,13 @@ export default {
},
setIcon( value ) {
// Set emoji
if( value.emoji ){
this.selectedEmoji = value.emoji
this.selectedColor = undefined
}
// Set color
if( value.color ) {
this.selectedColor = value.color
this.selectedEmoji = undefined
@@ -282,6 +283,7 @@ export default {
display: flex;
flex-direction: column;
padding: 10px;
z-index: 10;
top: 152px;
@@ -343,11 +345,11 @@ export default {
margin-bottom: 0px;
}
.options-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.options-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.group-name-label {
width: 100%;
@@ -356,12 +358,12 @@ export default {
margin-bottom: 10px;
}
.option {
list-style: none;
width: 45px;
height: 45px;
padding: 6px;
cursor: pointer;
.option {
list-style: none;
width: 45px;
height: 45px;
padding: 6px;
cursor: pointer;
&:hover {
background: $light_background;
@@ -369,7 +371,7 @@ export default {
}
}
.not-found {
.not-found {
align-self: center;
margin:auto;
font-weight: 700;
@@ -379,8 +381,6 @@ export default {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
}
}
}
}
@@ -394,10 +394,20 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid transparent;
@include transition(150ms);
.active-menu {
.row-icon {
@include transition(150ms);
transform: rotate(180deg);
}
&.active-menu {
border-color: $theme;
box-shadow: 0 0 7px rgba($theme, 0.3);
.row-icon {
transform: rotate(180deg);
}
}
.select-input {
@@ -446,23 +456,29 @@ export default {
}
}
.wrapper {
margin-bottom: 10px;
}
.set-folder-icon {
position: relative;
}
.slide-in-enter-active {
transition: all 5s ease;
.slide-in-enter-active {
transition: all 150ms ease;
}
.slide-in-enter
{
.slide-in-enter,
.slide-in-leave-to{
opacity: 0;
transform: translateY(-50px);
transform: translateY(-300px);
}
.slide-in-enter-to,
.slide-in-leave {
transform: translateY(-152px);
}
@media (max-width: 336px) {
.emoji-wrapper {
top: 173px;
}
}
@media (prefers-color-scheme: dark) {
resources/js/components/Others/ThumbnailItem.vue
+3 -3
View File
@@ -14,10 +14,10 @@
<img v-if="isImage" class="image" :src="item.thumbnail" :alt="item.name"/>
<!-- If folder have set emoji -->
<Emoji v-if="isFolder && folderIconHandle" :emoji="folderIconHandle" size="36"/>
<Emoji v-if="isFolder && setFolderEmojiOrColor" :emoji="setFolderEmojiOrColor" size="36"/>
<!--Else show only folder icon-->
<FontAwesomeIcon ref="folderIcon" v-if="isFolder && !folderIconHandle" class="folder-icon" icon="folder"/>
<FontAwesomeIcon ref="folderIcon" v-if="isFolder && !setFolderEmojiOrColor" class="folder-icon" icon="folder"/>
</div>
@@ -54,7 +54,7 @@
computed: {
...mapGetters(['currentFolder']),
folderIconHandle(){
setFolderEmojiOrColor(){
// Set icon folder if set folder from rename popup
if(this.setFolderIcon){