Skip to content

Commit

Permalink
Piano Roll and Automation editor grid redesign (w/ @BaraMGB) (#3062)
Browse files Browse the repository at this point in the history 
* Make dem grid ndasd

* grid BG

* fix bug in scroll behavior

* debugging scrolling

* Add CSS property, port to automation editor

* Fix a fail

* Spaces to tabs

* Use fillRect rather than drawRect

* Implement @vlad1777d's idea

* Seperate loops and stuff

* Finish up Piano Roll Grid

* Cleanup

* Redesign the grid for the Automation Editor

* Update colors

* Formatting changes

* formatting changes II
  • Loading branch information
@Umcaruje
Umcaruje authored Feb 22, 2017
1 parent 5863752 commit de2e164
Show file tree
Hide file tree
Showing 5 changed files with 318 additions and 182 deletions.
81 changes: 45 additions & 36 deletions data/themes/default/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,19 @@ QMdiArea {
}

AutomationEditor {
background-color: #040506;
color: #ffffff;
background-color: #141616;
qproperty-backgroundShade: rgba(255, 255, 255, 15);
qproperty-vertexColor: #6749C2;
qproperty-gridColor: #190F38;
qproperty-crossColor: #9875FF;
qproperty-crossColor: rgba(215, 210, 254, 150);
/* Grid colors */
qproperty-lineColor: #292929;
qproperty-beatLineColor: #4a3bba;
qproperty-barLineColor: #8173fe;

qproperty-graphColor: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(69,42,153,255), stop:1 rgba(81,48,179,50));
qproperty-scaleColor: #262b30;
stop:0 rgba(69,42,153,180), stop:1 rgba(69,42,153,100));
qproperty-scaleColor: #262b30;
}

/* text box */
Expand Down Expand Up @@ -113,15 +117,20 @@ QMenu::indicator:selected {
}

PianoRoll {
background-color: #040506;
qproperty-gridColor: #2d3339;
background-color: #141616;
qproperty-backgroundShade: rgba(255, 255, 255, 10);
qproperty-noteModeColor: #0bd556;
qproperty-noteColor: #0bd556;
qproperty-noteOpacity: 165;
qproperty-noteBorders: false; /* boolean property, set false to have borderless notes */
qproperty-selectedNoteColor: #006b65;
qproperty-barColor: #078f3a;
qproperty-markedSemitoneColor: #06170E;
/* Grid colors */
qproperty-lineColor: #292929;
qproperty-beatLineColor: #2d6b45;
qproperty-barLineColor: #42a065;

/* Text on the white piano keys */
qproperty-textColor: #000;
qproperty-textColorLight: #0bd556;
Expand All @@ -145,37 +154,37 @@ CPULoadWidget {
/* scrollbar: trough */

QScrollBar:horizontal {
border-top: 3px solid #262b30;
background: #262b30;
height: 12px;
margin: 0px 12px;
border-top: 3px solid #262b30;
background: #262b30;
height: 12px;
margin: 0px 12px;
}
QScrollBar:vertical {
border-left: 3px solid #262b30;
background: #262b30;
width: 12px;
margin: 12px 0px;
border-left: 3px solid #262b30;
background: #262b30;
width: 12px;
margin: 12px 0px;
}

/* scrollbar: trough clicky things */

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal,
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none;
background: none;
}

QScrollBar::add-page:horizontal:pressed, QScrollBar::sub-page:horizontal:pressed,
QScrollBar::add-page:vertical:pressed, QScrollBar::sub-page:vertical:pressed {
background: rgba(0,0,0,50);
background: rgba(0,0,0,50);
}

/* scrollbar: handles (sliders) */

QScrollBar::handle:horizontal {
background: #3f4750;
border: none;
border-radius: 4px;
min-width: 24px;
background: #3f4750;
border: none;
border-radius: 4px;
min-width: 24px;
}

QScrollBar::handle:horizontal:hover {
Expand All @@ -187,10 +196,10 @@ QScrollBar::handle:horizontal:pressed {
}

QScrollBar::handle:vertical {
background: #3f4750;
border: none;
border-radius: 4px;
min-height: 24px;
background: #3f4750;
border: none;
border-radius: 4px;
min-height: 24px;
}

QScrollBar::handle:vertical:hover {
Expand All @@ -210,10 +219,10 @@ QScrollBar::handle:horizontal:disabled, QScrollBar::handle:vertical:disabled {
/* arrow buttons */

QScrollBar::add-line, QScrollBar::sub-line {
background: #262b30;
border-radius: 0px;
border: none;
subcontrol-origin: margin;
background: #262b30;
border-radius: 0px;
border: none;
subcontrol-origin: margin;
}

QScrollBar::add-line:horizontal { subcontrol-position: right; width: 12px;}
Expand All @@ -237,10 +246,10 @@ QScrollBar::add-line:disabled, QScrollBar::sub-line:disabled {

QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal,
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
border: none;
background-color: none;
width: 5px;
height: 5px;
border: none;
background-color: none;
width: 5px;
height: 5px;
}

QScrollBar::left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
Expand All @@ -262,12 +271,12 @@ QScrollBar::down-arrow:vertical:disabled { background-image: url(resources:sbarr

/* background for song editor and bb-editor */

TrackContainerView QFrame{
TrackContainerView QFrame {
background-color: #262b30;
}

/* background for track controls */
TrackView > QWidget{
TrackView > QWidget {
background-color: #3B424A;
}

Expand Down Expand Up @@ -415,7 +424,7 @@ QToolButton:pressed {
background: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #636c7a, stop:1 #262b30);
}

QToolButton:checked {
QToolButton:checked {
border-top: 1px solid #1b1f22;
border-bottom: 1px solid #4a515e;
background: qlineargradient(spread:reflect, x1:0, y1:0, x2:0, y2:1, stop:0 #1b1f22, stop:1 #13161a);
Expand Down
28 changes: 20 additions & 8 deletions include/AutomationEditor.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,14 @@ class TimeLineWidget;
class AutomationEditor : public QWidget, public JournallingObject
{
Q_OBJECT
Q_PROPERTY(QColor gridColor READ gridColor WRITE setGridColor)
Q_PROPERTY(QColor barLineColor READ barLineColor WRITE setBarLineColor)
Q_PROPERTY(QColor beatLineColor READ beatLineColor WRITE setBeatLineColor)
Q_PROPERTY(QColor lineColor READ lineColor WRITE setLineColor)
Q_PROPERTY(QColor vertexColor READ vertexColor WRITE setVertexColor)
Q_PROPERTY(QBrush scaleColor READ scaleColor WRITE setScaleColor)
Q_PROPERTY(QBrush graphColor READ graphColor WRITE setGraphColor)
Q_PROPERTY(QColor crossColor READ crossColor WRITE setCrossColor)
Q_PROPERTY(QColor backgroundShade READ backgroundShade WRITE setBackgroundShade)
public:
void setCurrentPattern(AutomationPattern * new_pattern);

Expand All @@ -78,16 +81,22 @@ class AutomationEditor : public QWidget, public JournallingObject
}

// qproperty access methods
QColor gridColor() const;
QColor barLineColor() const;
void setBarLineColor(const QColor & c);
QColor beatLineColor() const;
void setBeatLineColor(const QColor & c);
QColor lineColor() const;
void setLineColor(const QColor & c);
QBrush graphColor() const;
void setGraphColor(const QBrush & c);
QColor vertexColor() const;
void setVertexColor(const QColor & c);
QBrush scaleColor() const;
void setScaleColor(const QBrush & c);
QColor crossColor() const;
void setGridColor(const QColor& c);
void setGraphColor(const QBrush& c);
void setVertexColor(const QColor& c);
void setScaleColor(const QBrush& c);
void setCrossColor(const QColor& c);
void setCrossColor(const QColor & c);
QColor backgroundShade() const;
void setBackgroundShade(const QColor & c);

enum EditModes
{
Expand Down Expand Up @@ -239,11 +248,14 @@ protected slots:
void drawAutomationPoint( QPainter & p, timeMap::iterator it );
bool inBBEditor();

QColor m_gridColor;
QColor m_barLineColor;
QColor m_beatLineColor;
QColor m_lineColor;
QBrush m_graphColor;
QColor m_vertexColor;
QBrush m_scaleColor;
QColor m_crossColor;
QColor m_backgroundShade;

friend class AutomationEditorWindow;

Expand Down
25 changes: 19 additions & 6 deletions include/PianoRoll.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,9 @@ class TimeLineWidget;
class PianoRoll : public QWidget
{
Q_OBJECT
Q_PROPERTY( QColor gridColor READ gridColor WRITE setGridColor )
Q_PROPERTY( QColor barLineColor READ barLineColor WRITE setBarLineColor )
Q_PROPERTY( QColor beatLineColor READ beatLineColor WRITE setBeatLineColor )
Q_PROPERTY( QColor lineColor READ lineColor WRITE setLineColor )
Q_PROPERTY( QColor noteModeColor READ noteModeColor WRITE setNoteModeColor )
Q_PROPERTY( QColor noteColor READ noteColor WRITE setNoteColor )
Q_PROPERTY( QColor barColor READ barColor WRITE setBarColor )
Expand All @@ -65,6 +67,7 @@ class PianoRoll : public QWidget
Q_PROPERTY( QColor markedSemitoneColor READ markedSemitoneColor WRITE setMarkedSemitoneColor )
Q_PROPERTY( int noteOpacity READ noteOpacity WRITE setNoteOpacity )
Q_PROPERTY( bool noteBorders READ noteBorders WRITE setNoteBorders )
Q_PROPERTY( QColor backgroundShade READ backgroundShade WRITE setBackgroundShade )
public:
enum EditModes
{
Expand Down Expand Up @@ -107,10 +110,14 @@ class PianoRoll : public QWidget
Song::PlayModes desiredPlayModeForAccompany() const;

int quantization() const;

// qproperty acces functions
QColor gridColor() const;
void setGridColor( const QColor & c );

// qproperty access functions
QColor barLineColor() const;
void setBarLineColor( const QColor & c );
QColor beatLineColor() const;
void setBeatLineColor( const QColor & c );
QColor lineColor() const;
void setLineColor( const QColor & c );
QColor noteModeColor() const;
void setNoteModeColor( const QColor & c );
QColor noteColor() const;
Expand All @@ -131,6 +138,8 @@ class PianoRoll : public QWidget
void setNoteOpacity( const int i );
bool noteBorders() const;
void setNoteBorders( const bool b );
QColor backgroundShade() const;
void setBackgroundShade( const QColor & c );


protected:
Expand All @@ -154,6 +163,7 @@ class PianoRoll : public QWidget
void selectAll();
NoteVector getSelectedNotes();
void selectNotesOnKey();
int xCoordOfTick( int tick );

// for entering values with dblclick in the vol/pan bars
void enterValue( NoteVector* nv );
Expand Down Expand Up @@ -370,7 +380,9 @@ protected slots:
friend class PianoRollWindow;

// qproperty fields
QColor m_gridColor;
QColor m_barLineColor;
QColor m_beatLineColor;
QColor m_lineColor;
QColor m_noteModeColor;
QColor m_noteColor;
QColor m_barColor;
Expand All @@ -381,6 +393,7 @@ protected slots:
QColor m_markedSemitoneColor;
int m_noteOpacity;
bool m_noteBorders;
QColor m_backgroundShade;

signals:
void positionChanged( const MidiTime & );
Expand Down
Loading

0 comments on commit de2e164

Please sign in to comment.