Skip to content

Consistent text rendering for different pattern types and exposure of the background color to style sheets #3704

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
michaelgregorius merged 4 commits into from
Jul 20, 2017
+58 −62
Merged

Consistent text rendering for different pattern types and exposure of the background color to style sheets #3704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8ad5232
Make text rendering consistent for TrackContentObjectViews
michaelgregorius Jul 16, 2017
0277c8a
Expose the background color of the text labels in the style sheet
michaelgregorius Jul 16, 2017
ad827da
Handle cases where elided text becomes empty or "..."
michaelgregorius Jul 18, 2017
e21db01
Add back the rendering of text shadows for pattern labels
michaelgregorius Jul 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion data/themes/classic/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -613,15 +613,17 @@ TrackContentObjectView {
qproperty-selectedColor: rgb( 0, 125, 255 );
qproperty-BBPatternBackground: rgb( 80, 80, 80 );
qproperty-textColor: rgb( 255, 255, 255 );
qproperty-textBackgroundColor: rgba(0, 0, 0, 75);
qproperty-textShadowColor: rgb( 0, 0, 0 );
qproperty-gradient: true; /* boolean property, set true to have a gradient */

font-size: 11px;
}

/* instrument pattern */
PatternView {
background-color: rgb( 119, 199, 216 );
color: rgb( 187, 227, 236 );
font-size: 11px;
}

/* sample track pattern */
Expand Down
4 changes: 3 additions & 1 deletion data/themes/default/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -620,15 +620,17 @@ TrackContentObjectView {
qproperty-selectedColor: #006B65;
qproperty-BBPatternBackground: #373d48;
qproperty-textColor: #fff;
qproperty-textBackgroundColor: rgba(0, 0, 0, 75);
qproperty-textShadowColor: rgb(0,0,0,200);
Copy link
Member

@Umcaruje Umcaruje Jul 18, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we actually have a shaded background, is there even a need for a shadow for the text?

Copy link
Member

@tresf tresf Jul 18, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that we actually have a shaded background, is there even a need for a shadow for the text?

Should be tested with custom colors.

image

Copy link
Contributor Author

@michaelgregorius michaelgregorius Jul 18, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tresf The CSS now gives great flexibility with regards to the colors. So if the user decided to make the patterns white it would be wise to take a different color for the text background or the text color itself. I also don't think that the current text shadow implementation works well with HDPI displays in some of the examples above because it would only give a line that is one pixel wide.

@Umcaruje If we decide to drop the text shadows then I guess we could also remove the qproperty-textShadowColor property.

Copy link
Member

@tresf tresf Jul 18, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tresf The CSS now gives great flexibility with regards to the colors. So if the user decided to make the patterns white it would be wise to take a different color for the text background or the text color itself

I'm talking about testing the built-in functionality. This has nothing to do with custom themes or custom CSS, this has to do with testing this feature against the color capabilities of our BB patterns. (as depicted above).

Copy link
Contributor Author

@michaelgregorius michaelgregorius Jul 18, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tresf Ah, ok. It looks like this:

3704-colored-bb-patterns

Copy link
Member

@tresf tresf Jul 18, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@michaelgregorius that looks fantabulous.

Copy link
Member

@Umcaruje Umcaruje Jul 18, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I still kinda like it with the shadow now that I look at it, makes it more readable imo

Copy link
Contributor Author

@michaelgregorius michaelgregorius Jul 18, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Umcaruje Commit 8228936 adds the ability to render shadows back. The rationale is that if a design does not want to use shadows it can just set the property qproperty-textShadowColor to something completely transparent. That way we are more flexible.

Copy link
Contributor Author

@michaelgregorius michaelgregorius Jul 18, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With shadows:

3704-colored-bb-patterns-shadowed

For my taste it looks cleaner without the shadow. It might also make sense to investigate whether it would make sense to use QGraphicsDropShadowEffect to render the shadow. But that would be something for another pull request.

qproperty-gradient: false; /* boolean property, set true to have a gradient */

font-size: 11px;
}

/* instrument pattern */
PatternView {
background-color: #21A14F;
color: rgba(255,255,255,220);
font-size: 11px;
}

/* sample track pattern */
Expand Down
6 changes: 6 additions & 0 deletions include/Track.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,7 @@ class TrackContentObjectView : public selectableObject, public ModelView
Q_PROPERTY( QColor mutedBackgroundColor READ mutedBackgroundColor WRITE setMutedBackgroundColor )
Q_PROPERTY( QColor selectedColor READ selectedColor WRITE setSelectedColor )
Q_PROPERTY( QColor textColor READ textColor WRITE setTextColor )
Q_PROPERTY( QColor textBackgroundColor READ textBackgroundColor WRITE setTextBackgroundColor )
Q_PROPERTY( QColor textShadowColor READ textShadowColor WRITE setTextShadowColor )
Q_PROPERTY( QColor BBPatternBackground READ BBPatternBackground WRITE setBBPatternBackground )
Q_PROPERTY( bool gradient READ gradient WRITE setGradient )
Expand All @@ -215,13 +216,15 @@ class TrackContentObjectView : public selectableObject, public ModelView
QColor mutedBackgroundColor() const;
QColor selectedColor() const;
QColor textColor() const;
QColor textBackgroundColor() const;
QColor textShadowColor() const;
QColor BBPatternBackground() const;
bool gradient() const;
void setMutedColor( const QColor & c );
void setMutedBackgroundColor( const QColor & c );
void setSelectedColor( const QColor & c );
void setTextColor( const QColor & c );
void setTextBackgroundColor( const QColor & c );
void setTextShadowColor( const QColor & c );
void setBBPatternBackground( const QColor & c );
void setGradient( const bool & b );
Expand Down Expand Up @@ -263,6 +266,8 @@ public slots:

DataFile createTCODataFiles(const QVector<TrackContentObjectView *> & tcos) const;

virtual void paintTextLabel(QString const & text, QPainter & painter);


protected slots:
void updateLength();
Expand Down Expand Up @@ -297,6 +302,7 @@ protected slots:
QColor m_mutedBackgroundColor;
QColor m_selectedColor;
QColor m_textColor;
QColor m_textBackgroundColor;
QColor m_textShadowColor;
QColor m_BBPatternBackground;
bool m_gradient;
Expand Down
43 changes: 43 additions & 0 deletions src/core/Track.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,11 @@ QColor TrackContentObjectView::selectedColor() const
QColor TrackContentObjectView::textColor() const
{ return m_textColor; }

QColor TrackContentObjectView::textBackgroundColor() const
{
return m_textBackgroundColor;
}

QColor TrackContentObjectView::textShadowColor() const
{ return m_textShadowColor; }

Expand All @@ -376,6 +381,11 @@ void TrackContentObjectView::setSelectedColor( const QColor & c )
void TrackContentObjectView::setTextColor( const QColor & c )
{ m_textColor = QColor( c ); }

void TrackContentObjectView::setTextBackgroundColor( const QColor & c )
{
m_textBackgroundColor = c;
}

void TrackContentObjectView::setTextShadowColor( const QColor & c )
{ m_textShadowColor = QColor( c ); }

Expand Down Expand Up @@ -627,6 +637,39 @@ DataFile TrackContentObjectView::createTCODataFiles(
return dataFile;
}

void TrackContentObjectView::paintTextLabel(QString const & text, QPainter & painter)
{
if (text.trimmed() == "")
{
return;
}

painter.setRenderHint( QPainter::TextAntialiasing );

QFont labelFont = this->font();
labelFont.setHintingPreference( QFont::PreferFullHinting );
painter.setFont( labelFont );

const int textTop = TCO_BORDER_WIDTH + 1;
const int textLeft = TCO_BORDER_WIDTH + 3;

QFontMetrics fontMetrics(labelFont);
QString elidedPatternName = fontMetrics.elidedText(text, Qt::ElideMiddle, width() - 2 * textLeft);

if (elidedPatternName.length() < 2)
{
elidedPatternName = text.trimmed();
}

painter.fillRect(QRect(0, 0, width(), fontMetrics.height() + 2 * textTop), textBackgroundColor());

int const finalTextTop = textTop + fontMetrics.ascent();
painter.setPen(textShadowColor());
painter.drawText( textLeft + 1, finalTextTop + 1, elidedPatternName );
painter.setPen( textColor() );
painter.drawText( textLeft, finalTextTop, elidedPatternName );
}

/*! \brief Handle a mouse press on this trackContentObjectView.
*
* Handles the various ways in which a trackContentObjectView can be
Expand Down
20 changes: 1 addition & 19 deletions src/gui/AutomationPatternView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,25 +369,7 @@ void AutomationPatternView::paintEvent( QPaintEvent * )
}

// pattern name
p.setRenderHint( QPainter::TextAntialiasing );

if( m_staticTextName.text() != m_pat->name() )
{
m_staticTextName.setText( m_pat->name() );
}

QFont font;
font.setHintingPreference( QFont::PreferFullHinting );
font.setPointSize( 8 );
p.setFont( font );

const int textTop = TCO_BORDER_WIDTH + 1;
const int textLeft = TCO_BORDER_WIDTH + 1;

p.setPen( textShadowColor() );
p.drawStaticText( textLeft + 1, textTop + 1, m_staticTextName );
p.setPen( textColor() );
p.drawStaticText( textLeft, textTop, m_staticTextName );
paintTextLabel(m_pat->name(), p);

// inner border
p.setPen( c.lighter( current ? 160 : 130 ) );
Expand Down
20 changes: 1 addition & 19 deletions src/tracks/BBTrack.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,25 +267,7 @@ void BBTCOView::paintEvent( QPaintEvent * )
}

// pattern name
p.setRenderHint( QPainter::TextAntialiasing );

if( m_staticTextName.text() != m_bbTCO->name() )
{
m_staticTextName.setText( m_bbTCO->name() );
}

QFont font;
font.setHintingPreference( QFont::PreferFullHinting );
font.setPointSize( 8 );
p.setFont( font );

const int textTop = TCO_BORDER_WIDTH + 1;
const int textLeft = TCO_BORDER_WIDTH + 1;

p.setPen( textShadowColor() );
p.drawStaticText( textLeft + 1, textTop + 1, m_staticTextName );
p.setPen( textColor() );
p.drawStaticText( textLeft, textTop, m_staticTextName );
paintTextLabel(m_bbTCO->name(), p);

// inner border
p.setPen( c.lighter( 130 ) );
Expand Down
23 changes: 1 addition & 22 deletions src/tracks/Pattern.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1074,28 +1074,7 @@ void PatternView::paintEvent( QPaintEvent * )

if (!beatPattern && !isDefaultName)
{
p.setRenderHint( QPainter::TextAntialiasing );

QFont labelFont = this->font();
labelFont.setHintingPreference( QFont::PreferFullHinting );
p.setFont( labelFont );

const int textTop = TCO_BORDER_WIDTH + 1;
const int textLeft = TCO_BORDER_WIDTH + 3;

QFontMetrics fontMetrics(labelFont);
QString elidedPatternName = fontMetrics.elidedText(m_pat->name(), Qt::ElideMiddle, width() - 2 * textLeft);

QColor transparentBlack(0, 0, 0, 75);
p.fillRect(QRect(0, 0, width(), fontMetrics.height() + 2 * textTop), transparentBlack);

if( m_staticTextName.text() != elidedPatternName )
{
m_staticTextName.setText( elidedPatternName );
}

p.setPen( textColor() );
p.drawStaticText( textLeft, textTop, m_staticTextName );
paintTextLabel(m_pat->name(), p);
}

// inner border
Expand Down