nextcloud
/
bookmarks
mirror of https://github.com/nextcloud/bookmarks
0
0
Fork 0
Code Issues Releases Wiki Activity

UI: Add ellipsis to Folder

This commit is contained in:
Marcel Klehr 2020-04-07 21:37:53 +02:00
parent 796d6c8a26
commit 18d7da49ee
1 changed files with 76 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/components/Folder.vue
View File

@ -41,24 +41,24 @@
</div>
</template>
<script>
import Vue from 'vue'
import { getCurrentUser } from '@nextcloud/auth'
import UserBubble from '@nextcloud/vue/dist/Components/UserBubble'
import Actions from '@nextcloud/vue/dist/Components/Actions'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
import { actions, mutations } from '../store/'
import Vue from 'vue'
import { getCurrentUser } from '@nextcloud/auth'
import UserBubble from '@nextcloud/vue/dist/Components/UserBubble'
import Actions from '@nextcloud/vue/dist/Components/Actions'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
import { actions, mutations } from '../store/'
export default {
name: 'Folder',
components: {
Actions,
ActionButton,
UserBubble,
},
props: {
folder: {
type: Object,
required: true,
export default {
name: 'Folder',
components: {
Actions,
ActionButton,
UserBubble,
},
props: {
folder: {
type: Object,
required: true,
},
},
data() {
@ -114,74 +114,73 @@ export default {
}
</script>
<style>
.folder {
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
position: relative;
}
.folder {
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
position: relative;
}
.folder:hover {
background: var(--color-background-dark);
}
.folder:hover {
background: var(--color-background-dark);
}
.folder__icon {
flex: 0;
height: 20px;
width: 20px;
background-size: cover;
margin: 15px;
cursor: pointer;
background-image: url('/svg/core/filetypes/folder?color=0082c9');
background-repeat: no-repeat;
background-position: center;
}
.folder__icon {
flex: 0;
height: 20px;
width: 20px;
background-size: cover;
margin: 15px;
cursor: pointer;
background-image: url('/svg/core/filetypes/folder?color=0082c9');
background-repeat: no-repeat;
background-position: center;
}
.folder__icon.shared {
background-image: url('/svg/core/actions/share?color=ffffff'), url('/svg/core/filetypes/folder?color=0082c9');
background-size: 30px, cover !important;
}
.folder__icon.shared {
background-image: url('/svg/core/actions/share?color=ffffff'), url('/svg/core/filetypes/folder?color=0082c9');
background-size: 30px, cover !important;
}
.folder--gridview .folder__icon {
height: 70px;
width: 70px;
background-size: cover;
position: absolute;
top: 20%;
left: calc(45% - 35px);
}
.folder--gridview .folder__icon {
height: 70px;
width: 70px;
background-size: cover;
position: absolute;
top: 20%;
left: calc(45% - 35px);
}
.folder__title {
display: flex;
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
margin: 0;
padding: 15px 0;
}
.folder__title {
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
margin: 0;
padding: 15px 0;
}
.folder--gridview .folder__title {
margin-left: 15px;
}
.folder--gridview .folder__title {
margin-left: 15px;
}
.folder--gridview .folder__owner {
margin-bottom: 7px;
}
.folder--gridview .folder__owner {
margin-bottom: 7px;
}
.folder__actions {
flex: 0;
}
.folder__actions {
flex: 0;
}
.folder__title input {
width: 100%;
border-top: none;
border-left: none;
border-right: none;
}
.folder__title input {
width: 100%;
border-top: none;
border-left: none;
border-right: none;
}
.folder__title button {
height: 20px;
}
.folder__title button {
height: 20px;
}
</style>