ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge pull request #681 from nextcloud/design-fixes

Browse Source 
Design fixes
This commit is contained in:
Julius Härtl
2018-11-10 10:49:08 +01:00
committed by GitHub
parent dc5eb9e815 b42c80b464
commit 9cf30dc77b
9 changed files with 99 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
css/activity.css
View File

@@ -8,6 +8,11 @@
text-decoration: none;
}
.activitymessage .visualdiff {
overflow: scroll;
max-height: 200px;
}
.activityTabView .avatardiv-container {
display: inline-block;
bottom: -3px;

2
css/comp-13.scss
View File

@@ -16,7 +16,7 @@
width: 500px;
display:flex;
flex-direction: column;
z-index: 1500;
z-index: 1000;
&.details-visible {
right: 0;

6
css/icons.scss
View File

@@ -34,13 +34,11 @@
}
.icon-home {
background-image: url('../../../core/img/places/home.svg');
background-image: var(--icon-home-000);
background-image: var(--icon-home-000, url('../../../core/img/places/home.svg'));
}
.icon-description {
background-image: url('../img/description.svg');
background-image: var(--icon-text-000);
background-image: var(--icon-text-000, url('../img/description.svg'));
}
.icon-badge {

84
css/style.scss
View File

@@ -156,8 +156,7 @@ input.input-inline {
z-index: 999;
width: 100%;
height: 100%;
background-color: $color-main-background;
background-color: var(--color-main-background);
background-color: var(--color-main-background, $color-main-background);
}
#board {
@@ -186,12 +185,10 @@ input.input-inline {
&.card-selected {
.card {
box-shadow: 0px 0px 7px 0px $color-grey;
box-shadow: 0px 0px 7px 0px var(--color-grey);
box-shadow: 0px 0px 7px 0px var(--color-background-darker, $color-grey);
&.current {
box-shadow: 0px 0px 7px 0px $color-darkgrey;
box-shadow: 0px 0px 7px 0px var(--color-darkgrey);
box-shadow: 0px 0px 7px 0px var(--color-text-lighter, $color-darkgrey);
}
}
}
@@ -224,10 +221,7 @@ input.input-inline {
}
> .as-sortable-drag {
background-color: $color-main-background;
background-color: var(--color-main-background);
box-shadow: 0 0 7px 0 $color-background-dark;
box-shadow: 0 0 7px 0 var(--color-background-dark);
background-color: var(--color-main-background $color-main-background);
}
}
@@ -266,9 +260,17 @@ input.input-inline {
}
button {
height: inherit;
width: 36px;
height: 36px;
padding: 9px;
}
#stack-add form {
button {
height: auto;
width: 32px;
}
}
input[type='text'] {
padding: 6px;
border: 0 none transparent;
@@ -333,8 +335,7 @@ input.input-inline {
}
#stack-add {
background-color: $color-lightgrey;
background-color: var(--color-lightgrey);
background-color: var(--color-background-dark, $color-lightgrey);
border-radius: 3px;
margin: 3px;
display: flex;
@@ -380,8 +381,7 @@ input.input-inline {
margin: 0;
font-size: 12pt;
border: 0;
background-color: $color-main-background;
background-color: var(--color-main-background);
background-color: var(--color-main-background, $color-main-background);
min-height: initial;
}
@@ -427,13 +427,11 @@ input.input-inline {
}
.card {
background-color: $color-main-background;
background-color: var(--color-main-background);
background-color: var(--color-main-background, $color-main-background);
margin: $board-item-margin;
white-space: normal;
position: relative;
box-shadow: 0 0 3px $color-darkgrey;
box-shadow: 0 0 3px --var(color-darkgrey);
box-shadow: 0 0 3px var(--color-background-darker, $color-darkgrey);
border-radius: 3px;
transition: margin 250ms linear;
@@ -462,8 +460,7 @@ input.input-inline {
}
.card-controls {
background: $color-lightgrey;
background: var(--color-background-dark);
background: var(--color-background-dark, $color-lightgrey);
display: flex;
position: relative;
padding-left: 10px;
@@ -497,8 +494,7 @@ input.input-inline {
&.overdue {
background-color: $color-error;
color: $color-primary-text;
color: var(--color-primary-text);
color: var(--color-primary-text, $color-primary-text);
.icon-badge {
background-image: url('../img/calendar-white.svg');
@@ -680,8 +676,7 @@ input.input-inline {
position: sticky;
top: 0;
background-color: $color-main-background;
background-color: var(--color-main-background);
background-color: var(--color-main-background, $color-main-background);
z-index: 200;
h3 {
@@ -721,8 +716,7 @@ input.input-inline {
position: absolute;
width: 100%;
height: 100%;
background-color: $color-main-background;
background-color: var(--color-main-background);
background-color: var(--color-main-background, $color-main-background);
z-index: 100;
opacity: 0.9;
text-align: center;
@@ -809,10 +803,8 @@ input.input-inline {
color: $color-primary-text;
}
&.unsaved {
background-color: $color-lightgrey;
background-color: var(--color-lightgrey);
color: $color-darkgrey;
color: var(--color-darkgrey);
background-color: var(--color-background-dark, $color-lightgrey);
color: var(--color-text-light, $color-darkgrey);
}
}
@@ -853,9 +845,9 @@ input.input-inline {
width: 100%;
height: 100%;
background-color: rgba($color-darkgrey, 0.5);
background-color: var(--color-background-dark);
left: 0;
top: 0;
z-index: 300;
}
.attachment-list {
&.selector {
@@ -868,12 +860,10 @@ input.input-inline {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: $color-main-background;
background-color: var(--color-main-background);
background-color: var(--color-main-background, $color-main-background);
z-index: 2;
border-radius: 3px;
box-shadow: 0 0 3px $color-darkgrey;
box-shadow: 0 0 3px var(--color-darkgrey);
box-shadow: 0 0 3px var(--color-background-dark, $color-darkgrey);
overflow: scroll;
}
h3.attachment-selector {
@@ -967,8 +957,7 @@ input.input-inline {
}
.container {
background-color: $color-main-background;
background-color: var(--color-main-background);
background-color: var(--color-main-background, $color-main-background);
}
}
@@ -1349,7 +1338,6 @@ input.input-inline {
.icon {
display: inline-block;
background-size: contain;
margin: -3px;
margin-right: 5px;
opacity: 0.5;
}
@@ -1440,6 +1428,8 @@ input.input-inline {
*/
#markdown {
width: 100% !important;
min-height: 40px;
cursor: text;
p {
margin-bottom: 15px;
@@ -1493,8 +1483,7 @@ input.input-inline {
}
pre {
background-color: $color-lightgrey;
background-color: var(--color-background-dark);
background-color: var(--color-background-dark, $color-lightgrey);
padding: 3px;
overflow: auto;
@@ -1531,6 +1520,19 @@ input.input-inline {
li input[type="checkbox"].checkbox:not(:checked) + label::before {
background-color: $color-main-background;
}
table {
margin-bottom: 10px;
border-collapse: collapse;
thead {
background-color: var(--color-background-dark, $color-lightgrey);
}
td, th {
border: 1px solid var(--color-background-darker, $color-darkgrey);
padding: 3px;
}
}
}
.section-wrapper {

36
js/controller/ActivityController.js
View File

@@ -20,7 +20,7 @@
*
*/
/* global OC OCA OCP t escapeHTML */
/* global OC OCA OCP t escapeHTML Handlebars */
import CommentCollection from '../legacy/commentcollection';
import CommentModel from '../legacy/commentmodel';
@@ -64,6 +64,23 @@ class ActivityController {
this.activityservice.subscribe(this.$scope, function() {
self.$scope.$apply();
});
if (typeof OCA.Activity.Templates !== 'undefined') {
OCA.Activity.Templates.userLocal = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
var helper;
// Compiled handlesbars template
// '<span class="avatar-name-wrapper"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}" ng-attr-size="16"></avatar> {{ name }}</span>';
return "<span class=\"avatar-name-wrapper\"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user=\""
+ container.escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"id","hash":{},"data":data}) : helper)))
+ "\" ng-attr-displayname=\""
+ container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"name","hash":{},"data":data}) : helper)))
+ "\" ng-attr-size=\"16\"></avatar> "
+ container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"name","hash":{},"data":data}) : helper)))
+ "</span>";
},"useData":true});
} else {
OCA.Activity.RichObjectStringParser._userLocalTemplate = '<span class="avatar-name-wrapper"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}" ng-attr-size="16"></avatar> {{ name }}</span>';
}
}
applyAtWho($target) {
@@ -263,23 +280,6 @@ class ActivityController {
}
parseMessage(subject, parameters) {
if (typeof OCA.Activity.Templates !== 'undefined') {
OCA.Activity.Templates.userLocal = {"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
var helper;
// Compiled handlesbars template
// '<span class="avatar-name-wrapper"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}" ng-attr-size="16"></avatar> {{ name }}</span>';
return "<span class=\"avatar-name-wrapper\"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user=\""
+ container.escapeExpression(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"id","hash":{},"data":data}) : helper)))
+ "\" ng-attr-displayname=\""
+ container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"name","hash":{},"data":data}) : helper)))
+ "\" ng-attr-size=\"16\"></avatar> "
+ container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"name","hash":{},"data":data}) : helper)))
+ "</span>";
},"useData":true};
} else {
OCA.Activity.RichObjectStringParser._userLocalTemplate = '<span class="avatar-name-wrapper"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}" ng-attr-size="16"></avatar> {{ name }}</span>';
}
return OCA.Activity.RichObjectStringParser.parseMessage(subject, parameters);
}

10
js/controller/CardController.js
View File

@@ -117,7 +117,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
return match;
});
CardService.update($scope.status.edit).then(function (data) {
var header = $('.section-header-tabbed .tabDetails');
var header = $('.tabDetails');
header.find('.save-indicator.unsaved').hide();
header.find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
});
@@ -147,7 +147,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
};
$scope.cardEditDescriptionChanged = function ($event) {
$scope.status.lastEdit = Date.now();
var header = $('.section-header-tabbed .tabDetails');
var header = $('.tabDetails');
header.find('.save-indicator.unsaved').show();
header.find('.save-indicator.saved').hide();
};
@@ -157,10 +157,10 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
if (timeSinceEdit > 1000 && $scope.status.lastEdit > $scope.status.lastSave && !$scope.status.saving) {
$scope.status.lastSave = currentTime;
$scope.status.saving = true;
var header = $('.section-header-tabbed .tabDetails');
var header = $('.tabDetails');
header.find('.save-indicator.unsaved').fadeIn(500);
CardService.update($scope.status.edit).then(function (data) {
var header = $('.section-header-tabbed .tabDetails');
var header = $('.tabDetails');
header.find('.save-indicator.unsaved').hide();
header.find('.save-indicator.saved').fadeIn(250).fadeOut(1000);
$scope.status.saving = false;
@@ -196,7 +196,7 @@ app.controller('CardController', function ($scope, $rootScope, $sce, $location,
CardService.update(card).then(function (data) {
$scope.status.cardEditDescription = false;
$scope.updateMarkdown($scope.status.edit.description);
var header = $('.section-header-tabbed .tabDetails');
var header = $('.tabDetails');
header.find('.save-indicator.unsaved').hide();
header.find('.save-indicator.saved').fadeIn(500).fadeOut(1000);
});

3
lib/Activity/DeckProvider.php
View File

@@ -276,7 +276,8 @@ class DeckProvider implements IProvider {
private function parseParamForChanges($subjectParams, $params, $event) {
if (array_key_exists('diff', $subjectParams) && $subjectParams['diff']) {
$diff = new Diff();
$event->setMessage($subjectParams['after']);
// Don't add diff as message since we are limited to 255 chars here
//$event->setMessage($subjectParams['after']);
$event->setParsedMessage('<pre class="visualdiff">' . $diff->render($subjectParams['before'], $subjectParams['after']) . '</pre>');
return $params;
}

4
templates/main.php
View File

@@ -24,7 +24,9 @@
use OCP\Util;
Util::addScript('activity', 'richObjectStringParser');
Util::addScript('activity', 'templates');
if (\OC_Util::getVersion()[0] > 14) {
Util::addScript('activity', 'templates');
}
Util::addScript('activity', 'script');
Util::addStyle('activity', 'style');

34
templates/part.card.php
View File

@@ -51,8 +51,8 @@
</div>
</div>
<div class="section-wrapper card-details-assign-users" ng-click="toggleAssignUser()">
<div class="section-label icon-user" data-toggle="tooltip" data-placement="right" title="<?php p($l->t('Assign users')); ?>"><span class="hidden-visually"><?php p($l->t('Assign users')); ?></span></div>
<div class="section-wrapper card-details-assign-users">
<div class="section-label icon-user" data-toggle="tooltip" data-placement="right" title="<?php p($l->t('Assign users')); ?>" ng-click="toggleAssignUser()"><span class="hidden-visually"><?php p($l->t('Assign users')); ?></span></div>
<div class="section-details" ng-if="cardservice.getCurrent()">
<ui-select id="assignUserSelect" class="card-details-assign-user" ng-model="status.assignedUser" ng-show="status.showAssignUser" uis-open-close="assingUserOpenClose(isOpen)"
theme="select2"
@@ -69,7 +69,7 @@
<div class="assigned-user" ng-repeat="user in cardservice.getCurrent().assignedUsers track by user.participant.uid">
<avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.displayname }}" contactsmenudelete ></avatar>
</div>
<a class="icon-add icon-inline"></a>
<a class="icon-add icon-inline" ng-click="toggleAssignUser()"></a>
</div>
</div>
</div>
@@ -86,21 +86,27 @@
<div class="section-header-tabbed">
<ul class="tabHeaders ng-scope">
<li class="tabHeader" ng-class="{'selected': (params.tab==0 || !params.tab)}" ui-sref="{tab: 0}"><a><span class="icon icon-description"></span><?php p($l->t('Description')); ?></a></li>
<li class="tabHeader" ng-class="{'selected': (params.tab==1)}" ui-sref="{tab: 1}"><a><span class="icon icon-files-dark"></span><?php p($l->t('Attachments')); ?></a></li>
<li class="tabHeader" ng-class="{'selected': (params.tab==2)}" ui-sref="{tab: 2}" ng-if="isTimelineEnabled()"><a><span class="icon icon-activity"></span><?php p($l->t('Timeline')); ?></a></li>
<li class="tabHeader" ng-class="{'selected': (params.tab==0 || !params.tab)}" ui-sref="{tab: 0}"><span class="icon icon-description"></span><a><?php p($l->t('Description')); ?></a></li>
<li class="tabHeader" ng-class="{'selected': (params.tab==1)}" ui-sref="{tab: 1}"><span class="icon icon-files-dark"></span><a><?php p($l->t('Attachments')); ?></a></li>
<li class="tabHeader" ng-class="{'selected': (params.tab==2)}" ui-sref="{tab: 2}" ng-if="isTimelineEnabled()"><span class="icon icon-activity"></span><a><?php p($l->t('Timeline')); ?></a></li>
</ul>
<div class="tabDetails">
<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
<a ng-if="params.tab === 0" href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a>
<label ng-if="params.tab === 1" for="attachment-upload" class="button icon-upload" ng-class="{'icon-loading-small': fileservice.uploader.isUploading}" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Upload attachment')); ?>"></label>
<input id="attachment-upload" type="file" nv-file-select="" uploader="fileservice.uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}"/>
<input ng-if="status.cardEditDescription" type="button" ng-mousedown="status.continueEdit = true; status.selectAttachment = true;" class="icon-files-dark" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Insert attachment')); ?>"/>
</div>
<div class="tabDetails" style="display: flex;">
<span class="save-indicator saved"><?php p($l->t('Saved')); ?></span>
<span class="save-indicator unsaved"><?php p($l->t('Unsaved changes')); ?></span>
<div style="flex-grow: 1;"> </div>
<a ng-if="params.tab === 0" href="https://github.com/nextcloud/deck/wiki/Markdown-Help" target="_blank" class="icon icon-help" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Formatting help')); ?>"><span class="hidden-visually"><?php p($l->t('Formatting help')); ?></span></a>
<input ng-if="status.cardEditDescription" type="button" ng-mousedown="status.continueEdit = true; status.selectAttachment = true;" class="icon-files-dark" data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Insert attachment')); ?>"/>
</div>
</div>
<div class="section-content card-attachments">
<div>
<label ng-if="params.tab === 1" for="attachment-upload" class="button data-toggle="tooltip" data-placement="left" title="<?php p($l->t('Upload attachment')); ?>">
<span class="icon-upload" ng-class="{'icon-loading-small': fileservice.uploader.isUploading}"></span>
<?php p($l->t('Upload attachment')); ?>
</label>
<input id="attachment-upload" type="file" nv-file-select="" uploader="fileservice.uploader" class="hidden" options="{cardId: cardservice.getCurrent().id}"/>
</div>
<div class="error icon-error" ng-if="fileservice.status"><strong>{{ fileservice.status.error }}</strong><br />{{ fileservice.status.message }}</div>
<attachment-list-component ng-if="params.tab === 1 && cardservice.getCurrent() && isArray(cardservice.getCurrent().attachments)" attachments="cardservice.getCurrent().attachments"></attachment-list-component>
</div>