Munki 2 client customization showcase

[Dan Keller]

I'm looking for some inspiration on customizing the client resources for Munki 2. Anyone want to share their setup? Screenshots, code? So far, I have only done a custom banner and a few small changes on the footer. Still deciding how best to do the sidebar.

[Gregory Neagle]

Dan - thanks for sharing! I would also like to see what others are doing.

-Greg

On Sep 25, 2014, at 10:26 AM, Dan Keller <d...@dankeller.org> wrote:

I'm looking for some inspiration on customizing the client resources for Munki 2. Anyone want to share their setup? Screenshots, code? So far, I have only done a custom banner and a few small changes on the footer. Still deciding how best to do the sidebar.

--
You received this message because you are subscribed to the Google Groups "munki-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to munki-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[David Iwanicki]

Here are some of my banners:

[Erik]

For now, I'll post some of my general stuff. Some of my banners have URLs so users can submit tickets into our (new/terrible) system.

On the sidebar, we have links to internal locations that are campus specific as well as quick access to webmail and our sick day system. I've tried to include links that our user's have difficulty remembering.

[Bart Reardon]

I created a template in pixelmator with a background and logo. I change the text to suit whatever the banner will be linking to. Most of these links are in the sidebar as well.

I also have plans for advertising new software as it's added using a custom banner if it's special enough. We have an internal software portal that once complete with integrate with munki so our users will be able to purchase (internally) licensed software and munki picks that up and does the install.

I've also integrated a Jira feedback form so when they click the feedback link it appears within MSC. Users fill in feedback or suggestions and it creates a jira ticket for me.

Bart

[Gregory Neagle]

Here's one of mine I like:

-Greg

--
You received this message because you are subscribed to the Google Groups "munki-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to munki-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

<branding2.png><branding-daisy.png><branding1.png><Screen Shot 2014-09-26 at 11.27.56 am.png>

[Gregory Neagle]

On Sep 25, 2014, at 6:38 PM, Bart Reardon <bart.r...@gmail.com> wrote:

I've also integrated a Jira feedback form so when they click the feedback link it appears within MSC. Users fill in feedback or suggestions and it creates a jira ticket for me.

Very interested in how you did this...

-Greg

[Craig Lindsey]

So am I

— Craig

[Andrew Rose]

If you use an issue collector, it is easy enough. Since no part of my org's Jira is anonymously-accessible (we are OnDemand, so it isn't behind a firewall...), I link to 

https://MYORG.atlassian.net/secure/CreateIssueDetails!init.jspa?pid=10180&issuetype=20&priority=9&summary=I%20need%20help%20with&components=10911

with a target="_blank" so that it is likely to pop up in an external browser that they have signed in to our Atlassian account with. The querystring stuff can be a little tricky to find the correct ID's for, but I think it is worth it, to avoid having to use the email handler.

As we can see, I am not particularly gifted with image manipulation, but it gets the point across.

[Gregory Neagle]

The part I'm interested in is not how to link to an external web page to submit issues/tickets, but rather how Bart did it so the form appeared as an overlay over the MSC interface:

This looks better and is a better UI than dumping them into their browser.

(I suspect there's a bunch of JavaScript added to the sidebar_template.html, since this looks very AJAX-y...)

-Greg

[Mike Solin]

I like the Fix-It Felix icon for submitting a bug report!  I might borrow that.

Here's what we're going to be rolling out soon.

Mike

--

mi...@mikesolin.com / @flammable

http://mikesolin.com

[Andrew Rose]

Unless I'm very much mistaken: https://confluence.atlassian.com/display/JIRA/Advanced+Use+of+the+JIRA+Issue+Collector#AdvancedUseoftheJIRAIssueCollector-Settingupacustomtrigger

And yes, it is definitely cleaner and cooler for getting direct MSC feedback

[Jeremiah Baker]

These are 2 that we might use. (Credit goes to David Iwanicki for that second one with the apps layout, I liked that look and made that one today.)

[Bart Reardon]

I'll post up my code.

It's bog standard jira so if you have that, it's not that hard. Th only thing that bugs me is if you aren't authenticated to jira the login box is below the display div and it's not immediately obvious there is a spot to put your name. That's an issue with the jira issue collector anyway.

[Bart Reardon]

correct.

It's all done in the sidebar_template.html

<script type="text/javascript" src="https://jira.csiro.au/s/en_US-hwf7hf-1988229788/6109/5/1.4.0-m3/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?collectorId=8ac7cb5d"></script>

<script type="text/javascript">window.ATL_JQ_PAGE_PROPS =  {

"triggerFunction": function(showCollectorDialog) {

//Requries that jQuery is available! 

jQuery("#issueCollector").click(function(e) {

e.preventDefault();

showCollectorDialog();

});

}};</script>

<div class="sidebar">

    <div class="chart titled-box quick-links">

        <h2>Quick Links</h2>

        <div class="content">

            <ol class="list">

                <li class="popup">

                    <div class="select links">

                        <label>

                            <span></span>

                            <select id="category-selector" onchange="category_select()">

                                ${category_items}

                            </select>

                        </label>

                    </div>

                </li>

                <li class="link"><a target="_blank" id="issueCollector">Feedback<a></li>

            </ol>

        </div>

    </div>

</div>

That should open the jira issue collector inside MSC. I just have the one for feedback.

[Bart Reardon]

Ha, forgot to mention. You need to create the collector first (should be obvious). Create is as a custom trigger and use the "embed in HTML" code it generates for you. Then just create a link with target="_blank" and id of whatever suits your fancy, as long as you use the same id in the trigger function.

personally I've found using "_blank" really useful. All my help pages and other informational stuff is viewable right in MSC which ties the whole experience together and my test users are loving it. My banners open in a separate browser but that's just a design rule I've decided will be a thing for me. 

[Dan Keller]

This is so cool. I really like the popup (overlay?) in MSC for feedback. Thanks for sharing Bart! And I love the Felix icon, too. Just too cool...

WALL·E would be great for some sort of disk cleanup script.

[zack.m...@bsd7.org]

A little late to the party, but our first basic setup. Just don't have the time currently to dump into customizing more. Planning to add a Google Form for feedback in a popup, possibly for our tech ticket site as well, later.

[Gregory Neagle]

I like the logo in the sidebar!

-Greg

On Oct 2, 2014, at 9:21 AM, zack.m...@bsd7.org wrote:

A little late to the party, but our first basic setup. Just don't have the time currently to dump into customizing more. Planning to add a Google Form for feedback in a popup, possibly for our tech ticket site as well, later.

[zack.m...@bsd7.org]

Thanks Greg. I wrapped it in a div to help with alignment, and if needed later to add other information or changes. Normally our logo is too tiny to see the blue, and it comes out black. Thanks for the wonderful documentation on the Github Wiki! Once again, thanks for the greatest thing for OS X since OS X! 

[Graham Pugh]

Rough-and-ready banners with some British spelling :)

The customisations available on the banners, sidebar and footer are extremely helpful - thanks Greg (and anyone else involved) for this and all the other excellent features of Munki.

Cheers,

Graham

[MiqViq]

Looks good.

Just a couple of small details to consider:

On the first banner, I recommend that you make the partial gray (grey?) logo a little lighter so it will not disturb the red logo and "University of BRISTOL".

On both banners you could also smooth the jagged edges of those partial logos as all other elements are nicely smoothed.

(I seem to have a keen eye for small details in graphic design...)

Attached is a sketch for our own banner #1.

I put some shadows under all elements and used a light grey colored font, it seems to be more soothing with less contrast.

Not sure if I can use our company logo embedded in text, we have quite strict policies when using it in "publications".

- MiqViq

-- 
You received this message because you are subscribed to the Google Groups "munki-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to munki-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

<Screen Shot 2014-10-05 at 23.02.29.png><Screen Shot 2014-10-05 at 23.02.39.png>

[Graham]

Thanks MiqVig, good advice.

I've now figured out how to do edge smoothing using GIMP, which has made things look better!

(I'm sure everyone here knows how to do that, but if not, this 10 second video explained all I needed to know: https://www.youtube.com/watch?v=2c6M5c9kuB4)

Cheers,

Graham

--
You received this message because you are subscribed to a topic in the Google Groups "munki-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/munki-dev/PwvrYaqKxGc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to munki-dev+...@googlegroups.com.

[zack.m...@bsd7.org]

You could also vectorize it with Inkscape, scale to whatever size you need (maybe in the future) and thus never have this issue again.

[Bart Reardon]

I've been doing some CSS modification with an aim of keeping it all within what is officially supported (i.e. no custom builds and no changing templates outside the three officially supported ones)

Most changes in footer_template.html as this is included on all views.

Here's my footer_template.html

<div class="bottom-links">

    <ul class="list" role="presentation">

        <li><a href="category-all.html">${SoftwareLabel}</a></li>

        <li><a href="categories.html">${CategoriesLabel}</a></li>

        <li><a href="updates.html">${UpdatesLabel}</a></li>

    </ul>

</div>

<style>

html, body {

    -webkit-background-size: auto;

    background-repeat: repeat-x;

    background-color: #f5f6f7;

    background: -webkit-linear-gradient(top, #d5d6d7 0%, #f5f6f7 40%, #f5f6f7 100%);

    background-attachment: fixed;

}

div.msc-button-inner.not-installed:not(.large) {

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#53a82f), color-stop(100%,#7ad85d));

}

div.msc-button-inner.not-installed:hover {

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#438e1d), color-stop(100%,#53a82f));

}

#imgSlider {

    display: block;

    max-height:515px; 

    max-width:750px; 

    white-space: nowrap; 

    overflow-x: scroll; 

    overflow-y: hidden; 

    padding:20px; 

    padding-bottom: 20px;

}

#productImageSmall {

    padding: 5px;

    vertical-align:middle;

    height:300px;

}

#productImageLarge {

    padding: 5px;

    vertical-align:middle;

    height:700px;

}

#dimmer {

    background:#000;

    opacity:0.5;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    display:none;

    z-index:99; 

}

#imgDisplay {

    width:100%;

    height:100%; 

    position: fixed;

    top:100px;

    bottom:0;

    left: 0;

    right: 0;

    display:none;

    text-align: center;

    z-index:100;

}

</style>

<div id="dimmer"></div>

<div id="imgDisplay" onclick="dim(false);"></div>

<script>

function dim(bool,img)

{

    if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()

    document.getElementById('dimmer').style.display=(bool?'block':'none');

    document.getElementById('imgDisplay').style.display=(bool?'block':'none');

    document.getElementById('imgDisplay').innerHTML = '<img id="productImageLarge" src="'+img.src+'">';

} 

</script>

The first adds a slight gradient to the background. The next two override the settings in base.css to make the install buttons a shade of green (normal and hover - personal preference). 

#imgSlider, #productImageSmall etc, the folowing two div's and small bit of JS are designed to work in item detail views. In my product description I might want to display more than one screenshot but this gets a bit ugly. For a simple image slider though I can use the following in the pkg description:

<span id="imgSlider">

<img src="http://foo.org/munki_repo/images/bar1.png" id="productImageSmall" onclick="dim(true,this);">

<img src="http://foo.org/munki_repo/images/bar2.png" id="productImageSmall" onclick="dim(true,this);">
<img src="http://foo.org/munki_repo/images/bar3.png" id="productImageSmall" onclick="dim(true,this);">
<img src="http://foo.org/munki_repo/images/bar4.png" id="productImageSmall" onclick="dim(true,this);">

</span>

And all the images appear in a single scrollable line instead of all together on the page and clicking them dims the page and displays a larger image (clicking the larger image makes it go away)

This is pretty simple as far as image sliders go. Since it's CSS and JS I'm sure there are more elaborate ones that could be made.

Bart

[Bart Reardon]

replying to myself, but I cleaned up the CSS a bit.

code and example here https://github.com/bartreardon/munki_client_resources/tree/master/site_default/templates