Polish sidebar (#215)
Signed-off-by: Artem Anufrij <artem.anufrij@live.de>
This commit is contained in:
Artem Anufrij
committed by
Julius Härtl
Julius Härtl
parent
e908593ce0
commit
1029a21f87
103
css/style.css
103
css/style.css
@@ -73,7 +73,7 @@ button.button-inline:hover {
|
||||
.app-navigation-entry-utils-menu-share {
|
||||
display: flex !important;
|
||||
padding: 14px;
|
||||
opacity: 0.4;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
#app-navigation .app-navigation-entry-edit {
|
||||
@@ -293,7 +293,7 @@ button.button-inline:hover {
|
||||
.stack h2 button {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
opacity: 0.25;
|
||||
opacity: 0.3;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@@ -328,7 +328,7 @@ button.button-inline:hover {
|
||||
}
|
||||
|
||||
.card .card-controls .card-options {
|
||||
opacity: 0.25;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
@@ -484,7 +484,7 @@ button.button-inline:hover {
|
||||
margin: -4px 4px -4px -4px;
|
||||
padding: 0px 4px;
|
||||
font-size: 90%;
|
||||
opacity: .7;
|
||||
opacity: 0.7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -526,18 +526,26 @@ button.button-inline:hover {
|
||||
#card-header {
|
||||
}
|
||||
|
||||
#card-header h2 {
|
||||
#card-header h2, #sidebar-header h2 {
|
||||
font-size: 14pt;
|
||||
padding: 10px 10px 9px;
|
||||
padding: 9px 10px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
#card-header h2 input {
|
||||
min-height: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#sidebar-header .icon-close, #card-header .icon-close {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
padding: 14px;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
#card-meta {
|
||||
@@ -549,27 +557,59 @@ button.button-inline:hover {
|
||||
#card-dates {
|
||||
font-size: 80%;
|
||||
color: #aaaaaa;
|
||||
margin-bottom: 3px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#card-meta #labels {
|
||||
margin-bottom: 10px;
|
||||
#card-tag-label {
|
||||
padding-top: 0px !important;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#card-meta .duedate {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
#card-meta .duedate .timepicker-input {
|
||||
width: 50px;
|
||||
border-radius: 0px 3px 3px 0px;
|
||||
}
|
||||
|
||||
#card-meta .duedate .datepicker-input {
|
||||
width: 85px;
|
||||
margin: 3px 0px;
|
||||
border-right: 0;
|
||||
border-radius: 3px 0px 0px 3px;
|
||||
}
|
||||
|
||||
#card-meta .duedate .icon {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#card-meta .duedate .icon:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#card-meta .select2-container {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#card-description {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#card-description > h3 {
|
||||
border-bottom: 1px solid #333333;
|
||||
font-weight: 600;
|
||||
font-size: 10pt;
|
||||
padding: 5px;
|
||||
#card-meta h3 {
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
padding: 15px 0px 5px 0px;
|
||||
}
|
||||
|
||||
#card-meta h3 > div {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#card-description > div {
|
||||
@@ -588,20 +628,20 @@ button.button-inline:hover {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#card-description .save-indicator {
|
||||
#card-meta .save-indicator {
|
||||
background-color: #009900;
|
||||
color: #ffffff;
|
||||
border-radius: 3px;
|
||||
float: right;
|
||||
padding: 1px 10px;
|
||||
padding: 0px 10px;
|
||||
font-size: 8pt !important;
|
||||
display: none;
|
||||
align-self: flex-end;
|
||||
}
|
||||
#card-description .icon-help {
|
||||
float: right;
|
||||
#card-meta .icon-help {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#sidebar-header,
|
||||
.card-block {
|
||||
padding: 15px;
|
||||
}
|
||||
@@ -695,7 +735,7 @@ button.button-inline:hover {
|
||||
background-image: url(../../../core/img/actions/checkmark.svg);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 1.0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.colorselect .dark.selected {
|
||||
@@ -876,10 +916,6 @@ button.button-inline:hover {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#board-detail-labels {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#board-detail-labels ul li input {
|
||||
margin: 0px;
|
||||
padding: 5px;
|
||||
@@ -890,7 +926,7 @@ button.button-inline:hover {
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
border: none;
|
||||
border-radius: 0px 0px 3px 3px;
|
||||
border-radius: 0px 0px 5px 5px;
|
||||
}
|
||||
|
||||
#board-detail-labels ul li a.icon {
|
||||
@@ -926,6 +962,10 @@ button.button-inline:hover {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tabsContainer {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#shareWithList .avatar {
|
||||
float: left;
|
||||
margin-top: -5px;
|
||||
@@ -948,6 +988,7 @@ button.button-inline:hover {
|
||||
padding: 0;
|
||||
float: left !important;
|
||||
display: block;
|
||||
border-radius: 0px 0px 5px 5px !important;
|
||||
}
|
||||
|
||||
.ui-select-match-item .select-label {
|
||||
@@ -956,6 +997,10 @@ button.button-inline:hover {
|
||||
margin-right: -23px !important;
|
||||
}
|
||||
|
||||
.ui-select-choices-group .choose-label {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.select2-container-multi .select2-choices .select2-search-choice {
|
||||
padding: 3px 0 !important;
|
||||
border: 0 !important;
|
||||
@@ -977,6 +1022,10 @@ button.button-inline:hover {
|
||||
width:100% !important;
|
||||
}
|
||||
|
||||
.select2-result-label {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.select2-result-label span {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -28,54 +28,45 @@
|
||||
<?php p($l->t('by')); ?>
|
||||
<span>{{ cardservice.getCurrent().owner.displayname }}</span>
|
||||
</div>
|
||||
|
||||
<h3 id='card-tag-label'>
|
||||
<?php p($l->t('Tags')); ?>
|
||||
</h3>
|
||||
<div id="labels">
|
||||
<ui-select multiple tagging="" ng-model="card.labels" theme="select2"
|
||||
ng-disabled="boardservice.isArchived() || card.archived"
|
||||
style="width:100%;" title="Choose a label"
|
||||
placeholder="Add a label"
|
||||
style="width:100%;" title="<?php p($l->t('Choose a label')); ?>"
|
||||
placeholder="<?php p($l->t('Add a label')); ?>"
|
||||
on-select="labelAssign($item, $model)"
|
||||
on-remove="labelRemove($item, $model)" ng-disabled="!boardservice.canEdit() || archived">
|
||||
<ui-select-match placeholder="Select labels…">
|
||||
<ui-select-match placeholder="<?php p($l->t('Select labels…')); ?>">
|
||||
<span class="select-label" style="background-color:#{{$item.color}}; color:{{ $item.color|textColorFilter }};">{{$item.title}} </span>
|
||||
</ui-select-match>
|
||||
<ui-select-choices
|
||||
repeat="label in boardservice.getCurrent().labels | filter:$select.search">
|
||||
<span
|
||||
style="background-color:#{{label.color}}; color:{{ label.color|textColorFilter }};">{{label.title}}</span>
|
||||
<span class="choose-label" style="background-color:#{{label.color}}; color:{{ label.color|textColorFilter }};">{{label.title}}</span>
|
||||
</ui-select-choices>
|
||||
</ui-select>
|
||||
|
||||
<div class="duedate">
|
||||
<input class="datepicker-input medium focus" type="text" placeholder="Set a due date" value="{{ cardservice.getCurrent().duedate | parseDate }}" datepicker="due" />
|
||||
<input class="timepicker-input medium focus" type="text" placeholder="00:00:00" ng-if="cardservice.getCurrent().duedate" value="{{ cardservice.getCurrent().duedate | parseTime }}" timepicker="due" />
|
||||
<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<h3>
|
||||
<?php p($l->t('Due date')); ?>
|
||||
</h3>
|
||||
<div class="duedate">
|
||||
<input class="datepicker-input medium focus" type="text" placeholder="<?php p($l->t('Click to set')); ?>" value="{{ cardservice.getCurrent().duedate | parseDate }}" datepicker="due" />
|
||||
<input class="timepicker-input medium focus" type="text" placeholder="00:00:00" ng-if="cardservice.getCurrent().duedate" value="{{ cardservice.getCurrent().duedate | parseTime }}" timepicker="due" />
|
||||
<button class="icon icon-delete button-inline" title="<?php p($l->t('Remove due date')); ?>" ng-if="cardservice.getCurrent().duedate" ng-click="resetDuedate()"></button>
|
||||
</div>
|
||||
|
||||
<!--<div id="assigned-users">
|
||||
<ui-select multiple tagging="" ng-model="card.assignees"
|
||||
theme="bootstrap" style="width:100%;"
|
||||
title="Choose a user to assign"
|
||||
placeholder="Assign users…"
|
||||
on-select="userAssign($item, $model)"
|
||||
on-remove="userRemove($item, $model)" ng-disabled="archived">
|
||||
<ui-select-match placeholder="Select users…">{{$item.title}}
|
||||
</ui-select-match>
|
||||
<ui-select-choices
|
||||
repeat="label in boardservice.getCurrent().labels | filter:$select.search">
|
||||
<span
|
||||
style="background-color:#{{label.color}}">{{label.title}}</span>
|
||||
</ui-select-choices>
|
||||
</ui-select>
|
||||
</div>//-->
|
||||
|
||||
|
||||
<div id="card-description">
|
||||
<h3>
|
||||
<?php p($l->t('Description')); ?>
|
||||
<a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon-help" title="<?php p($l->t('Formatting help')); ?>"></a>
|
||||
<span class="save-indicator"><?php p($l->t('Saved')); ?></span>
|
||||
<div>
|
||||
<div>
|
||||
<?php p($l->t('Description')); ?>
|
||||
<a href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon-help" title="<?php p($l->t('Formatting help')); ?>"></a>
|
||||
</div>
|
||||
<span class="save-indicator"><?php p($l->t('Saved')); ?></span>
|
||||
</div>
|
||||
|
||||
</h3>
|
||||
<textarea elastic ng-if="status.cardEditDescription"
|
||||
placeholder="Enter your description here…"
|
||||
@@ -89,43 +80,5 @@
|
||||
<div class="placeholder"
|
||||
ng-if="!cardservice.getCurrent().description"><?php p($l->t('Add a card description…')); ?></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<ul class="tabHeaders">
|
||||
<li class="tabHeader" ng-class="{'selected': (status.boardtab==0 || !status.boardtab)}" ng-click="status.boardtab=0"><a><?php p($l->t('Attachments')); ?></a></li>
|
||||
<li class="tabHeader" ng-class="{'selected': (status.boardtab==1)}" ng-click="status.boardtab=1"><a><?php p($l->t('Comments')); ?></a></li>
|
||||
<li class="tabHeader" ng-class="{'selected': (status.boardtab==2)}" ng-click="status.boardtab=2"><a><?php p($l->t('History')); ?></a></li>
|
||||
</ul>
|
||||
<div class="tabsContainer">
|
||||
<div id="commentsTabView" class="tab commentsTabView" ng-if="status.boardtab==0 || !status.boardtab">
|
||||
<div id="card-attachments">
|
||||
<button ng-click="status.addAttachment=true"><i class="fa fa-plus"></i> Add an attachment</button>
|
||||
<div ng-if="status.addAttachment" id="attachment-add">
|
||||
<button><i class="fa fa-file"></i> Attach a File</button>
|
||||
<button><i class="fa fa-link"></i> Attach a URL</button>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span class="fa fa-file"></span> myfilename.pdf
|
||||
<div class="details">
|
||||
<span class="user">Added by John Doe at</span>
|
||||
<span class="added">1.3.2014 14:13</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="board-detail-labels" class="tab commentsTabView" ng-if="status.boardtab==1">
|
||||
</div>
|
||||
<div id="commentsTabView" class="tab commentsTabView" ng-if="status.boardtab==2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
//-->
|
||||
</div>
|
||||
Reference in New Issue
Block a user