Merge pull request #408 from nextcloud/styling

Styling
This commit is contained in:
René Gieling 2018-11-02 14:56:38 +01:00 коммит произвёл GitHub
Родитель 25395318c4 3b72ef8885
Коммит 12ab21afcf
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
10 изменённых файлов: 1728 добавлений и 66 удалений

Просмотреть файл

@ -13,3 +13,11 @@ $fg_yes: #49bc49;
$bg_current_user: #f7f7f7;
$fg_current_user: #0082c9;
// Icon definitions
--icon-app: url('/index.php/svg/polls/app/888888?v=1');
--icon-yes: url('/index.php/svg/core/actions/checkmark/49bc49?v=1');
--icon-no: url('/index.php/svg/core/actions/close/f45573?v=1');
--icon-maybe: url('/index.php/svg/polls/maybe-vote/f0db98?v=1');
--icon-comment-yes: url('/index.php/svg/core/actions/comment/49bc49?v=1');
--icon-comment-no: url('/index.php/svg/core/actions/comment/f45573?v=1');

Просмотреть файл

@ -29,6 +29,15 @@ $mediabreak-3: $group-1-width + $owner-width + max($group-2-1-width, $group-2-2-
.table {
width: 100%;
}
#emptycontent {
.icon-polls {
background-color: black;
-webkit-mask: url('../img/app.svg') no-repeat 50% 50%;
mask: url('../img/app.svg') no-repeat 50% 50%;
}
}
.table-row {
display: flex;
width: 100%;
@ -131,19 +140,19 @@ $mediabreak-3: $group-1-width + $owner-width + max($group-2-1-width, $group-2-2-
div {
&.partic_voted {
&.icon-partic_yes {
background-image: url('../img/yes-vote.svg');
background-image: var(--icon-yes);
}
&.icon-partic_no {
background-image: url('../img/no-vote.svg');
background-image: var(--icon-no);
}
}
&.partic_commented {
&.icon-commented_yes {
background-image: url('../img/yes-comment.svg');
background-image: var(--icon-comment-yes);
}
&.icon-commented_no {
background-image: url('../img/no-comment.svg');
background-image: var(--icon-comment-no);
}
}
}

Просмотреть файл

@ -9,7 +9,7 @@ h1 {
}
}
/* allow horizontal scrollbar
/* allow horizontal scrollbar
otherwise user management is not usable on mobile */
@media only screen and (max-width: 768px) {
#app-content {
@ -21,13 +21,6 @@ h1 {
flex-direction: column;
}
.icon-polls {
background-color: black;
-webkit-mask: url('../img/app.svg') no-repeat 50% 50%;
mask: url('../img/app.svg') no-repeat 50% 50%;
}
#controls {
// adopted from NC13 for compatibily with OC10 and NC11-NC12
width: 100%;
@ -48,7 +41,7 @@ h1 {
}
}
.col-100 {
width: 100%;
padding: 0px 15px;

Просмотреть файл

@ -4,6 +4,7 @@ $border_current_user: 2px solid;
$border_user: 1px solid #ddd;
$user-column-width: 265px;
#content {
display:flex;
}
@ -50,12 +51,12 @@ $user-column-width: 265px;
.counter {
font-size: 18px;
.yes, .no {
& > div {
margin: 0 2px;
.svg {
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
background-size: 18px;
height: 24px;
width: 24px;
}
@ -63,13 +64,13 @@ $user-column-width: 265px;
.yes {
color: $fg_yes;
.svg {
background-image: url('../img/yes-vote.svg');
background-image: var(--icon-yes);
}
}
.no {
color: $fg_no;
.svg {
background-image: url('../img/no-vote.svg');
background-image: var(--icon-no);
}
}
}
@ -125,19 +126,19 @@ $user-column-width: 265px;
&.yes {
background-color: $bg_yes;
color: $fg_yes;
background-image: url('../img/yes-vote.svg');
background-image: var(--icon-yes);
}
&.no {
background-color: $bg_no;
color: $fg_no;
background-image: url('../img/no-vote.svg');
background-image: var(--icon-no);
}
&.maybe {
background-color: $bg_maybe;
color: $fg_maybe;
background-image: url('../img/maybe-vote.svg');
background-image: var(--icon-maybe);
}
&.unvoted {
@ -205,8 +206,8 @@ $user-column-width: 265px;
.badge {
position: relative;
top: -34px;
right: -24px;
background-image: url("../../../apps/polls/css/../img/yes-comment.svg");
left: -26px;
background-image: var(--icon-comment-yes);
background-repeat: no-repeat;
background-size: 33px;
padding: 10px;
@ -218,7 +219,7 @@ $user-column-width: 265px;
min-width: 34px;
text-align: center;
&.no-comments {
background-image: url('../../../apps/polls/css/../img/no-comment.svg');
background-image: var(--icon-comment-no);
}
}
}

Просмотреть файл

@ -1,5 +1,30 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">
<path
d="m 8.8957253,9.4975672 -2.4237061,0 0,-0.3289795 q 0,-0.5505371 0.2215576,-0.9735108 Q 6.9151344,7.7653894 7.6268044,7.1074305 L 8.0564919,6.7180262 Q 8.4391823,6.3689051 8.6137428,6.0600672 8.7950172,5.7512293 8.7950172,5.4423914 q 0,-0.4699707 -0.3222656,-0.7318115 Q 8.150486,4.4420252 7.5730934,4.4420252 q -0.5438232,0 -1.1749267,0.2282715 -0.6311036,0.2215576 -1.315918,0.6646728 l 0,-2.1081543 Q 5.8946266,2.9448328 6.5660133,2.8105555 7.2374001,2.6762781 7.8617897,2.6762781 q 1.6381836,0 2.4975583,0.6713867 0.859375,0.6646729 0.859375,1.9470215 0,0.657959 -0.261841,1.1816406 -0.26184,0.5169678 -0.892944,1.114502 L 9.6342506,7.9735193 Q 9.1777077,8.3897791 9.0367165,8.644906 8.8957253,8.8933191 8.8957253,9.1954432 l 0,0.302124 z m -2.4237061,0.9936528 2.4237061,0 0,2.390136 -2.4237061,0 0,-2.390136 z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:13.75px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#ffc107;fill-opacity:1" />
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg4"
version="1.1"
width="16"
height="16">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<path
id="path2"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:13.75px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#ffc107;fill-opacity:1;stroke-width:1.33733869"
d="M 8.971553,10.357894 H 5.8118163 V 9.9065792 q 0,-0.7552632 0.2888402,-1.3355264 Q 6.3894968,7.9815791 7.3172868,7.0789476 L 7.8774618,6.544737 q 0.498906,-0.4789474 0.726477,-0.9026315 0.2363235,-0.4236843 0.2363235,-0.8473684 0,-0.644737 -0.4201309,-1.0039475 -0.4201313,-0.3684211 -1.1728666,-0.3684211 -0.7089715,0 -1.5317287,0.3131579 Q 4.8927789,4.0394738 4,4.6473685 V 1.7552632 Q 5.059081,1.3684211 5.9343545,1.1842107 6.8096281,1 7.6236325,1 9.7593,1 10.879649,1.9210527 12,2.8328948 12,4.5921054 12,5.4947371 11.658643,6.213158 11.317287,6.9223685 10.494529,7.7421055 L 9.934355,8.2671054 Q 9.339168,8.8381581 9.155361,9.188158 8.971553,9.5289475 8.971553,9.9434213 Z m -3.1597367,1.36316 H 8.971553 V 15 H 5.8118163 Z" />
</svg>

До

Ширина:  |  Высота:  |  Размер: 1.1 KiB

После

Ширина:  |  Высота:  |  Размер: 1.6 KiB

30
img/questionmark.svg Normal file
Просмотреть файл

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg4"
version="1.1"
width="16"
height="16">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<path
id="path2"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:13.75px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#000000;fill-opacity:1;stroke-width:1.33733869"
d="M 8.971553,10.357895 H 5.8118161 V 9.9065791 q 0,-0.7552619 0.2888403,-1.3355259 0.2888401,-0.5894748 1.2166301,-1.492105 L 7.8774614,6.5447368 Q 8.3763673,6.0657896 8.6039384,5.6421056 8.8402623,5.2184211 8.8402623,4.794737 q 0,-0.6447368 -0.4201313,-1.0039474 -0.4201313,-0.3684211 -1.1728664,-0.3684211 -0.7089716,0 -1.5317285,0.313158 Q 4.8927789,4.0394738 4,4.6473686 V 1.7552632 Q 5.0590809,1.3684211 5.9343543,1.1842106 6.8096279,1 7.6236322,1 9.7592993,1 10.879649,1.9210525 12,2.8328948 12,4.5921053 12,5.494737 11.658642,6.2131578 11.317287,6.922369 10.494529,7.742105 L 9.9343545,8.2671057 Q 9.3391687,8.8381576 9.1553609,9.1881576 8.971553,9.5289468 8.971553,9.9434222 Z M 5.8118161,11.721053 H 8.971553 V 15 H 5.8118161 Z" />
</svg>

После

Ширина:  |  Высота:  |  Размер: 1.6 KiB

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -116,15 +116,15 @@
<div id="configurationsTabView" class="tab">
<div class="configBox" v-if="poll.mode =='edit'">
<label class="title">{{ t('polls', 'Poll type') }}</label>
<label class="title icon-checkmark">{{ t('polls', 'Poll type') }}</label>
<input id="datePoll" v-model="poll.event.type" value="datePoll" type="radio" class="radio" :disabled="protect"/>
<label for="datePoll">{{ t('polls', 'Event schedule') }}</label>
<input id="textPoll" v-model="poll.event.type" value="textPoll" type="radio" class="radio" :disabled="protect"/>
<label for="textPoll">{{ t('polls', 'Text based') }}</label>
</div>
<div class="configBox">
<label class="title">{{ t('polls', 'Poll configurations') }}</label>
<div class="configBox ">
<label class="title icon-settings">{{ t('polls', 'Poll configurations') }}</label>
<input :disabled="protect" id="disallowMaybe" v-model="poll.event.disallowMaybe"type="checkbox" class="checkbox" />
<label for="disallowMaybe">{{ t('polls', 'Disallow maybe vote') }}</label>
@ -148,7 +148,7 @@
</div>
<div class="configBox">
<label class="title">{{ t('polls', 'Access') }}</label>
<label class="title icon-user">{{ t('polls', 'Access') }}</label>
<input :disabled="protect" type="radio" v-model="poll.event.access" value="registered" id="private" class="radio"/>
<label for="private">{{ t('polls', 'Registered users only') }}</label>
<input :disabled="protect" type="radio" v-model="poll.event.access" value="hidden" id="hidden" class="radio"/>
@ -510,12 +510,16 @@
display: flex;
flex-direction: column;
padding: 8px 8px;
&> * {
padding-left: 21px;
}
&> .title {
background-position: 0px 2px;
padding-left: 24px;
opacity: 0.7;
font-weight: bold;
margin-bottom: 4px;
}
}
}

Просмотреть файл

@ -23,24 +23,24 @@
<template>
<div>
<h2> {{ t('polls', 'Share with') }}</h2>
<multiselect
v-model="shares"
:options="users"
<multiselect
v-model="shares"
:options="users"
:option-height=32
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
label="displayName"
track-by="id"
:options-limit="20"
id="ajax"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
label="displayName"
track-by="id"
:options-limit="20"
id="ajax"
@search-change="loadUsersAsync"
@close="updateShares"
:loading="isLoading"
:internal-search="false"
:hide-selected="true"
:searchable="true"
:hide-selected="true"
:searchable="true"
:preselect-first="true"
:placeholder="placeholder">
<template slot="selection" slot-scope="{ values, search, isOpen }">
@ -54,15 +54,15 @@
</div>
</template>
</multiselect>
<transition-group tag="ul" v-bind:css="false" class="shared-list">
<li v-for="(item, index) in sortedShares"
v-bind:key="item.displayName"
<li v-for="(item, index) in sortedShares"
v-bind:key="item.displayName"
v-bind:data-index="index">
<user-div :user-id="item.id" :display-name="item.displayName" :type="item.type" :hide-names="hideNames"></user-div>
<div class="options">
<a @click="removeShare(index, item)" class="icon icon-delete svg delete-poll"></a>
</div>
<user-div :user-id="item.id" :type="item.type" :hide-names="hideNames"></user-div>
</li>
</transition-group>
</div>
@ -76,9 +76,9 @@
components: {
Multiselect
},
props: ['placeholder', 'activeShares','hideNames'],
data: function () {
return {
shares: [],
@ -91,22 +91,22 @@
}
}
},
computed: {
sortedShares: function() {
return this.shares.sort(this.sortByDisplayname)
}
},
methods: {
removeShare: function (index, item){
this.$emit('remove-share', item)
},
updateShares: function (){
this.$emit('update-shares', this.shares)
},
loadUsersAsync: function (query) {
this.isLoading = false
this.siteUsersListOptions.query = query
@ -118,13 +118,13 @@
console.log(error.response)
})
},
sortByDisplayname: function (a, b) {
if (a.displayName.toLowerCase() < b.displayName.toLowerCase()) return -1
if (a.displayName.toLowerCase() > b.displayName.toLowerCase()) return 1
return 0
}
},
watch: {
activeShares(value) {
@ -141,19 +141,19 @@
flex-wrap: wrap;
justify-content: flex-start;
padding-top: 8px;
> li {
display: flex;
}
}
.options {
display: flex;
position: relative;
top: 13px;
left: 43px;
top: -12px;
left: -13px;
}
div, select {
&.multiselect:not(.multiselect-vue), &.multiselect:not(.multiselect-vue) {
max-width: unset;
@ -168,7 +168,7 @@
.option__desc {
flex-grow: 1;
}
.multiselect__option--highlight {
background: #41b883;

Просмотреть файл

@ -59,6 +59,9 @@
<div id="emptycontent" class="">
<div class="icon-polls"></div>
<h2><?php p($l->t('No existing polls.')); ?></h2>
<a href="/index.php/apps/polls/create" class="button new">
<span><?php p($l->t('Click here to add a poll')); ?></span>
</a>
</div>
<?php else : ?>
@ -201,7 +204,7 @@
</div>
</div>
</div>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
</div>
<form id="form_delete_poll" name="form_delete_poll" action="<?php p($urlGenerator->linkToRoute('polls.page.delete_poll')); ?>" method="POST"></form>