+
{sortTags(app.store.all('tags'))
- .filter(tag => tag.position() !== null && !tag.isChild())
+ .filter((tag) => tag.position() !== null && !tag.isChild())
.map(tagItem)}
+ {Button.component(
+ {
+ className: 'Button TagList-button',
+ icon: 'fas fa-plus',
+ onclick: () => app.modal.show(EditTagModal, { primary: true }),
+ },
+ app.translator.trans('flarum-tags.admin.tags.create_primary_tag_button')
+ )}
-
+
- {app.store.all('tags')
- .filter(tag => tag.position() === null)
+ {app.store
+ .all('tags')
+ .filter((tag) => tag.position() === null)
.sort((a, b) => a.name().localeCompare(b.name()))
.map(tagItem)}
+ {Button.component(
+ {
+ className: 'Button TagList-button',
+ icon: 'fas fa-plus',
+ onclick: () => app.modal.show(EditTagModal, { primary: false }),
+ },
+ app.translator.trans('flarum-tags.admin.tags.create_secondary_tag_button')
+ )}
+
+
+
+
+
+
{app.translator.trans('flarum-tags.admin.tag_settings.required_primary_text')}
+
+
+ {app.translator.trans('flarum-tags.admin.tag_settings.range_separator_text')}
+
+
+
+
+
+
{app.translator.trans('flarum-tags.admin.tag_settings.required_secondary_text')}
+
+
+ {app.translator.trans('flarum-tags.admin.tag_settings.range_separator_text')}
+
+
+
+
{this.submitButton()}
+
+
+
+
{app.translator.trans('flarum-tags.admin.tags.about_tags_text')}
@@ -100,6 +145,11 @@ export default class TagsPage extends Page {
});
}
+ setMinTags(minTags, maxTags, value) {
+ minTags(value);
+ maxTags(Math.max(value, maxTags()));
+ }
+
onSortUpdate(e) {
// If we've moved a tag from 'primary' to 'secondary', then we'll update
// its attributes in our local store so that when we redraw the change
diff --git a/extensions/tags/js/src/admin/index.js b/extensions/tags/js/src/admin/index.js
index db8aaf45d..4c146ae18 100644
--- a/extensions/tags/js/src/admin/index.js
+++ b/extensions/tags/js/src/admin/index.js
@@ -1,16 +1,17 @@
import Tag from '../common/models/Tag';
import addTagsPermissionScope from './addTagsPermissionScope';
import addTagPermission from './addTagPermission';
-import addTagsPane from './addTagsPane';
import addTagsHomePageOption from './addTagsHomePageOption';
import addTagChangePermission from './addTagChangePermission';
+import TagsPage from './components/TagsPage';
app.initializers.add('flarum-tags', app => {
app.store.models.tags = Tag;
+ app.extensionData.for('flarum-tags').registerPage(TagsPage);
+
addTagsPermissionScope();
addTagPermission();
- addTagsPane();
addTagsHomePageOption();
addTagChangePermission();
});
diff --git a/extensions/tags/less/admin.less b/extensions/tags/less/admin.less
index 13df8f305..0aeeefb87 100644
--- a/extensions/tags/less/admin.less
+++ b/extensions/tags/less/admin.less
@@ -3,7 +3,6 @@
@import "admin/TagsPage";
@import "admin/EditTagModal";
-@import "admin/TagSettingsModal";
.Dropdown--restrictByTag .Dropdown-menu {
max-height: 400px;
diff --git a/extensions/tags/less/admin/TagSettingsModal.less b/extensions/tags/less/admin/TagSettingsModal.less
deleted file mode 100644
index 6522257c6..000000000
--- a/extensions/tags/less/admin/TagSettingsModal.less
+++ /dev/null
@@ -1,16 +0,0 @@
-.TagSettingsModal {
- .Form-group:not(:last-child) {
- margin-bottom: 30px;
- }
-}
-.TagSettingsModal-rangeInput {
- input {
- width: 80px;
- display: inline;
- margin: 0 5px;
-
- &:first-child {
- margin-left: 0;
- }
- }
-}
diff --git a/extensions/tags/less/admin/TagsPage.less b/extensions/tags/less/admin/TagsPage.less
index 06c2197b0..843851603 100644
--- a/extensions/tags/less/admin/TagsPage.less
+++ b/extensions/tags/less/admin/TagsPage.less
@@ -1,43 +1,45 @@
-.TagsPage-header {
- background: @control-bg;
+.flarum-tags-Page {
+ padding-bottom: 140px;
+}
+
+.TagsContent-footer {
color: @control-color;
padding: 20px 0;
- .container {
- max-width: 600px;
- }
p {
- margin-bottom: 20px;
- }
- .Button {
- margin-right: 10px;
+ margin-top: 10px;
}
}
-.TagsPage-list {
- padding: 20px 0;
- .container {
- max-width: 600px;
- }
+.TagsContent-list {
+ padding: 20px 0 0;
+
}
-.TagList, .TagList ol {
+
+.TagList,
+.TagList ol {
list-style: none;
- padding: 10px 0;
- margin: 0;
+ padding: 0;
color: @muted-color;
font-size: 13px;
- > li {
+ >li {
+ display: inline-block;
+ max-height: 40px;
cursor: move;
+ width: 100%;
}
- .TagIcon, .icon {
+ .TagIcon,
+ .icon {
margin-right: 10px;
}
}
+
.TagListItem-info {
- padding: 5px 10px;
border-radius: @border-radius;
+ padding: 5px;
+ max-width: max-content;
&:hover {
background: @control-bg;
@@ -46,45 +48,110 @@
.Button {
float: right;
visibility: hidden;
- margin: -8px -10px -8px 10px;
+ margin: -8px -16px -8px 16px;
}
}
-li:not(.sortable-dragging) > .TagListItem-info:hover > .Button {
+
+li:not(.sortable-dragging)>.TagListItem-info:hover>.Button {
visibility: visible;
}
+
.TagList--primary {
font-size: 16px;
- > .sortable-placeholder {
- height: 34px;
+ >.sortable-placeholder {
+ height: 38px;
margin-bottom: 10px;
}
}
+
.TagList ol {
margin-left: 27px;
min-height: 10px;
padding: 0;
- & > :last-child {
+ &> :last-child {
margin-bottom: 10px;
}
}
+
.sortable-placeholder {
border: 2px dashed @control-bg;
border-radius: @border-radius;
- height: 29px;
+ height: 34px;
+ max-width: max-content;
}
-.TagGroup {
- padding-left: 150px;
+.SettingsGroups {
+ display: flex;
+ column-count: 3;
+ column-gap: 30px;
+ flex-wrap: wrap;
- &:first-child {
- border-bottom: 2px solid @control-bg;
+ @media (@tablet-up) {
+ .TagGroup--secondary {
+ max-width: 250px !important;
+ }
}
- > label {
- margin-left: -150px;
- float: left;
- font-weight: bold;
- margin-top: 14px;
+
+ .Form {
+ min-width: 300px;
+
+ >label {
+ margin-bottom: 10px;
+ }
+
+ .TagSettings-rangeInput {
+ input {
+ width: 80px;
+ display: inline;
+ margin: 0 5px;
+
+ &:first-child {
+ margin-left: 0;
+ }
+ }
+ }
+ }
+
+ .TagGroup,
+ .Form {
+ display: inline-grid;
+ padding: 10px 20px;
+ min-height: 20vh;
+ max-width: 400px;
+ grid-template-rows: min-content;
+ border: 1px solid @control-bg;
+ border-radius: @border-radius;
+ flex: 1 1 160px;
+
+ @media (max-width: 1209px) {
+ margin-bottom: 20px;
+ }
+
+ >ol {
+ >li {
+ margin-top: 8px;
+
+ .Button {
+ float: right;
+ visibility: hidden;
+ margin: -8px -16px -8px 16px;
+ }
+ }
+ }
+
+ .TagList-button {
+ background: none;
+ border: 1px dashed @control-bg;
+ height: 40px;
+ margin: auto auto 0 0;
+ }
+
+ >label {
+ float: left;
+ font-weight: bold;
+ color: @muted-color;
+ }
}
}
diff --git a/extensions/tags/src/Command/CreateTagHandler.php b/extensions/tags/src/Command/CreateTagHandler.php
index 08680531e..1349d2f09 100644
--- a/extensions/tags/src/Command/CreateTagHandler.php
+++ b/extensions/tags/src/Command/CreateTagHandler.php
@@ -50,11 +50,12 @@ class CreateTagHandler
);
$parentId = Arr::get($data, 'relationships.parent.data.id');
+ $primary = Arr::get($data, 'attributes.primary');
- if ($parentId !== null) {
+ if ($parentId !== null || $primary) {
$rootTags = Tag::whereNull('parent_id')->whereNotNull('position');
- if ($parentId === 0) {
+ if ($parentId === 0 || $primary) {
$tag->position = $rootTags->max('position') + 1;
} elseif ($rootTags->find($parentId)) {
$position = Tag::where('parent_id', $parentId)->max('position');