Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-28 01:29:43 +02:00
Code Releases Activity

tooltips

Browse source
This commit is contained in:
Harvey Kandola 2016-11-05 16:02:35 -07:00
parent c4dfa42087
commit 9259bf0c99
5 changed files with 254 additions and 205 deletions
Download patch file Download diff file Expand all files Collapse all files

14
app/app/components/layout/zone-navigation.js
View file

@ -11,12 +11,13 @@
import Ember from 'ember'; import Ember from 'ember';
import netUtil from '../../utils/net'; import netUtil from '../../utils/net';
import TooltipMixin from '../../mixins/tooltip';
const { const {
inject: { service } inject: { service }
} = Ember; } = Ember;
export default Ember.Component.extend({ export default Ember.Component.extend(TooltipMixin, {
folderService: service('folder'), folderService: service('folder'),
folder: null, folder: null,
appMeta: service(), appMeta: service(),
@ -51,6 +52,17 @@ export default Ember.Component.extend({
this.set('view.search', (route === 'search') ? true : false); 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: { actions: {
switchAccount(domain) { switchAccount(domain) {
this.audit.record('switched-account'); this.audit.record('switched-account');

47
app/app/components/search/search-results.js
View file

@ -12,44 +12,43 @@
import Ember from 'ember'; import Ember from 'ember';
export default Ember.Component.extend({ export default Ember.Component.extend({
results: [], results: [],
resultPhrase: "", resultPhrase: "",
didReceiveAttrs() { didReceiveAttrs() {
let results = this.get('results'); let results = this.get('results');
let temp = _.groupBy(results, 'documentId'); let temp = _.groupBy(results, 'documentId');
let documents = []; let documents = [];
_.each(temp, function(document) { _.each(temp, function (document) {
let refs = []; let refs = [];
if (document.length > 1) { if (document.length > 1) {
refs = document.slice(1); refs = document.slice(1);
} }
_.each(refs, function(ref, index) { _.each(refs, function (ref, index) {
ref.comma = index === refs.length-1 ? "" : ", "; ref.comma = index === refs.length - 1 ? "" : ", ";
}); });
let hasRefs = refs.length > 0; let hasRefs = refs.length > 0;
documents.pushObject( { documents.pushObject({
doc: document[0], doc: document[0],
ref: refs, ref: refs,
hasReferences: hasRefs hasReferences: hasRefs
}); });
}); });
let phrase = 'Nothing found'; let phrase = 'Nothing found';
if (results.length > 0) { if (results.length > 0) {
let references = results.length === 1 ? "reference" : "references"; let references = results.length === 1 ? "reference" : "references";
let i = results.length; let i = results.length;
let j = documents.length; phrase = `${i} ${references}`;
phrase = `${i} ${references}`; }
}
this.set('resultPhrase', phrase); this.set('resultPhrase', phrase);
this.set('documents', documents); this.set('documents', documents);
} }
}); });

37
app/app/styles/widget/widget-notification.scss
View file

@ -1,24 +1,25 @@
.user-notification { .user-notification {
position: fixed; position: fixed;
display: none; display: none;
top: 20px; top: 20px;
right: 20px; right: 20px;
background-color: $color-toast; background-color: $color-toast;
color: $color-white; color: $color-white;
padding: 10px 15px; padding: 10px 15px;
text-align: left; text-align: left;
border-radius: 2px; border-radius: 2px;
@extend .z-depth-1; @extend .z-depth-1;
z-index: 999;
> .message { > .message {
margin: 3px 0; margin: 3px 0;
padding: 0; padding: 0;
font-size: 0.9em; font-size: 0.9em;
} }
} }
.busy-indicator { .busy-indicator {
height: 30px; height: 30px;
width: 30px; width: 30px;
margin: 0 10px; margin: 0 10px;
} }

355
app/app/styles/widget/widget-tooltip.scss
View file

@ -2,163 +2,200 @@
.tooltip-element { .tooltip-element {
z-index: 999; z-index: 999;
box-sizing: border-box; box-sizing: border-box;
&:after, &:before {
box-sizing: border-box; &:after,
} &:before {
* { box-sizing: border-box;
box-sizing: border-box; }
&:after, &:before {
box-sizing: border-box; * {
} box-sizing: border-box;
}
position: absolute; &:after,
display: none; &:before {
&.tooltip-open { box-sizing: border-box;
display: block; }
} }
&.tooltip-theme-arrows { position: absolute;
max-width: 100%; display: none;
max-height: 100%;
.tooltip-content { &.tooltip-open {
border-radius: 2px; display: block;
position: relative; }
font-family: inherit;
background: $color-tooltip; &.tooltip-theme-arrows {
color: $color-white; z-index: 999;
padding: 0.5em; max-width: 100%;
font-size: 0.8em; max-height: 100%;
line-height: 1.1em;
&:before { .tooltip-content {
content: ""; border-radius: 2px;
display: block; position: relative;
position: absolute; font-family: inherit;
width: 0; background: $color-tooltip;
height: 0; color: $color-white;
border-color: transparent; padding: 0.5em;
border-width: 8px; font-size: 0.8em;
border-style: solid; line-height: 1.1em;
}
} &:before {
&.tooltip-element-attached-bottom.tooltip-element-attached-center .tooltip-content { content: "";
margin-bottom: 8px; display: block;
&:before { position: absolute;
top: 100%; width: 0;
left: 50%; height: 0;
margin-left: -8px; border-color: transparent;
border-top-color: $color-tooltip; border-width: 8px;
} border-style: solid;
} }
&.tooltip-element-attached-top.tooltip-element-attached-center .tooltip-content { }
margin-top: 8px;
&:before { &.tooltip-element-attached-bottom.tooltip-element-attached-center .tooltip-content {
bottom: 100%; margin-bottom: 8px;
left: 50%;
margin-left: -8px; &:before {
border-bottom-color: $color-tooltip; top: 100%;
} left: 50%;
} margin-left: -8px;
&.tooltip-element-attached-right.tooltip-element-attached-middle .tooltip-content { border-top-color: $color-tooltip;
margin-right: 8px; }
&:before { }
left: 100%;
top: 50%; &.tooltip-element-attached-top.tooltip-element-attached-center .tooltip-content {
margin-top: -8px; margin-top: 8px;
border-left-color: $color-tooltip;
} &:before {
} bottom: 100%;
&.tooltip-element-attached-left.tooltip-element-attached-middle .tooltip-content { left: 50%;
margin-left: 8px; margin-left: -8px;
&:before { border-bottom-color: $color-tooltip;
right: 100%; }
top: 50%; }
margin-top: -8px;
border-right-color: $color-tooltip; &.tooltip-element-attached-right.tooltip-element-attached-middle .tooltip-content {
} margin-right: 8px;
}
&.tooltip-element-attached-top { &:before {
&.tooltip-element-attached-left.tooltip-target-attached-bottom .tooltip-content { left: 100%;
margin-top: 8px; top: 50%;
&:before { margin-top: -8px;
bottom: 100%; border-left-color: $color-tooltip;
left: 8px; }
border-bottom-color: $color-tooltip; }
}
} &.tooltip-element-attached-left.tooltip-element-attached-middle .tooltip-content {
&.tooltip-element-attached-right.tooltip-target-attached-bottom .tooltip-content { margin-left: 8px;
margin-top: 8px;
&:before { &:before {
bottom: 100%; right: 100%;
right: 8px; top: 50%;
border-bottom-color: $color-tooltip; margin-top: -8px;
} border-right-color: $color-tooltip;
} }
} }
&.tooltip-element-attached-bottom {
&.tooltip-element-attached-left.tooltip-target-attached-top .tooltip-content { &.tooltip-element-attached-top {
margin-bottom: 8px; &.tooltip-element-attached-left.tooltip-target-attached-bottom .tooltip-content {
&:before { margin-top: 8px;
top: 100%;
left: 8px; &:before {
border-top-color: $color-tooltip; bottom: 100%;
} left: 8px;
} border-bottom-color: $color-tooltip;
&.tooltip-element-attached-right.tooltip-target-attached-top .tooltip-content { }
margin-bottom: 8px; }
&:before {
top: 100%; &.tooltip-element-attached-right.tooltip-target-attached-bottom .tooltip-content {
right: 8px; margin-top: 8px;
border-top-color: $color-tooltip;
} &:before {
} bottom: 100%;
} right: 8px;
&.tooltip-element-attached-top { border-bottom-color: $color-tooltip;
&.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content { }
margin-right: 8px; }
&:before { }
top: 8px;
left: 100%; &.tooltip-element-attached-bottom {
border-left-color: $color-tooltip; &.tooltip-element-attached-left.tooltip-target-attached-top .tooltip-content {
} margin-bottom: 8px;
}
&.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content { &:before {
margin-left: 8px; top: 100%;
&:before { left: 8px;
top: 8px; border-top-color: $color-tooltip;
right: 100%; }
border-right-color: $color-tooltip; }
}
} &.tooltip-element-attached-right.tooltip-target-attached-top .tooltip-content {
} margin-bottom: 8px;
&.tooltip-element-attached-bottom {
&.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content { &:before {
margin-right: 8px; top: 100%;
&:before { right: 8px;
bottom: 8px; border-top-color: $color-tooltip;
left: 100%; }
border-left-color: $color-tooltip; }
} }
}
&.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content { &.tooltip-element-attached-top {
margin-left: 8px; &.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
&:before { margin-right: 8px;
bottom: 8px;
right: 100%; &:before {
border-right-color: $color-tooltip; top: 8px;
} left: 100%;
} border-left-color: $color-tooltip;
} }
pointer-events: none; }
.tooltip-content {
padding: 0.5em 1em; &.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
} margin-left: 8px;
}
opacity: 0; &:before {
&.tooltip-open-transitionend { top: 8px;
display: block; right: 100%;
} border-right-color: $color-tooltip;
&.tooltip-after-open { }
transition: opacity 600ms 400ms; }
opacity: 1; }
}
&.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;
}
} }

6
app/app/templates/components/layout/zone-navigation.hbs
View file

@ -29,14 +29,14 @@
<ul class="bottom-zone"> <ul class="bottom-zone">
{{#if session.session.content.authenticated.user.admin}} {{#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'}} {{#link-to 'customize.general'}}
<i class="material-icons icon-tool">tune</i> <i class="material-icons icon-tool">tune</i>
{{/link-to}} {{/link-to}}
</li> </li>
{{/if}} {{/if}}
{{#if session.authenticated}} {{#if session.authenticated}}
<li> <li id="workspace-logout" data-tooltip="Logout" data-tooltip-position="right center">
{{#link-to 'auth.logout'}} {{#link-to 'auth.logout'}}
<i class="material-icons icon-tool">exit_to_app</i> <i class="material-icons icon-tool">exit_to_app</i>
{{/link-to}} {{/link-to}}
@ -49,7 +49,7 @@
{{/link-to}} {{/link-to}}
</li> </li>
{{else}} {{else}}
<li> <li id="workspace-login" data-tooltip="Login" data-tooltip-position="right center">
{{#link-to 'auth.login'}} {{#link-to 'auth.login'}}
<i class="material-icons icon-tool">lock_open</i> <i class="material-icons icon-tool">lock_open</i>
{{/link-to}} {{/link-to}}