diff --git a/js/app/VueComponents.js b/js/app/VueComponents.js new file mode 100644 index 000000000..f9ec405ee --- /dev/null +++ b/js/app/VueComponents.js @@ -0,0 +1,3 @@ +var IconLinkCompact = require('../vue_components/IconLinkCompact.vue').default; +var iconLinkCompactComponent = Vue.component('IconLinkCompact', IconLinkCompact); +app.value('IconLinkCompact', iconLinkCompactComponent); diff --git a/js/vue_components/IconLinkCompact.vue b/js/vue_components/IconLinkCompact.vue new file mode 100644 index 000000000..217e9001c --- /dev/null +++ b/js/vue_components/IconLinkCompact.vue @@ -0,0 +1,21 @@ +<template> + <li class="util only-in-compact"> + <a class="external icon-link" + v-on:click="ctrl.markRead(item.id)" + target="_blank" + rel="noreferrer" + v-bind:href="item.url" + title="<?php p($l->t('Open website')) ?>" + news-stop-propagation> + </a> + </li> +</template> + +<script> + +export default { + props: ['ctrl', 'item'], +}; +</script> + + diff --git a/templates/index.php b/templates/index.php index a80f40c1a..1296c8440 100644 --- a/templates/index.php +++ b/templates/index.php @@ -24,6 +24,7 @@ foreach (Plugin::getScripts() as $appName => $fileName) { script($appName, $fileName); } ?> + <div id="global-loading" class="icon-loading" ngCloak diff --git a/templates/part.content.explore.php b/templates/part.content.explore.php index d99d0799f..28f4e5d23 100644 --- a/templates/part.content.explore.php +++ b/templates/part.content.explore.php @@ -1,7 +1,6 @@ <?php print_unescaped($this->inc('part.content.warnings')) ?> <div id="explore"> - <vue-component name="ExploreItems" v-props-explore="Explore" /> <div class="grid"> <div ng-repeat="entry in Explore.feeds | filter:Explore.filter | orderBy:'-votes'" ng-show="!Explore.feedExists(entry.feed)" class="explore-feed grid-item" news-refresh-masonry> <h2 ng-show="entry.favicon" diff --git a/templates/part.content.php b/templates/part.content.php index 134a7be36..e8699c4de 100644 --- a/templates/part.content.php +++ b/templates/part.content.php @@ -11,7 +11,6 @@ <div ng-show="Content.getItems().length == 0" class="no-feeds-available"> <p ng-show="Content.isShowAll()"><?php p($l->t('No articles available')) ?></p> <p ng-show="!Content.isShowAll()"><?php p($l->t('No unread articles available')) ?></p> - <vue-component name="SomeComponent" v-props="Content" watch-depth="value" /> </div> <button ng-controller="NavigationController as Navigation" id="mark-all-read-button" ng-click="Navigation.markCurrentRead()" class="hidden"> <span title="Mark Read" class="icon-checkmark"></span>