local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Improve link share layout

Browse source
This commit is contained in:
kolaente 2020-02-09 17:54:02 +01:00
parent 6258c59c18
commit dd0703562f
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 35 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/sharing/linkSharing.vue
View file

@ -7,14 +7,13 @@
</header> </header>
<div class="card-content content sharables-list"> <div class="card-content content sharables-list">
<form @submit.prevent="add()" class="add-form"> <form @submit.prevent="add()" class="add-form">
<div class="field is-grouped"> <p>
<div class="control"> Share with a link:
<!-- TODO: maybe move this into a modal? --> </p>
Add a new link share: <div class="field has-addons">
</div>
<div class="control"> <div class="control">
<div class="select"> <div class="select">
<select v-model="selectedRight" class="button buttonright"> <select v-model="selectedRight">
<option :value="rights.READ">Read only</option> <option :value="rights.READ">Read only</option>
<option :value="rights.READ_WRITE">Read & write</option> <option :value="rights.READ_WRITE">Read & write</option>
<option :value="rights.ADMIN">Admin</option> <option :value="rights.ADMIN">Admin</option>
@ -23,15 +22,12 @@
</div> </div>
<div class="control"> <div class="control">
<button type="submit" class="button is-success"> <button type="submit" class="button is-success">
<span class="icon is-small"> Share
<icon icon="plus"/>
</span>
Add
</button> </button>
</div> </div>
</div> </div>
</form> </form>
<table class="table is-striped is-hoverable is-fullwidth"> <table class="table is-striped is-hoverable is-fullwidth link-share-list">
<tbody> <tbody>
<tr> <tr>
<th>Link</th> <th>Link</th>
@ -48,7 +44,7 @@
</div> </div>
<div class="control"> <div class="control">
<a class="button is-success noshadow" @click="copy(getShareLink(s.hash))"> <a class="button is-success noshadow" @click="copy(getShareLink(s.hash))">
<span class="icon is-small"> <span class="icon">
<icon icon="paste"/> <icon icon="paste"/>
</span> </span>
</a> </a>
@ -80,7 +76,7 @@
</td> </td>
<td class="actions"> <td class="actions">
<button @click="linkIDToDelete = s.id; showDeleteModal = true" class="button is-danger icon-only"> <button @click="linkIDToDelete = s.id; showDeleteModal = true" class="button is-danger icon-only">
<span class="icon is-small"> <span class="icon">
<icon icon="trash-alt"/> <icon icon="trash-alt"/>
</span> </span>
</button> </button>

26
src/styles/theme/link-share.scss
View file

@ -13,3 +13,29 @@
max-width: 100%; max-width: 100%;
} }
} }
.link-share-list {
.field.has-addons {
.control:first-child{
width: 100%;
}
.button {
height: 40px;
}
@media screen and (max-width: $tablet) {
.control:first-child {
display: none;
}
.button {
border-radius: $radius !important;
}
}
}
}
.sharables-list {
overflow-y: auto
}