Run Ginkgo from your Mac toolbar or desktop with Fluid.app


#1

Like many, I wanted to run Ginkgo as a desktop app on my Mac, so I was excited to download the new desktop version. I was hoping the desktop version would look and work like the Web version and would sync with it automatically. Alas, it is not yet there, and the differences between the desktop and Web version along with the lack of syncing made it a non-starter for me.

Then I remembered an app called “Fluid.app” that I’d downloaded a couple of years ago. It turns any Website into what looks and feels for all purposes (except local storage) like a desktop app.

You launch it from your desktop or Dock like any other app. It opens in its own window, so you can’t “lose” it among your dozens (or hundreds) of browser tabs. You can even pin it to your toolbar (with the Ginkgo favicon as its icon, if you like), making it instantly accessible as a popup, no matter what app you’re in. The popup disappears just as quickly when you click on another window or app.

Since it’s really just a dedicated browser window, every change you make is saved to the Ginkgo server, so you never have to worry about unsynced changes. You can run Ginkgo in your browser and as a Fluid app simultaneously with no problems. Any changes you make are instantly reflected in all instances of that tree. Add CSS to your Ginkgo tree in the toolbar popup, and see the changes instantly in your browser.

Here’s what the icon looks like in my toolbar (note Chrome’s indistinguishable tiny tabs below it):

And here’s what the popup looks like (I have extensively customized the appearance with CSS, so your trees will not look like mine). The window can be resized like any window:

I’m really enjoying using Ginkgo this way and thought others might enjoy it, too.

P.S. I am not affiliated in any way with Fluid or Ginkgo or its developers.


#2

Thank you for reminding me of Fluid. It hadn’t occurred to me to use it with Gingko, and like you, I had been unable to get the Mac desktop version to work well. I really like the look of your tree as well. Would you mind sharing your CSS? It would be fun to give it a go.

Thanks again.


#3

Sure, Michael, I’ve pasted it below. I’m sure it could be written more elegantly.

My primary purpose in tweaking the CSS was to allow me to instantly identify where I am in the app at any given time – that is, which card is active – and which other cards are part of that “thread.”

The various shades of gray of the native app were not distinct enough for me to instantly distinguish one thread from another, or identify which card my cursor was in. in addition, any images or documents displayed in the tree have their own background color – typically yet another shade of gray – and this further muddled the issue. My color choices may not be your cup of tea, but at least you definitely know where you are!

I also found it immensely helpful to visually separate children of one parent from children of another by adding top and bottom margins between “families”.

Other visual aids include:

  • Assigning a unique background color to each column for quick identification.
  • Using the “before” pseudo-property to label columns and identify their level within the tree. As a handy reminder, the label repeats at the top of each group of siblings. Of course, you’ll want to change the labels for your needs.
  • Assigning the same background color to all cards in the active thread, and making that color very distinct from the gray backgrounds of inactive threads.
  • Reducing the opacity of inactive cards to minimize distractions.
  • Rounding the corners and adding an inset shadow on each card, so that, without activating the thread, you can easily tell where one card ends and the next begins and understand how you’ve structured your content.
  • Changing the font properties and line-spacing of the “edit” mode to match (as closely as possible) the properties when displayed as HTML. The variation in properties between the two modes created an annoying visual jerkiness that made me lose my place whenever I entered “edit” mode. This change minimizes that effect.
  • Using background color rather than font-properties to distinguish “edit” from “non-edit” mode. The background in edit mode is a blinding yellow so there’s no chance of mistaking one mode for the other. Feel free to change it.

I’ll be interested to see any ideas you have for improving it.

For those unfamiliar with CSS, copy and paste the entire block of code below the line into any card in your tree. I’ve created a separate card at the top of my tree for this purpose. (Note: It is not necessary to include the “!important” when using it in this way, but it doesn’t hurt to leave it. I originally created the code in an extension that required it.)


<style>
.card {
	opacity:0.7 ;
	font-family: Helvetica Neue !important;
	color:rgb(80,80,80) !important;
	border-radius: 10px !important;
	box-shadow: inset -1px -1px 8px 2px #aaaaaa !important;
}

.card .view {
font-size:16px;
line-height:1.4em;
}

.cards {
	margin-top:10px !important;
	border-radius:10px !important;
	background-color:#d1d1d6 !important;
}	

.cards, card.card-parent {
	color: rgb(94, 92, 100) !important;

	
}

.handle {
border-radius: 10px 0 0 10px !important;	
}
		
.card-parent {
	background-color:rgba(253, 228, 179, 0.57) !important;
	color:rgb(80,80,80) !important;
}									

.card.card-active {    		
	opacity:1 !important;
	color:rgb(80,80,80) !important;
	background-color:rgba(253, 228, 179, 0.57) !important;
	border-radius: 0 10px 10px 0 !important;
	box-shadow: inset -4px 0px 12px 4px fuchsia !important;	
	 margin:0 -16px 0 -6px !important;
}

.cards.cards-active {
	background-color: rgb(239, 238, 233) !important;
}

.cards.card-active, .cards.cards-child .card  {		
	background: rgba(253, 228, 179, 0.97) !important;
}

.columns .column {
background-color:rgb(144, 164, 174);
}

div#c4 {
background-color:rgb(165, 197, 163);
}

div#c1 .cards:before, div#c2 .cards:before, div#c3 .cards:before, div#c4 .cards:before, div#c5 .cards:before, div#c6 .cards:before, div#c7 .cards:before {
font-size:30px;
color:#ababab;
opacity:0.8;
font-family:helvetica;

}
div#c1 .cards:before {
content:"L1: 25 words";
}

div#c2 .cards:before {
content:"L2: 200 words";
}

div#c3 .cards:before {
content:"L3: Major Periods";
}

div#c4 .cards:before {
content:"L4: Dates";
}

div#c5 .cards:before {
content:"L5: Events";
}

div#c6 .cards:before {
content:"L6: Notes";
}
div#c7 .cards:before {
content:"L7:";
}

div#c1 {
  background-color: rgb(197, 172, 163);
}

div#c2 {
  background-color: #73a8af;
}

div#c3 {
  background: #CE93D8;
}

code {
background-color:inherit !important;	
}

blockquote {
	border-left:2px solid rgb(179, 175, 175) !important;
	font-style:italic !important;
}

.card h1 {
  font-size: 30px;
  margin-bottom: 8px
}

.card h2 {
  font-size: 24px;
  margin-bottom: 6px;
font-weight:bold;
}

.card h3 {
  font-size: 20px;
  margin-bottom: 5px;
font-weight:bold;
}

.card h4 {
  font-size: 16px;
  margin-bottom: 4px;
font-weight:bold;
}

.card h5 {
  font-size: 12px;
  margin-bottom: 3px;
font-weight:bold;
}

.card h6 {
  font-size: 10px;
  margin-bottom: 0
}

.card .textareaClone, .card textarea {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size:15px !important;
line-height:1.2em !important;
font-kerning: auto !important;
font-stretch: normal !important;
background-color:yellow !important;
}

li {
margin-bottom:1em;
}
</style>

#4

Very impressive! The code addresses a number of organizational challenges I’ve been contemplating for some time. Thanks so much for sharing this.


#5

It occurs to me that we’ll need some way to suppress the column labels (added with the “before” pseudo-class) when exporting the tree content for any use other than re-importing into Ginkgo. Can anyone suggest an easy way to do that? Perhaps an option in the export dialog? @Adriano ?


#6

I tweaked Bunnyslippers’ CSS a bit, to fit my taste - maybe somebody else will like it as well. Thanks for providing the code!!

Copy all the text below the line:


    <style>
    body {
    background-image: none;
    background-color: rgb(197, 172, 163);
  }

  .navbar {
    background-color: #fff;
                        opacity: 0.4;
  }

.card {
	opacity:0.7 ;
	font-family: Avenir Next !important;
	color:rgb(80,80,80) !important;
	border-radius: 10px !important;
	box-shadow: inset -1px -1px 8px 2px #aaaaaa !important;
}

.card .view {
font-size:16px;
line-height:1.4em;
}

.cards {
	margin-top:10px !important;
	border-radius:10px !important;
	background-color:#d1d1d6 !important;
}	

.cards, card.card-parent {
	color: rgb(94, 92, 100) !important;

	
}

.handle {
border-radius: 10px 0 0 10px !important;	
}
		
.card-parent {
	background-color:rgba(253, 228, 179, 0.57) !important;
	color:rgb(80,80,80) !important;
}									

.card.card-active {    		
	opacity:1 !important;
	color: rgb(80,80,80) !important;
	background-color:rgba(253, 228, 179, 0.57) !important;
	border-radius: 0 10px 10px 0 !important;
	box-shadow: inset -4px 0px 12px 4px #997a8d !important;	
	 margin:0 -16px 0 -6px !important;
}

.cards.cards-active {
	background-color: rgb(239, 238, 233) !important;
}

.cards.card-active, .cards.cards-child .card  {		
	background: rgba(253, 228, 179, 0.97) !important;
}

.columns .column {
background-color:rgb(144, 164, 174);
}

div#c4 {
background-color:rgb(165, 197, 163);
}

div#c1 .cards:before, div#c2 .cards:before, div#c3 .cards:before, div#c4 .cards:before, div#c5 .cards:before, div#c6 .cards:before, div#c7 .cards:before {
font-size:30px;
color:#fff5ee /*#ababab*/;
opacity:0.8;
font-family:avenir;

}
/*div#c1 .cards:before {
content:"L1: 25 words";
}

div#c2 .cards:before {
content:"L2: 200 words";
}

div#c3 .cards:before {
content:"L3: Major Periods";
}

div#c4 .cards:before {
content:"L4: Dates";
}

div#c5 .cards:before {
content:"L5: Events";
}

div#c6 .cards:before {
content:"L6: Notes";
}
div#c7 .cards:before {
content:"L7:";
} */

div#c1 {
  background-color: #608573;
}

div#c2 {
  background-color: #7484a1;
}

div#c3 {
  background: #9b83b4;
}

div#c4 {
  background-color: #c19dc1	 ;
}

div#c5 {
  background-color: #cbcca1;
}

div#c6 {
  background-color: #608573;
}

div#c7 {
  background-color: #7484a1;
}

div#c8 {
  background-color: #9b83b4	 ;
}

div#c9 {
  background-color: #c19dc1	 ;
}

div#c10 {
  background-color: #cbcca1	 ;
}

div#c11 {
  background-color: #608573;
}

div#c12 {
  background-color: #7484a1;
}

div#c13 {
  background: #9b83b4;
}

div#c14 {
  background-color: #c19dc1	 ;
}

div#c15 {
  background-color: #cbcca1;
}

div#c16 {
  background-color: #608573;
}
code {
background-color:inherit !important;	
}

blockquote {
	border-left:2px solid rgb(179, 175, 175) !important;
	font-style:italic !important;
}

.card h1 {
  font-size: 30px;
  margin-bottom: 8px
}

.card h2 {
  font-size: 24px;
  margin-bottom: 6px;
font-weight:bold;
}

.card h3 {
  font-size: 20px;
  margin-bottom: 5px;
font-weight:bold;
}

.card h4 {
  font-size: 16px;
  margin-bottom: 4px;
font-weight:bold;
}

.card h5 {
  font-size: 12px;
  margin-bottom: 3px;
font-weight:bold;
}

.card h6 {
  font-size: 10px;
  margin-bottom: 0
}

.card .textareaClone, .card textarea {
font-family: Avenir Next, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size:15px !important;
line-height:1.2em !important;
font-kerning: auto !important;
font-stretch: normal !important;
background-color:#fff5ee;
}

li {
margin-bottom:1em;
}
  .fullscreen-overlay {
    background: #927f79	 ;
    color: #fefefb;
  }

  .fullscreen-overlay textarea:focus, .fullscreen-overlay textarea:hover {
    background: #927f79	 ;
    color: #fefefb;
  }
  .fullscreen-overlay {
    background: #927f79	 ;
    color: #fefefb;
  }

  .fullscreen-overlay textarea:focus, .fullscreen-overlay textarea:hover {
    background: #927f79	 ;
    color: #fefefb;
  }
</style>