mirror of
https://github.com/documize/community.git
synced 2025-07-24 23:59:47 +02:00
tooltips
This commit is contained in:
Harvey Kandola
parent
c4dfa42087
commit
9259bf0c99
5 changed files with 254 additions and 205 deletions
|
|
@ -11,12 +11,13 @@
|
|||
|
||||
import Ember from 'ember';
|
||||
import netUtil from '../../utils/net';
|
||||
import TooltipMixin from '../../mixins/tooltip';
|
||||
|
||||
const {
|
||||
inject: { service }
|
||||
} = Ember;
|
||||
|
||||
export default Ember.Component.extend({
|
||||
export default Ember.Component.extend(TooltipMixin, {
|
||||
folderService: service('folder'),
|
||||
folder: null,
|
||||
appMeta: service(),
|
||||
|
|
@ -51,6 +52,17 @@ export default Ember.Component.extend({
|
|||
this.set('view.search', (route === 'search') ? true : false);
|
||||
},
|
||||
|
||||
didRender() {
|
||||
if (this.get('session.isAdmin')) {
|
||||
this.addTooltip(document.getElementById("workspace-settings"));
|
||||
}
|
||||
if (this.get("session.authenticated")) {
|
||||
this.addTooltip(document.getElementById("workspace-logout"));
|
||||
} else {
|
||||
this.addTooltip(document.getElementById("workspace-login"));
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
switchAccount(domain) {
|
||||
this.audit.record('switched-account');
|
||||
|
|
|
|||
|
|
@ -12,44 +12,43 @@
|
|||
import Ember from 'ember';
|
||||
|
||||
export default Ember.Component.extend({
|
||||
results: [],
|
||||
resultPhrase: "",
|
||||
results: [],
|
||||
resultPhrase: "",
|
||||
|
||||
didReceiveAttrs() {
|
||||
let results = this.get('results');
|
||||
let temp = _.groupBy(results, 'documentId');
|
||||
let documents = [];
|
||||
didReceiveAttrs() {
|
||||
let results = this.get('results');
|
||||
let temp = _.groupBy(results, 'documentId');
|
||||
let documents = [];
|
||||
|
||||
_.each(temp, function(document) {
|
||||
_.each(temp, function (document) {
|
||||
let refs = [];
|
||||
|
||||
if (document.length > 1) {
|
||||
refs = document.slice(1);
|
||||
}
|
||||
|
||||
_.each(refs, function(ref, index) {
|
||||
ref.comma = index === refs.length-1 ? "" : ", ";
|
||||
_.each(refs, function (ref, index) {
|
||||
ref.comma = index === refs.length - 1 ? "" : ", ";
|
||||
});
|
||||
|
||||
let hasRefs = refs.length > 0;
|
||||
|
||||
documents.pushObject( {
|
||||
doc: document[0],
|
||||
ref: refs,
|
||||
documents.pushObject({
|
||||
doc: document[0],
|
||||
ref: refs,
|
||||
hasReferences: hasRefs
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
let phrase = 'Nothing found';
|
||||
let phrase = 'Nothing found';
|
||||
|
||||
if (results.length > 0) {
|
||||
let references = results.length === 1 ? "reference" : "references";
|
||||
let i = results.length;
|
||||
let j = documents.length;
|
||||
phrase = `${i} ${references}`;
|
||||
}
|
||||
if (results.length > 0) {
|
||||
let references = results.length === 1 ? "reference" : "references";
|
||||
let i = results.length;
|
||||
phrase = `${i} ${references}`;
|
||||
}
|
||||
|
||||
this.set('resultPhrase', phrase);
|
||||
this.set('documents', documents);
|
||||
}
|
||||
this.set('resultPhrase', phrase);
|
||||
this.set('documents', documents);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
.user-notification {
|
||||
position: fixed;
|
||||
display: none;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background-color: $color-toast;
|
||||
color: $color-white;
|
||||
padding: 10px 15px;
|
||||
text-align: left;
|
||||
border-radius: 2px;
|
||||
@extend .z-depth-1;
|
||||
position: fixed;
|
||||
display: none;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background-color: $color-toast;
|
||||
color: $color-white;
|
||||
padding: 10px 15px;
|
||||
text-align: left;
|
||||
border-radius: 2px;
|
||||
@extend .z-depth-1;
|
||||
z-index: 999;
|
||||
|
||||
> .message {
|
||||
margin: 3px 0;
|
||||
padding: 0;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
> .message {
|
||||
margin: 3px 0;
|
||||
padding: 0;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.busy-indicator {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,163 +2,200 @@
|
|||
|
||||
.tooltip-element {
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
&:after, &:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
&:after, &:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
position: absolute;
|
||||
display: none;
|
||||
&.tooltip-open {
|
||||
display: block;
|
||||
}
|
||||
&.tooltip-theme-arrows {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
.tooltip-content {
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
font-family: inherit;
|
||||
background: $color-tooltip;
|
||||
color: $color-white;
|
||||
padding: 0.5em;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.1em;
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-width: 8px;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
&.tooltip-element-attached-bottom.tooltip-element-attached-center .tooltip-content {
|
||||
margin-bottom: 8px;
|
||||
&:before {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
border-top-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
&.tooltip-element-attached-top.tooltip-element-attached-center .tooltip-content {
|
||||
margin-top: 8px;
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
border-bottom-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
&.tooltip-element-attached-right.tooltip-element-attached-middle .tooltip-content {
|
||||
margin-right: 8px;
|
||||
&:before {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
border-left-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
&.tooltip-element-attached-left.tooltip-element-attached-middle .tooltip-content {
|
||||
margin-left: 8px;
|
||||
&:before {
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
border-right-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
&.tooltip-element-attached-top {
|
||||
&.tooltip-element-attached-left.tooltip-target-attached-bottom .tooltip-content {
|
||||
margin-top: 8px;
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
left: 8px;
|
||||
border-bottom-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
&.tooltip-element-attached-right.tooltip-target-attached-bottom .tooltip-content {
|
||||
margin-top: 8px;
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
right: 8px;
|
||||
border-bottom-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.tooltip-element-attached-bottom {
|
||||
&.tooltip-element-attached-left.tooltip-target-attached-top .tooltip-content {
|
||||
margin-bottom: 8px;
|
||||
&:before {
|
||||
top: 100%;
|
||||
left: 8px;
|
||||
border-top-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
&.tooltip-element-attached-right.tooltip-target-attached-top .tooltip-content {
|
||||
margin-bottom: 8px;
|
||||
&:before {
|
||||
top: 100%;
|
||||
right: 8px;
|
||||
border-top-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.tooltip-element-attached-top {
|
||||
&.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
|
||||
margin-right: 8px;
|
||||
&:before {
|
||||
top: 8px;
|
||||
left: 100%;
|
||||
border-left-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
&.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
|
||||
margin-left: 8px;
|
||||
&:before {
|
||||
top: 8px;
|
||||
right: 100%;
|
||||
border-right-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.tooltip-element-attached-bottom {
|
||||
&.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
|
||||
margin-right: 8px;
|
||||
&:before {
|
||||
bottom: 8px;
|
||||
left: 100%;
|
||||
border-left-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
&.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
|
||||
margin-left: 8px;
|
||||
&:before {
|
||||
bottom: 8px;
|
||||
right: 100%;
|
||||
border-right-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
pointer-events: none;
|
||||
.tooltip-content {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
opacity: 0;
|
||||
&.tooltip-open-transitionend {
|
||||
display: block;
|
||||
}
|
||||
&.tooltip-after-open {
|
||||
transition: opacity 600ms 400ms;
|
||||
opacity: 1;
|
||||
}
|
||||
box-sizing: border-box;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
position: absolute;
|
||||
display: none;
|
||||
|
||||
&.tooltip-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.tooltip-theme-arrows {
|
||||
z-index: 999;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
.tooltip-content {
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
font-family: inherit;
|
||||
background: $color-tooltip;
|
||||
color: $color-white;
|
||||
padding: 0.5em;
|
||||
font-size: 0.8em;
|
||||
line-height: 1.1em;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-width: 8px;
|
||||
border-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-bottom.tooltip-element-attached-center .tooltip-content {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:before {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
border-top-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-top.tooltip-element-attached-center .tooltip-content {
|
||||
margin-top: 8px;
|
||||
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
border-bottom-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-right.tooltip-element-attached-middle .tooltip-content {
|
||||
margin-right: 8px;
|
||||
|
||||
&:before {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
border-left-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-left.tooltip-element-attached-middle .tooltip-content {
|
||||
margin-left: 8px;
|
||||
|
||||
&:before {
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
border-right-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-top {
|
||||
&.tooltip-element-attached-left.tooltip-target-attached-bottom .tooltip-content {
|
||||
margin-top: 8px;
|
||||
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
left: 8px;
|
||||
border-bottom-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-right.tooltip-target-attached-bottom .tooltip-content {
|
||||
margin-top: 8px;
|
||||
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
right: 8px;
|
||||
border-bottom-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-bottom {
|
||||
&.tooltip-element-attached-left.tooltip-target-attached-top .tooltip-content {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:before {
|
||||
top: 100%;
|
||||
left: 8px;
|
||||
border-top-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-right.tooltip-target-attached-top .tooltip-content {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:before {
|
||||
top: 100%;
|
||||
right: 8px;
|
||||
border-top-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-top {
|
||||
&.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
|
||||
margin-right: 8px;
|
||||
|
||||
&:before {
|
||||
top: 8px;
|
||||
left: 100%;
|
||||
border-left-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
|
||||
margin-left: 8px;
|
||||
|
||||
&:before {
|
||||
top: 8px;
|
||||
right: 100%;
|
||||
border-right-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-bottom {
|
||||
&.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
|
||||
margin-right: 8px;
|
||||
|
||||
&:before {
|
||||
bottom: 8px;
|
||||
left: 100%;
|
||||
border-left-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
|
||||
margin-left: 8px;
|
||||
|
||||
&:before {
|
||||
bottom: 8px;
|
||||
right: 100%;
|
||||
border-right-color: $color-tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
pointer-events: none;
|
||||
|
||||
.tooltip-content {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
}
|
||||
opacity: 0;
|
||||
|
||||
&.tooltip-open-transitionend {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.tooltip-after-open {
|
||||
transition: opacity 600ms 400ms;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,14 +29,14 @@
|
|||
|
||||
<ul class="bottom-zone">
|
||||
{{#if session.session.content.authenticated.user.admin}}
|
||||
<li class="{{if view.settings 'selected'}}">
|
||||
<li id="workspace-settings" class="{{if view.settings 'selected'}}" data-tooltip="Settings" data-tooltip-position="right center">
|
||||
{{#link-to 'customize.general'}}
|
||||
<i class="material-icons icon-tool">tune</i>
|
||||
{{/link-to}}
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if session.authenticated}}
|
||||
<li>
|
||||
<li id="workspace-logout" data-tooltip="Logout" data-tooltip-position="right center">
|
||||
{{#link-to 'auth.logout'}}
|
||||
<i class="material-icons icon-tool">exit_to_app</i>
|
||||
{{/link-to}}
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
{{/link-to}}
|
||||
</li>
|
||||
{{else}}
|
||||
<li>
|
||||
<li id="workspace-login" data-tooltip="Login" data-tooltip-position="right center">
|
||||
{{#link-to 'auth.login'}}
|
||||
<i class="material-icons icon-tool">lock_open</i>
|
||||
{{/link-to}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue