Quickwin for category label

[stefan-niedermann]

The current category label does not perform well.
Until the sidebar is implemented, it would be a quickwin to display them a bit more beautiful.

Current implementation:

I made two changes to compare.

The first one is just a bit grey background and some more padding, might be better when many notes are in category because it does not distract that much from the more important content.

The second one is more "heavy" with a primary colored label

Please share your opinions.

Ah, and no, there won't be an option for that 😆

cc @korelstar @jancborchardt

PS.: I thought about moving the label to the right side, so all notes are aligned if the category label is long, short or not present

Below the changed code of fragment_notes_list_note_item.xml:

<ImageView
    android:id="@+id/noteDeleteLeft"
    android:layout_marginLeft="16dp"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:src="@drawable/ic_action_delete"
    android:layout_gravity="left"
    />

<ImageView
    android:id="@+id/noteDeleteRight"
    android:layout_marginRight="16dp"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:src="@drawable/ic_action_delete"
    android:layout_gravity="right"
    />

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/list_item_background_selector"
    android:id="@+id/noteSwipeable"
    >

    <TextView
        android:id="@+id/noteTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="70dp"
        android:layout_marginRight="70dp"
        android:ellipsize="marquee"
        android:maxLines="1"
        android:textColor="@drawable/list_item_color_selector"
        android:textSize="16sp" />


    <TextView
        android:id="@+id/noteCategory"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_below="@id/noteTitle"
        android:maxLines="1"
        android:background="@color/primary"
        android:padding="5dp"
        android:layout_marginTop="5dp"
        android:textColor="@color/fg_contrast"
        android:textSize="14sp"/>

    <TextView
        android:id="@+id/noteExcerpt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/noteCategory"
        android:layout_toEndOf="@id/noteCategory"
        android:layout_alignWithParentIfMissing="true"
        android:layout_below="@id/noteTitle"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:paddingTop="10dp"
        android:textColor="@drawable/list_item_color_selector_low"
        android:textSize="14sp" />

    <ImageView
        android:id="@+id/noteStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_sync_alert_grey600_18dp"
        android:layout_toEndOf="@id/noteTitle"
        android:layout_toRightOf="@id/noteTitle"
        android:layout_marginStart="-65dp"
        android:layout_marginLeft="-65dp"
        android:layout_alignBaseline="@id/noteTitle"
        android:baseline="14dp"
        />

    <ImageView
        android:id="@+id/noteFavorite"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:layout_marginEnd="6dp"
        android:layout_marginRight="6dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignBaseline="@id/noteTitle"
        android:baseline="29dp"
         />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_below="@id/noteExcerpt"
        android:layout_marginTop="16dp"
        android:src="@color/separator" />
</RelativeLayout>

[korelstar]

Colors enrich life, so I like the second variant. However, the buttons in material design look very similar. So I'm not sure if this would be a good idea.

Which colors do you use for the first variant? I try to test it in a real scenario with real categorized notes.

If you decide to commit one of these ideas, here are some remarks for the implementation:

• Your current proposal increases the height of a note. I would try to bound this, e.g. by using a smaller top-margin (e.g. 2dp) and a smaller vertical padding (e.g. none) for @id/noteCategory
• For the <TextView android:id="@+id/noteExcerpt"> use android:layout_alignBaseline="@id/noteCategory" instead of android:paddingTop="10dp".

[jancborchardt]

I would suggest a small layout modification to the list entries to make this work better:

• Move the star to the left, vertically centered (and yellow when starred, grey filled when not, as on the server)
• Move the category label to the right, same line as title. Because the title will almost always be shorter than the first line of content. ;)
• A colored but less intense option is to use a 1px Nextcloud-blue border for the tags.

Ideally coloring should be used to relate to a category so it can be used to distinguish them. :)

[stefan-niedermann]

A colored but less intense option is to use a 1px Nextcloud-blue border for the tags.

That's what i wanted to hear :)

I will open new issues for the other points you mentioned, because i do not want to add too much changes into the next version.