Fix styling and rename to actual dashboard api

Signed-off-by: Julius Härtl <jus@bitgrid.net>

lib/AppInfo/Application.php

@@ -29,7 +29,7 @@
 use OCA\Deck\Capabilities;
 use OCA\Deck\Collaboration\Resources\ResourceProvider;
 use OCA\Deck\Collaboration\Resources\ResourceProviderCard;
-use OCA\Deck\Dashboard\DeckPanel;
+use OCA\Deck\Dashboard\DeckWidget;
 use OCA\Deck\Db\Acl;
 use OCA\Deck\Db\AclMapper;
 use OCA\Deck\Db\AssignedUsersMapper;
@@ -44,7 +44,7 @@
 use OCP\Collaboration\Resources\IManager;
 use OCP\Collaboration\Resources\IProviderManager;
 use OCP\Comments\CommentsEntityEvent;
-use OCP\Dashboard\RegisterPanelEvent;
+use OCP\Dashboard\RegisterWidgetEvent;
 use OCP\EventDispatcher\Event;
 use OCP\EventDispatcher\IEventDispatcher;
 use OCP\FullTextSearch\IFullTextSearchManager;
@@ -92,9 +92,9 @@ public function __construct(array $urlParams = []) {
  if ($version >= 20) {
  /** @var IEventDispatcher $dispatcher */
  $dispatcher = $container->getServer()->query(IEventDispatcher::class);
- $dispatcher->addListener(RegisterPanelEvent::class, function (RegisterPanelEvent $event) use ($container) {
+ $dispatcher->addListener(RegisterWidgetEvent::class, function (RegisterWidgetEvent $event) use ($container) {
  \OCP\Util::addScript('myapp', 'dashboard');
- $event->registerPanel(DeckPanel::class);
+ $event->registerWidget(DeckWidget::class);
  });
  }
  }

lib/Dashboard/DeckPanel.php → lib/Dashboard/DeckWidget.php

@@ -27,9 +27,19 @@
 namespace OCA\Deck\Dashboard;
 
 
-use OCP\Dashboard\IPanel;
+use OCP\Dashboard\IWidget;
+use OCP\IL10N;
 
-class DeckPanel implements IPanel {
+class DeckWidget implements IWidget {
+
+ /**
+ * @var IL10N
+ */
+ private $l10n;
+
+ public function __construct(IL10N $l10n) {
+ $this->l10n = $l10n;
+ }
 
  /**
  * @inheritDoc
@@ -42,7 +52,7 @@ public function getId(): string {
  * @inheritDoc
  */
  public function getTitle(): string {
- return 'Deck';
+ return $this->l10n->t('Upcoming cards');
  }
 
  /**

package.json

@@ -39,7 +39,8 @@
  "@nextcloud/l10n": "^1.3.0",
  "@nextcloud/moment": "^1.1.1",
  "@nextcloud/router": "^1.1.0",
- "@nextcloud/vue": "^2.3.0",
+ "@nextcloud/vue": "^2.5.0",
+ "@nextcloud/vue-dashboard": "^0.1.6",
  "blueimp-md5": "^2.17.0",
  "dompurify": "^2.0.12",
  "lodash": "^4.17.20",

src/components/AttachmentDragAndDrop.vue

@@ -69,10 +69,12 @@ import { Modal } from '@nextcloud/vue'
 import attachmentUpload from '../mixins/attachmentUpload'
 import { loadState } from '@nextcloud/initial-state'
 
-let maxUploadSizeState = -1
+let maxUploadSizeState
 try {
- loadState('deck', 'maxUploadSize')
-} catch (e) {}
+ maxUploadSizeState = loadState('deck', 'maxUploadSize')
+} catch (e) {
+ maxUploadSizeState = -1
+}
 
 export default {
  name: 'AttachmentDragAndDrop',

src/components/cards/CardBadges.vue

@@ -21,11 +21,7 @@
  -->
 
 <template>
-<<<<<<< HEAD
  <div v-if="card" class="badges">
-=======
- <div class="badges" v-if="card">
->>>>>>> 37196bbf... Move duedate to separate component
  <div v-if="card.commentsUnread > 0" class="icon icon-comment" />
 
  <div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
@@ -59,11 +55,7 @@ export default {
  return (this.card.description.match(/^\s*([*+-]|(\d\.))\s+\[\s*(\s|x)\s*\](.*)$/gim) || []).length
  },
  checkListCheckedCount() {
-<<<<<<< HEAD
  return (this.card.description.match(/^\s*([*+-]|(\d\.))\s+\[\s*x\s*\](.*)$/gim) || []).length
-=======
- return (this.card.description.match(/^\s*(\*|-|(\d\.))\s+\[\s*x\s*\](.*)$/gim) || []).length
->>>>>>> 37196bbf... Move duedate to separate component
  },
  },
 }

src/components/cards/badges/DueDate.vue

@@ -21,7 +21,7 @@
  -->
 
 <template>
- <div class="duedate" v-if="card">
+ <div v-if="card" class="duedate">
  <transition name="zoom">
  <div v-if="card.duedate" :class="dueIcon">
  <span>{{ relativeDate }}</span>
@@ -65,7 +65,7 @@ export default {
  dueDateTooltip() {
  return moment(this.card.duedate).format('LLLL')
  },
- }
+ },
 }
 </script>
 

src/components/navigation/AppNavigation.vue

@@ -24,7 +24,7 @@
  <AppNavigationVue :class="{'icon-loading': loading}">
  <template #list>
  <AppNavigationItem
- :title="t('deck', 'My assigned cards')"
+ :title="t('deck', 'Assigned cards')"
  icon="icon-group"
  to="/overview/assigned" />
  <AppNavigationBoardCategory

src/components/overview/Overview.vue

@@ -22,7 +22,7 @@
 
 <template>
  <div>
- <Controls :dashboard-name="filterDisplayName" />
+ <Controls :overview-name="filterDisplayName" />
 
  <div v-if="loading" key="loading" class="emptycontent">
  <div class="icon icon-loading" />
@@ -33,46 +33,46 @@
  <div v-else>
  <div v-if="isValidFilter" class="dashboard">
  <div class="dashboard-column">
- <h2>{{ t('deck', 'No due') }}</h2>
- <div v-for="card in cardsByDueDate.nodue" :key="card.id">
- <CardItem :id="card.id" />
- </div>
- </div>
-
- <div class="dashboard-column">
- <h2>{{ t('deck', 'Overdue') }}</h2>
+ <h3>{{ t('deck', 'Overdue') }}</h3>
  <div v-for="card in cardsByDueDate.overdue" :key="card.id">
  <CardItem :id="card.id" />
  </div>
  </div>
 
  <div class="dashboard-column">
- <h2>{{ t('deck', 'Today') }}</h2>
+ <h3>{{ t('deck', 'Today') }}</h3>
  <div v-for="card in cardsByDueDate.today" :key="card.id">
  <CardItem :id="card.id" />
  </div>
  </div>
 
  <div class="dashboard-column">
- <h2>{{ t('deck', 'Tomorrow') }}</h2>
+ <h3>{{ t('deck', 'Tomorrow') }}</h3>
  <div v-for="card in cardsByDueDate.tomorrow" :key="card.id">
  <CardItem :id="card.id" />
  </div>
  </div>
 
  <div class="dashboard-column">
- <h2>{{ t('deck', 'This week') }}</h2>
+ <h3>{{ t('deck', 'This week') }}</h3>
  <div v-for="card in cardsByDueDate.thisWeek" :key="card.id">
  <CardItem :id="card.id" />
  </div>
  </div>
 
  <div class="dashboard-column">
- <h2>{{ t('deck', 'Later') }}</h2>
+ <h3>{{ t('deck', 'Later') }}</h3>
  <div v-for="card in cardsByDueDate.later" :key="card.id">
  <CardItem :id="card.id" />
  </div>
  </div>
+
+ <div class="dashboard-column">
+ <h3>{{ t('deck', 'No due') }}</h3>
+ <div v-for="card in cardsByDueDate.nodue" :key="card.id">
+ <CardItem :id="card.id" />
+ </div>
+ </div>
  </div>
  </div>
  </div>
@@ -102,7 +102,7 @@ export default {
  props: {
  filter: {
  type: String,
- default: '',
+ default: FILTER_ASSIGNED,
  },
  },
  data() {
@@ -116,8 +116,8 @@ export default {
  },
  filterDisplayName() {
  switch (this.filter) {
- case 'assigned':
- return t('deck', 'My assigned cards')
+ case FILTER_ASSIGNED:
+ return t('deck', 'Assigned cards')
  default:
  return ''
  }
@@ -211,13 +211,15 @@ export default {
 .dashboard {
  display: flex;
  align-items: stretch;
- margin: $board-spacing;
+ margin-left: $board-spacing;
+ margin-right: $board-spacing;
 
  .dashboard-column {
  display: flex;
  flex-direction: column;
- width: $stack-width;
- margin: $stack-spacing;
+ min-width: $stack-width;
+ margin-left: $stack-spacing;
+ margin-right: $stack-spacing;
  }
 }