From 89ddc431d7fe25165bf0276af8f6983410f317a3 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Fri, 3 Aug 2018 14:09:07 -0300 Subject: [PATCH 1/5] Adds new masonry view mode to theme. --- package.json | 1 + src/admin/js/theme-main.js | 4 + src/admin/scss/_view-mode-masonry.scss | 86 +++++++++++++++++++ .../class-tainacan-theme-helper.php | 11 ++- src/theme-helper/view-mode-masonry.vue | 82 ++++++++++++++++++ 5 files changed, 182 insertions(+), 2 deletions(-) create mode 100644 src/admin/scss/_view-mode-masonry.scss create mode 100644 src/theme-helper/view-mode-masonry.vue diff --git a/package.json b/package.json index 8f6f939c8..9cb6da8a3 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "uglifyjs-webpack-plugin": "^1.2.7", "vue-custom-element": "^3.2.3", "vue-loader": "^15.2.6", + "vue-masonry-css": "^1.0.2", "vue-template-compiler": "^2.5.17", "webpack": "^4.16.3", "webpack-cli": "^3.1.0", diff --git a/src/admin/js/theme-main.js b/src/admin/js/theme-main.js index 8bb5ab0f8..38ff82899 100644 --- a/src/admin/js/theme-main.js +++ b/src/admin/js/theme-main.js @@ -33,6 +33,8 @@ import ItemsPage from '../pages/lists/items-page.vue'; import ViewModeTable from '../../theme-helper/view-mode-table.vue'; import ViewModeCards from '../../theme-helper/view-mode-cards.vue'; import ViewModeRecords from '../../theme-helper/view-mode-records.vue'; +import ViewModeMasonry from '../../theme-helper/view-mode-masonry.vue'; +import VueMasonry from 'vue-masonry-css'; // Remaining imports import HelpButton from '../components/other/help-button.vue'; @@ -46,6 +48,7 @@ import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin } from ' Vue.use(Buefy); Vue.use(VTooltip); Vue.use(VueHammer); +Vue.use(VueMasonry); Vue.use(I18NPlugin); Vue.use(UserPrefsPlugin); Vue.use(RouterHelperPlugin); @@ -85,6 +88,7 @@ Vue.component('items-page', ItemsPage); Vue.component('view-mode-table', ViewModeTable); Vue.component('view-mode-cards', ViewModeCards); Vue.component('view-mode-records', ViewModeRecords); +Vue.component('view-mode-masonry', ViewModeMasonry); Vue.use(eventBusSearch, { store: store, router: routerTheme}); diff --git a/src/admin/scss/_view-mode-masonry.scss b/src/admin/scss/_view-mode-masonry.scss new file mode 100644 index 000000000..d5637786f --- /dev/null +++ b/src/admin/scss/_view-mode-masonry.scss @@ -0,0 +1,86 @@ +.tainacan-masonry-container { + min-height: 50vh; + padding: 0; + display: flex; + flex-wrap: wrap; + flex-grow: 1; + flex-shrink: 1; + justify-content: space-evenly; + + .selected-masonry-item { + background-color: $turquoise1; + } + + .tainacan-masonry-item { + animation-name: item-appear; + display: block; + animation-duration: 0.5s; + width: 100%; + flex-basis: 0; + margin-bottom: 30px; + text-align: center; + + &:hover { + background-color: $gray1; + } + + .grid-item-checkbox { + position: absolute; + margin-top: 9px; + margin-left: 1rem; + } + .actions-area { + position: relative; + float: right; + width: 100%; + display: flex; + justify-content: flex-end; + visibility: hidden; + opacity: 0; + padding: 8px; + transition: visibility 0.2s, opacity 0.2s; + margin-top: -43px; + background-color: $gray2; + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + + a { + margin-left: 12px; + } + } + &:hover .actions-area { + visibility: visible; + opacity: 1.0; + } + &.selected-grid-item { + .actions-area { + background-color: $turquoise1; + } + } + + img { + width: 100%; + height: auto; + border-radius: 2px; + margin-bottom: -5px; + } + + .metadata-title { + flex-shrink: 0; + margin: 6px 6px 6px 6px; + padding: 6px 1rem; + min-height: 30px; + cursor: pointer; + + p { + font-size: 0.875rem !important; + color: black !important; + text-align: left !important; + margin-bottom: 0 !important; + } + } + + } +} + + diff --git a/src/theme-helper/class-tainacan-theme-helper.php b/src/theme-helper/class-tainacan-theme-helper.php index b560793fd..4248db7a4 100644 --- a/src/theme-helper/class-tainacan-theme-helper.php +++ b/src/theme-helper/class-tainacan-theme-helper.php @@ -56,19 +56,26 @@ class Theme_Helper { 'type' => 'component', ]); $this->register_view_mode('cards', [ - 'label' => __('Cards view', 'tainacan'), + 'label' => __('Cards', 'tainacan'), 'dynamic_metadata' => false, 'description' => 'A cards view, displaying title, description, author name and creation date.', 'icon' => '', 'type' => 'component' ]); $this->register_view_mode('records', [ - 'label' => __('Records view', 'tainacan'), + 'label' => __('Records', 'tainacan'), 'dynamic_metadata' => true, 'description' => 'A records view, similiar to cards, but flexible for metadata', 'icon' => '', 'type' => 'component' ]); + $this->register_view_mode('masonry', [ + 'label' => __('Masonry', 'tainacan'), + 'dynamic_metadata' => false, + 'description' => 'A masonry view, similar to pinterest, which will display images without cropping.', + 'icon' => '', + 'type' => 'component' + ]); } public function enqueue_scripts($force = false) { diff --git a/src/theme-helper/view-mode-masonry.vue b/src/theme-helper/view-mode-masonry.vue new file mode 100644 index 000000000..b7b4a0be5 --- /dev/null +++ b/src/theme-helper/view-mode-masonry.vue @@ -0,0 +1,82 @@ + + + + + + + From 9a3754a8cd7aa00bf3e247e76ed2f811895eb311 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Fri, 3 Aug 2018 14:33:26 -0300 Subject: [PATCH 2/5] Moves masonry2 as a dev dependency to a dependency on package.json. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9cb6da8a3..822607415 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "vue-router": "^3.0.1", "vue-the-mask": "^0.11.1", "vue2-hammer": "^1.0.7", + "vue-masonry-css": "^1.0.2", "vuedraggable": "^2.16.0", "vuex": "^3.0.1" }, @@ -41,7 +42,6 @@ "uglifyjs-webpack-plugin": "^1.2.7", "vue-custom-element": "^3.2.3", "vue-loader": "^15.2.6", - "vue-masonry-css": "^1.0.2", "vue-template-compiler": "^2.5.17", "webpack": "^4.16.3", "webpack-cli": "^3.1.0", From 6a71f69b8b2640794bbb55bdc186b54d8ed4ab9b Mon Sep 17 00:00:00 2001 From: Leo Germani Date: Fri, 3 Aug 2018 15:57:48 -0300 Subject: [PATCH 3/5] add new template tag has_document() --- src/theme-helper/template-tags.php | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/src/theme-helper/template-tags.php b/src/theme-helper/template-tags.php index ec7179121..45bfde37f 100644 --- a/src/theme-helper/template-tags.php +++ b/src/theme-helper/template-tags.php @@ -62,19 +62,14 @@ function tainacan_the_metadata($args = array()) { * * Return the item document as a HTML string to be used as output. * - * @param int|string|Tainacan\Entities\Metadatum $metadatum Metadatum object, ID or slug to retrieve only one metadatum. empty returns all metadata - * @param bool $hide_empty Wether to hide or not metadata the item has no value to * @return string The HTML output */ function tainacan_get_the_document() { - $post = get_post(); - $theme_helper = \Tainacan\Theme_Helper::get_instance(); + $item = tainacan_get_item(); - if (!$theme_helper->is_post_an_item($post)) + if (!$item) return; - $item = new Entities\Item($post); - return $item->get_document_html(); } @@ -83,6 +78,25 @@ function tainacan_the_document() { echo tainacan_get_the_document(); } +/** + * To be used inside The Loop + * + * Check whether the current item has a document or not + * + * @return bool True if item has document, false if it does not + */ +function tainacan_has_document() { + $item = tainacan_get_item(); + + if (!$item) + return; + + $document = $item->get_document(); + + return ! empty($document); + +} + /** * When visiting a collection archive or single, returns the current collection id * From 652bf6b71336d242786b77952d2e40e438cc90a4 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Fri, 3 Aug 2018 16:32:13 -0300 Subject: [PATCH 4/5] Adds mansory layout to admin view mdoe. --- src/admin/components/lists/items-list.vue | 66 +++++++++++++++++++++++ src/admin/js/main.js | 2 + src/admin/js/theme-main.js | 2 +- src/admin/pages/lists/items-page.vue | 11 +++- src/admin/scss/_checkboxes.scss | 2 +- src/admin/scss/_view-mode-masonry.scss | 14 +++-- src/admin/tainacan-admin-i18n.php | 1 + src/theme-helper/view-mode-masonry.vue | 3 +- 8 files changed, 91 insertions(+), 10 deletions(-) diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue index 8e689e988..6657d718f 100644 --- a/src/admin/components/lists/items-list.vue +++ b/src/admin/components/lists/items-list.vue @@ -101,6 +101,71 @@ + + +
+ + +
+ +
+ + +
+

{{ item.title != undefined ? item.title : '' }}

+
+ + + + + +
+ + + + + + +
+
+ +
@import "../../scss/_variables.scss"; + @import "../../scss/_view-mode-masonry.scss"; @import "../../scss/_view-mode-grid.scss"; @import "../../scss/_view-mode-cards.scss"; @import "../../scss/_view-mode-records.scss"; diff --git a/src/admin/js/main.js b/src/admin/js/main.js index d70c408ff..82afa9a03 100644 --- a/src/admin/js/main.js +++ b/src/admin/js/main.js @@ -7,6 +7,7 @@ import Vue from 'vue'; import Buefy from 'buefy'; import VTooltip from 'v-tooltip'; import { VueHammer } from 'vue2-hammer'; +import VueMasonry from 'vue-masonry-css'; // Custom elements import Text from '../../classes/metadata-types/text/Text.vue'; @@ -49,6 +50,7 @@ import VueTheMask from 'vue-the-mask'; Vue.use(Buefy); Vue.use(VTooltip); Vue.use(VueHammer); +Vue.use(VueMasonry); Vue.use(I18NPlugin); Vue.use(UserPrefsPlugin); Vue.use(RouterHelperPlugin); diff --git a/src/admin/js/theme-main.js b/src/admin/js/theme-main.js index 38ff82899..44d8d8f00 100644 --- a/src/admin/js/theme-main.js +++ b/src/admin/js/theme-main.js @@ -3,6 +3,7 @@ import Vue from 'vue'; import Buefy from 'buefy'; import VTooltip from 'v-tooltip'; import { VueHammer } from 'vue2-hammer'; +import VueMasonry from 'vue-masonry-css'; // Custom elements import Text from '../../classes/metadata-types/text/Text.vue'; @@ -34,7 +35,6 @@ import ViewModeTable from '../../theme-helper/view-mode-table.vue'; import ViewModeCards from '../../theme-helper/view-mode-cards.vue'; import ViewModeRecords from '../../theme-helper/view-mode-records.vue'; import ViewModeMasonry from '../../theme-helper/view-mode-masonry.vue'; -import VueMasonry from 'vue-masonry-css'; // Remaining imports import HelpButton from '../components/other/help-button.vue'; diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue index 935d15e56..55219e03f 100644 --- a/src/admin/pages/lists/items-page.vue +++ b/src/admin/pages/lists/items-page.vue @@ -307,7 +307,8 @@ :class="{'mdi-view-list' : ( adminViewMode == 'table' || adminViewMode == undefined), 'mdi-view-module' : adminViewMode == 'cards', 'mdi-apps' : adminViewMode == 'grid', - 'mdi-view-column' : adminViewMode == 'records'}" + 'mdi-view-column' : adminViewMode == 'records', + 'mdi-view-dashboard' : adminViewMode == 'masonry'}" class="mdi"/> @@ -346,6 +347,14 @@ icon="view-column"/> {{ $i18n.get('label_records') }} + + + {{ $i18n.get('label_masonry') }} +
diff --git a/src/admin/scss/_checkboxes.scss b/src/admin/scss/_checkboxes.scss index eaa10f554..e796bd16d 100644 --- a/src/admin/scss/_checkboxes.scss +++ b/src/admin/scss/_checkboxes.scss @@ -25,4 +25,4 @@ background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important; border-color: $gray4 !important; } -} \ No newline at end of file +} diff --git a/src/admin/scss/_view-mode-masonry.scss b/src/admin/scss/_view-mode-masonry.scss index d5637786f..847500af0 100644 --- a/src/admin/scss/_view-mode-masonry.scss +++ b/src/admin/scss/_view-mode-masonry.scss @@ -24,9 +24,9 @@ background-color: $gray1; } - .grid-item-checkbox { + .masonry-item-checkbox { position: absolute; - margin-top: 9px; + margin-top: 8px; margin-left: 1rem; } .actions-area { @@ -63,13 +63,17 @@ height: auto; border-radius: 2px; margin-bottom: -5px; + + &:hover { + cursor: pointer; + } } .metadata-title { flex-shrink: 0; - margin: 6px 6px 6px 6px; - padding: 6px 1rem; - min-height: 30px; + margin: 0px 6px 0px 24px; + padding: 10px 1rem; + min-height: 41px; cursor: pointer; p { diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php index 9c6000912..6d0a0de41 100644 --- a/src/admin/tainacan-admin-i18n.php +++ b/src/admin/tainacan-admin-i18n.php @@ -239,6 +239,7 @@ return apply_filters( 'tainacan-admin-i18n', [ 'label_table' => __( 'Table', 'tainacan' ), 'label_cards' => __( 'Cards', 'tainacan' ), 'label_records' => __( 'Records', 'tainacan' ), + 'label_masonry' => __( 'Masonry', 'tainacan' ), 'label_visualization' => __( 'Visualization', 'tainacan' ), 'label_available_importers' => __( 'Available Importers', 'tainacan' ), 'label_target_collection' => __( 'Target Collection', 'tainacan' ), diff --git a/src/theme-helper/view-mode-masonry.vue b/src/theme-helper/view-mode-masonry.vue index b7b4a0be5..8cfb68ed6 100644 --- a/src/theme-helper/view-mode-masonry.vue +++ b/src/theme-helper/view-mode-masonry.vue @@ -74,8 +74,7 @@ export default { @import "../../src/admin/scss/_view-mode-masonry.scss"; .tainacan-masonry-container .tainacan-masonry-item .metadata-title { - padding: 0.75rem; - margin-bottom: 0px; + margin: 0px 6px; } From 7b3a41497671a53a5104d443534931115deeb6cc Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Fri, 3 Aug 2018 16:54:32 -0300 Subject: [PATCH 5/5] Fixes missing label and adds percent value to process in popup. --- src/admin/components/other/processes-popup.vue | 9 +++++++-- src/admin/scss/_view-mode-cards.scss | 1 + src/admin/tainacan-admin-i18n.php | 1 + 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/admin/components/other/processes-popup.vue b/src/admin/components/other/processes-popup.vue index d8729e658..335c677d5 100644 --- a/src/admin/components/other/processes-popup.vue +++ b/src/admin/components/other/processes-popup.vue @@ -28,7 +28,7 @@ tag="a" :to="$routerHelper.getProcessesPage()" class="is-secondary"> - {{ $i18n.get('label_see_more') }} + {{ $i18n.get('label_view_more') }}

  • {{ bgProcess.name ? bgProcess.name : $i18n.get('label_unamed_process') }}

    + {{ (bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? '(' + bgProcesses[0].progress_value + '%)' : '' }}