Re: [orion-dev] Styling a contributed page.link.category?

[Simon Kaegi <Simon_Kaegi@xxxxxxxxxx>]

Sorry, in my example I meant "imageDataURI"  not "imageClass"

Simon Kaegi---10/16/2014 09:20:22 AM---The image is also contributable as a data URI. Use "imageDataURI" instead of "imageClass".

From:	Simon Kaegi/Ottawa/IBM@IBMCA
To:	Orion developer discussions <orion-dev@xxxxxxxxxxx>,
Date:	10/16/2014 09:20 AM
Subject:	Re: [orion-dev] Styling a contributed page.link.category?
Sent by:	orion-dev-bounces@xxxxxxxxxxx

---

The image is also contributable as a data URI. Use "imageDataURI" instead of "imageClass". 

e.g.

provider.registerServiceProvider("orion.page.link.category", null, {
id: "flux",
name: "Flux",
nameKey: "Flux",
nls: "orion-plugin/nls/messages",
imageClass: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAAsTAAALEwEAmpwYAAACxklEQVR4nDXKzWsUZxwA4N/7/t6dne/Z2cnOZk03YxKIUfGz6KGISGk9lFZowZOI7UUPevPkX6D4D4joSQ+KICiIBz2liCcRemig8QPNpnGzM5n9mpmdnY/39VB6eU4PuXpmn6kplq7MuU5716wzO1tvzgPKaTqcjMJk0N/obPn9wWA0HCVZmqXMsfS6odqm5jbqLW/R8vbK7m5khlrEZRTmI1/W/lI7m3qojKJ4GI2Z13KaTt1puIbt2EtHNO+okC0qkNKSulxMY9RmZO3tzGA76P77ZRuZXTMXV/Y7CweV5jIzXV7Ry+l0p9dlEjMbLVGxdO+oqlnG5t9KRS4KzpSqpNdsddcerHtpEj+4c/3l00dZEgGVFrz5sxcuffv9GXSXVYK1PG0mEV785Zg9t6jOHyoKcePalWdPHofjSVyIJC+7vv/m1WpNk5YOHKeKgUglPqVW3VFrTcqUZw/v/7m6GqciK8qiKPM8z0rRnxQP7t4Kux1aqUqtvVZ7H7Wbc0prmTD24vmTOC9KXnDOOedlWXLOBS9Hk3j99SshELHK9AbVTBskEwT4vU4mAAQHACHE//JSiGDrMwBwoABAo/GwiHYAiFlroAAA8l8lhFBKCa3IFaI3bQFcFOm4t06TcR/SoCTkxKnTKmOUIqUUEZEhY6hI4NaMA8dPEgCSJ2ISUz5NedSn2eTX8394821GBAAXBBCqjJGaij/+/FvD2wOEiGlSJGP8/fRBRZEkVdPr7e9O/rDx8X2w3WUIhgpLrZmzFy7+dO4yRZnwMu+thVv/sDAITGuzqq4hUxtz3s3b9z69W9v4sG7o+srhI4rpUkKAA0+HSdAZ+T02iidhGMpKh0qKlMVYb+9e3r+wcpiAAAGEAAeAtJ/5Hwa9zV7XZ8Egqso7KGA6HStBx3C+ka0WkS2BSAgBDhSlrP9xst0Z+t3eTv8rg+RMcVRIrQYAAAAASUVORK5CYII=",
order: 5
});

Kris De Volder ---10/15/2014 09:18:50 PM---Okay, so copying the images.css didn't actually work the way I expected. Worked fine in 'development

From:	Kris De Volder <kdevolder@xxxxxxxxxx>
To:	orion-dev <orion-dev@xxxxxxxxxxx>,
Date:	10/15/2014 09:18 PM
Subject:	Re: [orion-dev] Styling a contributed page.link.category?
Sent by:	orion-dev-bounces@xxxxxxxxxxx

---

Okay, so copying the images.css didn't actually work the way I expected. Worked fine in 'development' mode but in deployed mode the 'optimized' orion munges all the css into one big file per page.
So it didn't actually load images.css file anymore.

I came up with an even hackier solution. This js code added to the flux plugin:

    function addCss(cssText) {
        var document = window.top.document;
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = cssText;
        document.head.appendChild(css);
    }
        
    addCss(".flux-sprite {\n"+
        "    background: url('/images/cloud_icon_16.png') 12px;\n"+
        "    background-repeat: no-repeat;\n"+
        "    width:16px;height:16px;\n" +
        "}\n"
    );

That actually works! But... Yuck! There's got to be a better way. No?

Kris

PS: This works for us but I think only because the flux plugin and our 'orion-node' are served on the same domain. It probably doesn't work if plugin is hosted on a separate domain.

On Wed, Oct 15, 2014 at 1:15 PM, Kris De Volder <kdevolder@xxxxxxxxxx> wrote:

I'm using the extension points:
  - "orion.page.link.category"
  - "orion.page.link"

To add a page link category and link.

This works, but what I can't figure out is if/how I can also add some css to orion pages to actually style the button for the newly defined category.

This is what I got now:

 
provider.registerServiceProvider("orion.page.link.category", null, {
id: "flux",
name: "Flux",
nameKey: "Flux",
nls: "orion-plugin/nls/messages",
imageClass: "core-sprite-sites",
order: 5
});
provider.registerServiceProvider("orion.page.link", null, {
id: "flux.deployer",
name: "CF Deployer",
category: "flux",
order: 10,
uriTemplate: "https://flux-cf-deployer.cfapps.io"
});

You can see that I have used 'core-sprites-sites' so it shows a little 'globe' icon for this category.

What I would like to do instead is use "flux-sprite" for imageClass. But then I also need to be able to
somehow add some css to the page that defines how to style the "flux-sprite" class.

Is this possible? If yes, how?

Kris

PS: I'm doing this in the flux orion-node server, in this context, since we are running our own server, I could just copy the css from orion.client code base and modify it to add my 'flux-sprite' class to "images.css" but this doesn't feel like the right solution (and wouldn't be an option if I created a 'standalone' plugin to be added to the orion instance running on orionhub.

_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/orion-dev
_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/orion-dev