Question on a style problem

TaskPaper
1

I notice that I cannot change the handle border color using styles. I think that it might have something to do with me or Less, but I cannot get it figured out.

I have this,

//  Outline handle colors when expanded
item {
    handle-color: @expanded-handle-color;
    handle-border-color: white;
}

But it is not changing the handle border color. It is showing me a red, that I don’t think I have in my stylesheet. Any ideas @jessegrosjean?

2

This is because more specific rules override general rules (this is a CSS thing). As of TaskPaper 3.5 Preview 260 the default handle rules look like this:

item {
  handle-size: @handle-size;
  handle-border-width: floor(1 * @ui-scale);
}

item[expanded] {
    handle-border-color: @handle-secondary-color;
}

item[collapsed] {
  handle-color: @handle-color;
  handle-border-color: none;
}

item[filtered] {
  handle-color: @handle-secondary-color;
  handle-border-color: none;
}

item[mouseOverHandle] {
  handle-size: @handle-size + (3 * @ui-scale);
}

item[mouseOverHandle][leaf] {
  handle-border-color: @handle-secondary-color;
}

You are overriding the general item rule, but other rules (such as item[collapsed]) are more specific, so they will take precedence when and item matches them. To fix you’ll need to override those as well… except…

In the latest release I also added two new variables that might make things easier. @handle-color and @handle-secondary-color. You might be able to do what you want more easily (without needing to override a bunch of rules) by just giving those variables different values. (will only work in latest 3.5 preview though)

3

Thank you,

I have two questions.

These are all the different type of items properties I have. Am I missing something?
In the same question I would to know if they are on the right order (so that one doesn’t override the other one).

// Default item properties
item {
}

//  Outline handle colors when expanded
item[expanded] {
}

// Outline handle colors when collapse
item[collapsed] {
}

//  Outline handle colors when ?
item[filtered] {
}

// When mouse is over handle
item[mouseOverHandle] {
}

// When mouse is over handle leaf
item[mouseOverHandle][leaf] {
}

//  No children underneath
item[leaf] {
}
//  Empty line
item[empty] {
}

Are these all the properties that apply to those rules and do all of them work in all of those rules?

handle-size: @handle-size;
handle-border-width: floor(1 * @ui-scale);
handle-color: white;
handle-border-color: white;

Thank you in advance :slight_smile:

4

I think the system is a little more flexible then your understanding of it. When items are presented they are given a bunch of attributes that you can base your styles on. Some examples are expanded, leaf, data-type, data-yourcustomtagname, etc.

You can select items based on those attributes using CSS Attribute Selector syntax. Note the names in the examples that you find on the web likely won’t work in TaskPaper because it’s using same CSS syntax, but different DOM Element and Attribute names.

When an item matches then you can apply any item styling attribute value that you want. You are not listed to “handle” attributes when selecting based on expanded for example. So you could do this if you wanted:

item[collapsed] {
  > run[content] {
    text-strikethrough: NSUnderlineStyleSingle;
    text-strikethrough-color: @text-color;
  }
}

That is strike through an items text when it is collapsed.

Items are considered filterer when:

  1. They have children
  2. Some children are showing
  3. Not all children are showing

It’s an indicator that you aren’t seeing all of the children even though you are seeing some of them. Generally it happens when you filter your view. Though it can also happen when you indent an item under an item that was perviously collapsed.

I’ve also added a more general “mouseOver” attribute that’s set anytime the mouse is over the item at all, not just the handle. For example:

item[mouseOver] {
  color: green;
}

Note that this isn’t really a new attribute, it’s just a combination of existing. You can do lots of other combinations if you like. For example:

// Colors project items that are collapsed and have mouseOver them red.
item[data-type=project][mouseOver][expanded] {
  color: red;
}
5

Thanks. I had a general idea of what you mentioned, but your post cleared up a lot of things. What I wanted to know was a complete list of the attributes. I know that you might not want to release them now since a lot of things are up in limbo, but I wanted to start playing and testing some of them

I didn’t know that you could combine those attributes and get all specific. That opens a plethora of possibilities.

I also didn’t know which other properties (or whatever they are called in LESS) I could use with item. For some reason I thought that some properties didn’t work on some attributes. Just wanted to know the combination.

For example, I am not sure if text-strikethrough works everywhere or only in the content. Yes, I could test it, and I would probably do it soon, but if you had a list available, it would save me a lot of permutations and trial and errors. Now, if my assumptions are incorrect and all the properties work on all the attributes, that is awesome.

Again, thank you for all the time you put in your program. I keep thinking about buying more copies of your program just because it is so awesome. I am going to do it and give the program away to friends who have Macs :slight_smile: