Skip to content
Permalink
Browse files

App can be collapsed (as an option) and remembers agent's preference

  • Loading branch information...
joelhellman committed Feb 7, 2016
1 parent 006fc6e commit 01aa368bb9f55395a8ff2bd7e72be7196aebeb0d
Showing with 129 additions and 6 deletions.
  1. +23 −0 app.css
  2. +84 −2 app.js
  3. +10 −0 manifest.json
  4. +4 −4 templates/layout.hdbs
  5. +8 −0 translations/en.json
23 app.css
@@ -3,6 +3,7 @@ $global-spacer: 1em;
$global-radius: 4px;

// Colors
$color-black: #000;
$color-red: #c63929;
$color-green: #63a62f;
$color-gray-bg: #f4f4f4;
@@ -12,6 +13,28 @@ $color-border-light: #d3d3d3;
$color-border-dark: #ddd;
$color-border-darker: #999;

// *************************************
// Collapsibility
// *************************************

.app-collapsed {
border-bottom: none;
margin-bottom: -20px;
}

.app-collapsible:hover {
color: $color-black;
cursor: pointer;
}

.section-collapsed {
display:none;
}

.footer-collapsed {
display:none;
}

// *************************************
// Main layout
// *************************************
86 app.js
@@ -8,12 +8,92 @@
return {

events: {
'app.created': 'appCreated',
'app.activated':'initializeApp',
'keydown .search-input':'addTags',
'click .availableTag':'addTags',
'click .removableTag':'removeTag',
'click .menu-toggle':'toggleMenu',
'ticket.tags.changed':'tagsChanged'
'ticket.tags.changed':'tagsChanged',
'click .app-collapsible': 'toggleCollapse'
},

toggleCollapse: function() {
// cannot be triggered unless app-collapsible class is present
if (this.collapsed()) {
this.expand();
} else {
this.collapse();
}
},

adjustCollapse: function() {
// if allowCollapse is true, app will always start collapsed
if (this.setting('allowCollapse') && this.preferredCollapseState() === 'expanded') {
this.expand();
}
},

preferredCollapseState: function() {
// return the last collapse mode as set by user or the default preference
var preferredState = 'expanded';
// unless if agent-collapse has been disallowed, then app will always be expanded
if (this.setting('allowCollapse')) {
if (this.store('expand') !== null) {
preferredState = this.store('expand') ? 'expanded' : 'collapsed';
} else {
// no preference found, fallback to app default preference as set by admin
preferredState = this.setting('collapseByDefault') ? 'collapsed' : 'expanded';
}
}
// returns 'expanded' or 'collapsed'
return preferredState;
},

collapsed: function() {
// we set visibility by class and therefore query by class
return this.getSection().hasClass('section-collapsed');
},

collapse: function() {
if (this.expanded()) {
this.getHeader().addClass('app-collapsed');
this.getSection().addClass('section-collapsed');
this.getFooter().addClass('footer-collapsed');
// app has been collapsed, save this as agent's preference
this.store('expand', false);
}
},

expanded: function() {
return !this.collapsed();
},

expand: function() {
if (this.collapsed()) {
this.getHeader().removeClass('app-collapsed');
this.getSection().removeClass('section-collapsed');
this.getFooter().removeClass('footer-collapsed');
// app has been expanded, save this as agent's preference
this.store('expand', true);
}
},

getHeader: function() {
return this.$('header');
},

getSection: function() {
return this.$('section');
},

getFooter: function() {
return this.$('footer');
},

appCreated: function() {
// adjust on creation only; navigating back should not change collapse state
this.adjustCollapse();
},

initializeApp: function(ticket) {
@@ -85,7 +165,9 @@
autoFocus: true,
source: availableTags
});
if(keepFocus) {

// re-focus search field, unless app is collapsed
if(keepFocus && this.expanded()) {
this.$('.search-input').focus();
}
},
@@ -24,6 +24,16 @@
"name": "hideNativeTags",
"type": "checkbox",
"required": false
},
{
"name": "allowCollapse",
"type": "checkbox",
"required": false
},
{
"name": "collapseByDefault",
"type": "checkbox",
"required": false
}
],
"defaultLocale": "en",
@@ -1,9 +1,9 @@
<header>
<header {{#if (setting 'allowCollapse') }}class="app-collapsible app-collapsed"{{/if}}>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<span class="logo"/>
<h3>{{setting "name"}}</h3>
</header>
<section data-main/>
<footer>
<section data-main {{#if (setting 'allowCollapse') }}class="section-collapsed"{{/if}}/>
<footer {{#if (setting 'allowCollapse') }}class="footer-collapsed"{{/if}}>
<span class="author">{{author.name}}</span>
</footer>
</footer>
@@ -18,6 +18,14 @@
"hideNativeTags": {
"label": "Hide native Zendesk tags field",
"helpText": "Hides the standard tag field from the left ticket sidebar when viewing a ticket."
},
"allowCollapse": {
"label": "Agent can minimize app",
"helpText": "Allow agent to minimize app by clicking the header, to save space."
},
"collapseByDefault": {
"label": "Minimize by default",
"helpText": "App starts out minimized for new agents and new sessions."
}
}
}

5 comments on commit 01aa368

@joelhellman

This comment has been minimized.

Copy link
Owner Author

replied Feb 7, 2016

Added an option so admin can decide if agents should be able to minimize the app, to save space. Agent toggles the collapse state by clicking the header.

image

The collapse works like in the Zendesk User Data app, i.e. if the agent collapses the app on a ticket A, app will be collapsed when agent navigates to a new ticket B; and if agent then expand the app in ticket B; ticket A will remain collapsed, but the app loading in the next ticket C will be expanded.

Also added an option so admin can disable collapsing the app; useful as a general rule if some apps are deemed important enought their contents should always be visible. If this option is checked, it will function as any regular non-collapsible app.

image

@Jamman

This comment has been minimized.

Copy link

replied Jul 31, 2017

Is this App v.1 Joel? Can we do the collapsible options in App v.2?

@joelhellman

This comment has been minimized.

Copy link
Owner Author

replied Aug 3, 2017

@Jamman

This comment has been minimized.

Copy link

replied Aug 3, 2017

@joelhellman

This comment has been minimized.

Copy link
Owner Author

replied Aug 4, 2017

Seems I was a bit optimistic here; its currently not possible to access the DOM for the header, so we cannot bind any click events to it to make it collapsible. The knowledge capture app is not open sourced and I'm believe Zendesk has used some magic only they can to make it collapsible.

The best way I would do it currently is to have the app run in two modes; a more minimized mode essentially equivalent to collapsed, but perhaps providing some functionality that fit on a tiny space, and a normal mode where all the app's space and functionality are available. And you'd put a button/link under the header that toggle the mode. Then at least the users would be able to save some space if they want to, and perhaps there are some important functionality the app can provide the user even in its minimized mode?

If you haven't already, I suggest you add your vote to this post: https://support.zendesk.com/hc/en-us/community/posts/115007214047-How-to-capture-CLICK-event-on-APP-header-in-V2-

Please sign in to comment.
You can’t perform that action at this time.