Skip to content

Show pointer and use underline dashed for click trigger #1111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marvinchin merged 3 commits into from
Mar 28, 2020
Merged

Show pointer and use underline dashed for click trigger #1111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b0c2dd9
Show pointer and use underline dashed for click trigger
openorclose Mar 9, 2020
8a9225a
Remove contextmenu triggers
openorclose Mar 21, 2020
e346e20
Merge branch 'master' into modal_triggers
openorclose Mar 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions asset/css/markbind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,11 @@ li.footnote-item:target {
text-decoration: underline dotted;
}

.trigger-click {
cursor: pointer;
text-decoration: underline dashed;
}

.modal.mb-zoom {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
Expand Down
4 changes: 2 additions & 2 deletions docs/userGuide/syntax/popovers.mbdf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@
<popover effect="scale" header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="hover">
<button class="btn btn-secondary">Mouseenter</button>
</popover>
<popover effect="scale" header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="contextmenu">
<button class="btn btn-secondary">Contextmenu (right click)</button>
<popover effect="scale" header="Header" content="Lorem ipsum dolor sit amet" placement="top" trigger="click">
<button class="btn btn-secondary">Click</button>
</popover>
</p>
<h4 class="no-index">Markdown</h4>
Expand Down
3 changes: 0 additions & 3 deletions docs/userGuide/syntax/tooltips.mbdf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,6 @@ Trigger
<tooltip effect="scale" content="Lorem ipsum dolor sit amet" placement="top" trigger="click">
<button class="btn btn-secondary">Click</button>
</tooltip>
<tooltip effect="scale" content="Lorem ipsum dolor sit amet" placement="top" trigger="contextmenu">
<button class="btn btn-secondary">Contextmenu (right click)</button>
</tooltip>
<br />
<br />
<tooltip effect="scale" content="Lorem ipsum dolor sit amet" placement="top" trigger="focus">
Expand Down
11 changes: 8 additions & 3 deletions src/lib/markbind/src/parsers/componentParser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,11 @@ function _warnDeprecatedAttributes(node, attributeNamePairs) {
* For modals, we make it attempt to show the modal if it exists.
*/

function addTriggerClass(node, trigger) {
const triggerClass = trigger === 'click' ? 'trigger-click' : 'trigger';
node.attribs.class = node.attribs.class ? `${node.attribs.class} ${triggerClass}` : triggerClass;
}

function _parseTrigger(node) {
node.name = 'span';
const trigger = node.attribs.trigger || 'hover';
Expand All @@ -198,7 +203,7 @@ function _parseTrigger(node) {
= 'tooltipContentGetter';
const convertedTrigger = trigger === 'hover' ? 'mouseover' : trigger;
node.attribs[`v-on:${convertedTrigger}`] = `$refs['${node.attribs.for}'].show()`;
node.attribs.class = node.attribs.class ? `${node.attribs.class} trigger` : 'trigger';
addTriggerClass(node, convertedTrigger);
}

/*
Expand All @@ -222,7 +227,7 @@ function _parsePopover(node) {
node.attribs['data-mb-component-type'] = 'popover';
node.attribs[`v-b-popover.${trigger}.${placement}.html`]
= 'popoverInnerGenerator';
node.attribs.class = node.attribs.class ? `${node.attribs.class} trigger` : 'trigger';
addTriggerClass(node, trigger);
_transformSlottedComponents(node);
}

Expand Down Expand Up @@ -267,7 +272,7 @@ function _parseTooltip(node) {
node.attribs['data-mb-component-type'] = 'tooltip';
node.attribs[`v-b-tooltip.${trigger}.${placement}.html`]
= 'tooltipInnerContentGetter';
node.attribs.class = node.attribs.class ? `${node.attribs.class} trigger` : 'trigger';
addTriggerClass(node, trigger);
_transformSlottedComponents(node);
}

Expand Down
6 changes: 3 additions & 3 deletions test/functional/test_site/expected/bugs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<p><a href="https://github.com/MarkBind/markbind/issues/49">Issue #49</a></p>
<p>Repro:</p>
<p><span for="pop:xp-user-stories" v-b-popover.hover.top.html="popoverGenerator" v-b-tooltip.hover.top.html="tooltipContentGetter" v-on:mouseover="$refs['pop:xp-user-stories'].show()" class="trigger">Establishing Requirements</span></p>
<span id="pop:xp-user-stories" trigger="click" data-mb-component-type="popover" v-b-popover.click.top.html="popoverInnerGenerator" class="trigger">
<span id="pop:xp-user-stories" trigger="click" data-mb-component-type="popover" v-b-popover.click.top.html="popoverInnerGenerator" class="trigger-click">
<div data-mb-html-for="content">
<div>
<p>Requirements gathering, requirements elicitation, requirements analysis,
Expand All @@ -49,7 +49,7 @@
<p><a href="https://github.com/MarkBind/markbind/issues/107">Issue #107</a></p>
<p>Repro:</p>
<div>
<p>This is to reproduce <span trigger="click" for="modal:bugRepro" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:bugRepro'].show()" class="trigger">multiple inclusions of a modal bug</span></p>
<p>This is to reproduce <span trigger="click" for="modal:bugRepro" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:bugRepro'].show()" class="trigger-click">multiple inclusions of a modal bug</span></p>
<b-modal id="modal:bugRepro" hide-footer="" size="lg" modal-class="mb-zoom" ref="modal:bugRepro"><template slot="modal-title">Establishing Requirements</template>
<div>
<p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
Expand All @@ -59,7 +59,7 @@
</b-modal>
</div>
<div>
<p>This is to reproduce <span trigger="click" for="modal:bugRepro" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:bugRepro'].show()" class="trigger">multiple inclusions of a modal bug</span></p>
<p>This is to reproduce <span trigger="click" for="modal:bugRepro" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:bugRepro'].show()" class="trigger-click">multiple inclusions of a modal bug</span></p>
<b-modal id="modal:bugRepro" hide-footer="" size="lg" modal-class="mb-zoom" ref="modal:bugRepro"><template slot="modal-title">Establishing Requirements</template>
<div>
<p>Requirements gathering, requirements elicitation, requirements analysis, requirements capture are some of the terms commonly <strong>and</strong> interchangeably used to represent the activity of understanding what a software product should
Expand Down
5 changes: 5 additions & 0 deletions test/functional/test_site/expected/markbind/css/markbind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,11 @@ li.footnote-item:target {
text-decoration: underline dotted;
}

.trigger-click {
cursor: pointer;
text-decoration: underline dashed;
}

.modal.mb-zoom {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
Expand Down
5 changes: 5 additions & 0 deletions test/functional/test_site_algolia_plugin/expected/markbind/css/markbind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,11 @@ li.footnote-item:target {
text-decoration: underline dotted;
}

.trigger-click {
cursor: pointer;
text-decoration: underline dashed;
}

.modal.mb-zoom {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
Expand Down
5 changes: 5 additions & 0 deletions test/functional/test_site_convert/expected/markbind/css/markbind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,11 @@ li.footnote-item:target {
text-decoration: underline dotted;
}

.trigger-click {
cursor: pointer;
text-decoration: underline dashed;
}

.modal.mb-zoom {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
Expand Down
5 changes: 5 additions & 0 deletions test/functional/test_site_expressive_layout/expected/markbind/css/markbind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,11 @@ li.footnote-item:target {
text-decoration: underline dotted;
}

.trigger-click {
cursor: pointer;
text-decoration: underline dashed;
}

.modal.mb-zoom {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
Expand Down
5 changes: 5 additions & 0 deletions test/functional/test_site_special_tags/expected/markbind/css/markbind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,11 @@ li.footnote-item:target {
text-decoration: underline dotted;
}

.trigger-click {
cursor: pointer;
text-decoration: underline dashed;
}

.modal.mb-zoom {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
Expand Down
2 changes: 1 addition & 1 deletion test/functional/test_site_templates/test_default/expected/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ <h1 id="heading-1">Heading 1<a class="fa fa-anchor" href="#heading-1"></a></h1>
<pre><code class="hljs html"><span><span class="hljs-tag">&lt;<span class="hljs-name">foo</span>&gt;</span></span><span> <span class="hljs-tag">&lt;<span class="hljs-name">bar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"name"</span>&gt;</span>goo<span class="hljs-tag">&lt;/<span class="hljs-name">bar</span>&gt;</span></span><span><span class="hljs-tag">&lt;/<span class="hljs-name">foo</span>&gt;</span></span></code></pre>
<h2 id="sub-heading-1-1">Sub Heading 1.1<a class="fa fa-anchor" href="#sub-heading-1-1"></a></h2>
<p>A <span effect="scale" placement="top" trigger="hover" data-mb-component-type="tooltip" v-b-tooltip.hover.top.html="tooltipInnerContentGetter" class="trigger"><span data-mb-html-for="_content">❗️ some <strong>important explanation</strong></span>tooltip</span>,
a <span for="modal:modalinfo" trigger="click" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:modalinfo'].show()" class="trigger">modal</span>, a <a href="https://markbind.org/">link</a>,
a <span for="modal:modalinfo" trigger="click" v-b-popover.click.top.html="popoverGenerator" v-b-tooltip.click.top.html="tooltipContentGetter" v-on:click="$refs['modal:modalinfo'].show()" class="trigger-click">modal</span>, a <a href="https://markbind.org/">link</a>,
a <span class="badge badge-danger">badge</span>, another <span class="badge badge-warning">badge</span>.</p>
<b-modal id="modal:modalinfo" hide-footer="" size="" modal-class="mb-zoom" ref="modal:modalinfo"><template slot="modal-title">Modal Title</template> Some text some text some text some text some text some text some text. Some text some text some text some text some text some text some text. Some text some text some text some text some text
some text some text some text some text some text some text some text some text some text. Some text some text some text some text some text some text. Some text some text some text some text some text some text some text.
Expand Down
5 changes: 5 additions & 0 deletions test/functional/test_site_templates/test_default/expected/markbind/css/markbind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,11 @@ li.footnote-item:target {
text-decoration: underline dotted;
}

.trigger-click {
cursor: pointer;
text-decoration: underline dashed;
}

.modal.mb-zoom {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
Expand Down
5 changes: 5 additions & 0 deletions test/functional/test_site_templates/test_minimal/expected/markbind/css/markbind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,11 @@ li.footnote-item:target {
text-decoration: underline dotted;
}

.trigger-click {
cursor: pointer;
text-decoration: underline dashed;
}

.modal.mb-zoom {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
Expand Down