Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

polish sidebar #215

Merged
merged 7 commits into from
Jun 27, 2017
Merged

polish sidebar #215

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e3e1bb7
polish sidebar
artemanufrij Jun 23, 2017
ad3ab87
changed css margin
artemanufrij Jun 23, 2017
0f9aff5
changed some css lines
artemanufrij Jun 24, 2017
94ec622
fixed some opactity values
artemanufrij Jun 24, 2017
cafbf92
label design
artemanufrij Jun 24, 2017
bf54dbe
changed border radius
artemanufrij Jun 26, 2017
b6b91f1
changes
artemanufrij Jun 27, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 69 additions & 29 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand All @@ -549,27 +557,51 @@ button.button-inline:hover {
#card-dates {
font-size: 80%;
color: #aaaaaa;
margin-bottom: 3px;
}

#card-meta #labels {
margin-bottom: 10px;
text-align: right;
}

#card-meta .duedate {
display: flex;
align-content: center;
min-height: 38px;
}

#card-meta .duedate .timepicker-input {
width: 50px;
margin: 3px;
}

#card-meta .duedate .datepicker-input {
width: 85px;
}

#card-meta .duedate .icon {
opacity: 0.3;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would go to 0.5 opacity, since it should be default for all icons on nextcloud: nextcloud/server#5157

}

#card-meta .duedate .icon:hover {
opacity: 0.7;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really needed, since the hover effect is done by the icon-delete class.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is just the delete button 😉

https://github.com/nextcloud/deck/pull/215/files#diff-a175750cce89c445e0a34d25823924c2R56

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but it doesn't change opacity. only color. for buttons we use always a different opacity on mouse over.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah i see. Ok fine then.

}

#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 {
Expand All @@ -588,20 +620,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;
}
Expand Down Expand Up @@ -695,7 +727,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 {
Expand Down Expand Up @@ -876,10 +908,6 @@ button.button-inline:hover {
margin-top: 4px;
}

#board-detail-labels {
padding: 10px;
}

#board-detail-labels ul li input {
margin: 0px;
padding: 5px;
Expand All @@ -890,7 +918,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 {
Expand Down Expand Up @@ -926,6 +954,9 @@ button.button-inline:hover {
margin-bottom: 0;
}

.tabsContainer {
margin-top: 15px;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing newline.

#shareWithList .avatar {
float: left;
margin-top: -5px;
Expand All @@ -948,6 +979,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 {
Expand All @@ -956,6 +988,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;
Expand All @@ -977,6 +1013,10 @@ button.button-inline:hover {
width:100% !important;
}

.select2-result-label {
padding: 0px !important;
}

.select2-result-label span {
display: flex;
}
Expand Down
97 changes: 25 additions & 72 deletions templates/part.card.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,54 +28,45 @@
<?php p($l->t('by')); ?>
<span>{{ cardservice.getCurrent().owner.displayname }}</span>
</div>

<h3 style="padding-top: 0px; margin-top: 0px;">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No inline styles please ;)

<?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}}&nbsp;</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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the need of two wrapping divs here? h3 is already a block element that could be used.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for display: flex.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But we can just apply the flex styles to #card-meta h3 or am I missing something?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

display: flex changes some margin/padding behavior. It looks some different in compare to standard h3

<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…"
Expand All @@ -89,43 +80,5 @@
<div class="placeholder"
ng-if="!cardservice.getCurrent().description"><?php p($l->t('Add a card description…')); ?></div>
</div>

</div>


Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙈 👍

</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>