IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

FEATURE: Add topic-navigation plugin outlet and popup component (#15081)

Browse Source 
Adds a plugin outlet that can be used to insert a popup over topic timeline.
This commit is contained in:
Bianca Nenciu 2021-12-15 17:16:14 +02:00 committed by GitHub
parent 9fd1a00eef
commit 0335c9d77f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/discourse/app/components/topic-navigation-popup.js Normal file
View File

@ -0,0 +1,12 @@
import Component from "@ember/component";
import { action } from "@ember/object";
export default Component.extend({
tagName: "",
hidden: false,
@action
close() {
this.set("hidden", true);
},
});

6
app/assets/javascripts/discourse/app/templates/components/topic-navigation-popup.hbs Normal file
View File

@ -0,0 +1,6 @@
{{#unless hidden}}
<div class="topic-navigation-popup">
{{d-button action=(action "close") class="close btn-flat" icon="times"}}
{{yield}}
</div>
{{/unless}}

2
app/assets/javascripts/discourse/app/templates/topic.hbs
View File

@ -133,6 +133,8 @@
{{plugin-outlet name="above-timeline" tagName=""}} {{plugin-outlet name="above-timeline" tagName=""}}
{{#topic-navigation class="topic-navigation" topic=model jumpToDate=(action "jumpToDate") jumpToIndex=(action "jumpToIndex") as |info|}} {{#topic-navigation class="topic-navigation" topic=model jumpToDate=(action "jumpToDate") jumpToIndex=(action "jumpToIndex") as |info|}}
{{plugin-outlet name="topic-navigation" tagName="" args=(hash topic=model)}}
{{#if info.renderTimeline}} {{#if info.renderTimeline}}
{{topic-timeline {{topic-timeline
topic=model topic=model

22
app/assets/stylesheets/common/base/topic.scss
View File

@ -56,6 +56,28 @@ $topic-progress-height: 42px;
z-index: z("fullscreen"); z-index: z("fullscreen");
} }
} }
.topic-navigation-popup {
box-sizing: border-box;
position: absolute;
top: 0;
overflow-y: auto;
z-index: z("timeline");
padding: 10px 10px 35px 10px;
box-shadow: shadow("dropdown");
background: var(--tertiary-low);
.close {
display: flex;
align-items: center;
position: absolute;
right: 10px;
top: 10px;
color: var(--primary);
opacity: 0.5;
font-size: var(--font-up-1);
}
}
} }
// progress bar // progress bar
@media screen and (max-width: 924px) { @media screen and (max-width: 924px) {