Merge pull request #696 from nextcloud/details-title
Move details title to flex-box
This commit is contained in:
Raimund Schlüßler
GitHub
commit
8cf00d28ee
2 changed files with 84 additions and 96 deletions
|
|
@ -671,6 +671,8 @@
|
|||
|
||||
.title {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: $gray_easy;
|
||||
border-bottom: 1px solid $gray_light;
|
||||
font-size: 16px;
|
||||
|
|
@ -688,61 +690,90 @@
|
|||
}
|
||||
}
|
||||
|
||||
.status-display {
|
||||
float: right;
|
||||
margin: 17px 0;
|
||||
.detail-checkbox {
|
||||
padding: 11px 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
cursor: text;
|
||||
display: inline-block;
|
||||
min-height: 24px;
|
||||
margin: 13px 0;
|
||||
width: calc(100% - (41px + 16px + 45px + 45px + 14px)); /* checkbox (41px), status display (16px), star (45px), pin (45px), safety distance (14px) */
|
||||
padding: 0 6px;
|
||||
line-height: 22px;
|
||||
// this border is to adjust the size of the div to the size
|
||||
// of the input field for editing the title
|
||||
// (setting a padding always led to a small flickering)
|
||||
border: 1px solid transparent;
|
||||
.title-wrapper {
|
||||
flex-grow: 1;
|
||||
|
||||
&.strike-through {
|
||||
text-decoration: line-through;
|
||||
.title-text {
|
||||
cursor: text;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
min-height: 24px;
|
||||
margin: 13px 0;
|
||||
padding: 0 6px;
|
||||
line-height: 22px;
|
||||
// this border is to adjust the size of the div to the size
|
||||
// of the input field for editing the title
|
||||
// (setting a padding always led to a small flickering)
|
||||
border: 1px solid transparent;
|
||||
|
||||
&.strike-through {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
.expandable-container {
|
||||
width: 100%;
|
||||
border: 1px solid $gray;
|
||||
padding: 0 6px;
|
||||
display: none;
|
||||
margin: 13px 0;
|
||||
line-height: 24px;
|
||||
min-height: 24px;
|
||||
|
||||
.expandingArea {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expandable-container {
|
||||
border: 1px solid $gray;
|
||||
padding: 0 6px;
|
||||
display: none !important;
|
||||
margin: 13px 0;
|
||||
width: calc(100% - (41px + 16px + 45px + 45px + 14px)); /* checkbox (41px), status display (16px), star (45px), pin (45px), safety distance (14px) */
|
||||
line-height: 24px;
|
||||
min-height: 24px;
|
||||
|
||||
.expandingArea {
|
||||
position: relative;
|
||||
textarea,
|
||||
pre {
|
||||
box-shadow: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 22px;
|
||||
min-height: 22px;
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
border: medium none;
|
||||
padding: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
float: left;
|
||||
padding: 16px 17px 18px;
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
|
||||
textarea {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
resize: none;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 0 none !important;
|
||||
display: block;
|
||||
margin: 0;
|
||||
outline: 0 none;
|
||||
padding: 0 !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
padding: 13px 13px 13px 8px;
|
||||
float: right;
|
||||
.status-display {
|
||||
margin: 17px 6px;
|
||||
}
|
||||
|
||||
.action {
|
||||
padding: 10px;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
|
||||
.icon {
|
||||
height: 24px;
|
||||
|
|
@ -758,41 +789,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea,
|
||||
pre {
|
||||
box-shadow: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 22px;
|
||||
min-height: 22px;
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
border: medium none;
|
||||
padding: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
resize: none;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 0 none !important;
|
||||
display: block;
|
||||
margin: 0;
|
||||
outline: 0 none;
|
||||
padding: 0 !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
|
|
@ -1186,14 +1182,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.detail-checkbox {
|
||||
float: left;
|
||||
padding: 8px;
|
||||
margin: 7px;
|
||||
margin-right: 3px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbox {
|
||||
&:checked + label::before {
|
||||
background-image: var(--icon-checkmark-000) !important;
|
||||
|
|
|
|||
|
|
@ -40,16 +40,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
>
|
||||
<label :for="'detailsToggleCompleted_' + task.uid" />
|
||||
</span>
|
||||
<a class="star reactive" @click="toggleStarred(task)">
|
||||
<span :class="[{'disabled': task.calendar.readOnly}, iconStar]"
|
||||
class="icon"
|
||||
/>
|
||||
</a>
|
||||
<a class="star reactive" @click="togglePinned(task)">
|
||||
<span :class="[{'disabled': task.calendar.readOnly}, iconPinned]" class="icon" />
|
||||
</a>
|
||||
<TaskStatusDisplay :task="task" />
|
||||
<div v-click-outside="() => finishEditing('summary')">
|
||||
<div v-click-outside="() => finishEditing('summary')" class="title-wrapper">
|
||||
<div v-linkify="task.summary"
|
||||
:class="{'strike-through': task.completed}"
|
||||
class="title-text"
|
||||
|
|
@ -67,6 +58,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TaskStatusDisplay :task="task" />
|
||||
<span class="action reactive" @click="togglePinned(task)">
|
||||
<span :class="[{'disabled': task.calendar.readOnly}, iconPinned]" class="icon" />
|
||||
</span>
|
||||
<span class="action reactive" @click="toggleStarred(task)">
|
||||
<span :class="[{'disabled': task.calendar.readOnly}, iconStar]"
|
||||
class="icon"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<ul class="sections">
|
||||
|
|
|
|||
Loading…
Reference in a new issue