From 3d37a7244b6bb9d750277c2cfd9665c571da4be2 Mon Sep 17 00:00:00 2001 From: jmsgrogan Date: Tue, 17 Jan 2023 11:39:25 +0000 Subject: [PATCH] Initial color palette --- apps/notes_tk/CMakeLists.txt | 12 +- src/ui/ui_elements/CMakeLists.txt | 2 + src/ui/ui_elements/style/Theme.h | 158 +++++++++++++++++++++ src/ui/ui_elements/widgets/BoxGeometry.cpp | 117 +++++++++++++++ src/ui/ui_elements/widgets/BoxGeometry.h | 85 +++++++++++ src/ui/ui_elements/widgets/Widget.cpp | 108 +------------- src/ui/ui_elements/widgets/Widget.h | 98 ++----------- src/ui/ui_elements/widgets/WidgetState.h | 9 ++ 8 files changed, 393 insertions(+), 196 deletions(-) create mode 100644 src/ui/ui_elements/widgets/BoxGeometry.cpp create mode 100644 src/ui/ui_elements/widgets/BoxGeometry.h diff --git a/apps/notes_tk/CMakeLists.txt b/apps/notes_tk/CMakeLists.txt index 4d45299..a10e905 100644 --- a/apps/notes_tk/CMakeLists.txt +++ b/apps/notes_tk/CMakeLists.txt @@ -54,12 +54,12 @@ endif() if(DEPENDENCIES_FOUND) target_include_directories(${APP_NAME} PUBLIC - "${CMAKE_CURRENT_SOURCE_DIR}/text_editor" - "${CMAKE_CURRENT_SOURCE_DIR}/audio_editor" - "${CMAKE_CURRENT_SOURCE_DIR}/image_editor" - "${CMAKE_CURRENT_SOURCE_DIR}/web_client" - "${CMAKE_CURRENT_SOURCE_DIR}/canvas" - "${CMAKE_CURRENT_SOURCE_DIR}/mesh_viewer" + ${CMAKE_CURRENT_SOURCE_DIR}/text_editor + ${CMAKE_CURRENT_SOURCE_DIR}/audio_editor + ${CMAKE_CURRENT_SOURCE_DIR}/image_editor + ${CMAKE_CURRENT_SOURCE_DIR}/web_client + ${CMAKE_CURRENT_SOURCE_DIR}/canvas + ${CMAKE_CURRENT_SOURCE_DIR}/mesh_viewer ) target_link_libraries(${APP_NAME} PUBLIC ui_controls client windows console core network database geometry audio web) set_property(TARGET ${APP_NAME} PROPERTY FOLDER apps) diff --git a/src/ui/ui_elements/CMakeLists.txt b/src/ui/ui_elements/CMakeLists.txt index 10d7bae..65c690b 100644 --- a/src/ui/ui_elements/CMakeLists.txt +++ b/src/ui/ui_elements/CMakeLists.txt @@ -21,6 +21,8 @@ list(APPEND LIB_INCLUDES ui_events/ResizeEvent.cpp widgets/Widget.h widgets/Widget.cpp + widgets/BoxGeometry.h + widgets/BoxGeometry.cpp widgets/WidgetState.h widgets/WidgetState.cpp style/Theme.h diff --git a/src/ui/ui_elements/style/Theme.h b/src/ui/ui_elements/style/Theme.h index e4f3547..d830265 100644 --- a/src/ui/ui_elements/style/Theme.h +++ b/src/ui/ui_elements/style/Theme.h @@ -1,5 +1,163 @@ #include "Color.h" +#include + +// Ref https://m3.material.io/styles/color/the-color-system/tokens + +enum class ColorPaletteToken +{ + Primary_10, + Primary_20, + Primary_30, + Primary_40, + Primary_80, + Primary_90, + Primary_100, + Secondary_10, + Secondary_20, + Secondary_30, + Secondary_40, + Secondary_80, + Secondary_90, + Secondary_100, + Tertiary_10, + Tertiary_20, + Tertiary_30, + Tertiary_40, + Tertiary_80, + Tertiary_90, + Tertiary_100, + Neutral_0, + Neutral_10, + Neutral_20, + Neutral_30, + Neutral_80, + Neutral_90, + Neutral_95, + Neutral_99, + Neutral_Variant_30, + Neutral_Variant_50, + Neutral_Variant_60, + Neutral_Variant_80, + Neutral_Variant_90, + Error_10, + Error_20, + Error_30, + Error_40, + Error_80, + Error_90, + Error_100 +}; + +std::unordered_map mPaletteColors = { + {ColorPaletteToken::Primary_10, "#21005E"}, + {ColorPaletteToken::Primary_20, "#371E73"}, + {ColorPaletteToken::Primary_30, "#4F378B"}, + {ColorPaletteToken::Primary_40, "#6750A4"}, + {ColorPaletteToken::Primary_80, "#D0BCFF"}, + {ColorPaletteToken::Primary_90, "#EADDFF"}, + {ColorPaletteToken::Primary_100, "#FFFFFF"}, + {ColorPaletteToken::Secondary_10, "#1E192B"}, + {ColorPaletteToken::Secondary_20, "#332D41"}, + {ColorPaletteToken::Secondary_30, "#4A4458"}, + {ColorPaletteToken::Secondary_40, "#625B71"}, + {ColorPaletteToken::Secondary_80, "#CCC2DC"}, + {ColorPaletteToken::Secondary_90, "#E8DEF8"}, + {ColorPaletteToken::Secondary_100, "#FFFFFF"}, + {ColorPaletteToken::Tertiary_10, "#370B1E"}, + {ColorPaletteToken::Tertiary_20, "#492532"}, + {ColorPaletteToken::Tertiary_30, "#633B48"}, + {ColorPaletteToken::Tertiary_40, "#7D5260"}, + {ColorPaletteToken::Tertiary_80, "#EFB8C8"}, + {ColorPaletteToken::Tertiary_90, "#FFD8E4"}, + {ColorPaletteToken::Tertiary_100, "#FFFFFF"}, + {ColorPaletteToken::Neutral_0, "#000000"}, + {ColorPaletteToken::Neutral_10, "#1C1B1F"}, + {ColorPaletteToken::Neutral_20, "#313033"}, + {ColorPaletteToken::Neutral_90, "#E6E1E5"}, + {ColorPaletteToken::Neutral_95, "#F4EFF4"}, + {ColorPaletteToken::Neutral_99, "#FFFBFE"}, + {ColorPaletteToken::Neutral_Variant_30, "#49454F"}, + {ColorPaletteToken::Neutral_Variant_50, "#79747E"}, + {ColorPaletteToken::Neutral_Variant_60, "#938F99"}, + {ColorPaletteToken::Neutral_Variant_80, "#CAC4D0"}, + {ColorPaletteToken::Neutral_Variant_90, "#E7E0EC"}, + {ColorPaletteToken::Error_10, "#410E0B"}, + {ColorPaletteToken::Error_20, "#601410"}, + {ColorPaletteToken::Error_30, "#8C1D18"}, + {ColorPaletteToken::Error_40, "#B3261E"}, + {ColorPaletteToken::Error_80, "#F2B8B5"}, + {ColorPaletteToken::Error_90, "#F9DEDC"}, + {ColorPaletteToken::Error_100, "#FFFFFF"}, +}; + +enum class SystemToken +{ + Primary, + Primary_Container, + Secondary, + Secondary_Container, + Tertiary, + Tertiary_Container, + Surface, + Surface_Variant, + Background, + Error, + Error_Container, + On_Primary, + On_Primary_Container, + On_Secondary, + On_Secondary_Container, + On_Tertiary, + On_Tertiary_Container, + On_Surface, + On_Surface_Variant, + On_Error, + On_Error_Container, + On_Background, + Outline, + Ouline_Variant, + Shadow, + Surface_Tint_Color, + Inverse_Surface, + Inverse_On_Surface, + Inverse_Primary, + Scrim +}; + +std::unordered_map mLightTheme = { + {SystemToken::Primary, ColorPaletteToken::Primary_40}, + {SystemToken::Primary_Container, ColorPaletteToken::Primary_90}, + {SystemToken::Secondary, ColorPaletteToken::Secondary_40}, + {SystemToken::Secondary_Container, ColorPaletteToken::Secondary_90}, + {SystemToken::Tertiary, ColorPaletteToken::Tertiary_40}, + {SystemToken::Tertiary_Container, ColorPaletteToken::Tertiary_90}, + {SystemToken::Surface, ColorPaletteToken::Neutral_99}, + {SystemToken::Surface_Variant, ColorPaletteToken::Neutral_Variant_90}, + {SystemToken::Background, ColorPaletteToken::Neutral_99}, + {SystemToken::Error, ColorPaletteToken::Error_40}, + {SystemToken::Error_Container, ColorPaletteToken::Error_90}, + {SystemToken::On_Primary, ColorPaletteToken::Primary_100}, + {SystemToken::On_Primary_Container, ColorPaletteToken::Primary_10}, + {SystemToken::On_Secondary, ColorPaletteToken::Secondary_100}, + {SystemToken::On_Secondary_Container, ColorPaletteToken::Secondary_10}, + {SystemToken::On_Tertiary, ColorPaletteToken::Tertiary_100}, + {SystemToken::On_Tertiary_Container, ColorPaletteToken::Tertiary_10}, + {SystemToken::On_Surface, ColorPaletteToken::Neutral_10}, + {SystemToken::On_Surface_Variant, ColorPaletteToken::Neutral_Variant_30}, + {SystemToken::On_Error, ColorPaletteToken::Error_100}, + {SystemToken::On_Error_Container, ColorPaletteToken::Error_10}, + {SystemToken::On_Background, ColorPaletteToken::Neutral_10}, + {SystemToken::Outline, ColorPaletteToken::Neutral_Variant_50}, + {SystemToken::Ouline_Variant, ColorPaletteToken::Neutral_Variant_80}, + {SystemToken::Shadow, ColorPaletteToken::Neutral_0}, + {SystemToken::Surface_Tint_Color, ColorPaletteToken::Primary_40}, + {SystemToken::Inverse_Surface, ColorPaletteToken::Neutral_20}, + {SystemToken::Inverse_On_Surface, ColorPaletteToken::Neutral_95}, + {SystemToken::Inverse_Primary, ColorPaletteToken::Primary_80}, + {SystemToken::Scrim, ColorPaletteToken::Neutral_0}, +}; + class Theme { public: diff --git a/src/ui/ui_elements/widgets/BoxGeometry.cpp b/src/ui/ui_elements/widgets/BoxGeometry.cpp new file mode 100644 index 0000000..e60c26a --- /dev/null +++ b/src/ui/ui_elements/widgets/BoxGeometry.cpp @@ -0,0 +1,117 @@ +#include "BoxGeometry.h" + +BoxGeometry::BoxGeometry() + : mLocation(DiscretePoint(0, 0)), + mSize({ 100, 0, 0, 100, 0, 0 }), + mPadding(), + mMargin() +{ + +} + + +BoundedSize BoxGeometry::getSize() const +{ + return mSize; +} + +const DiscretePoint& BoxGeometry::getLocation() const +{ + return mLocation; +} + +void BoxGeometry::setSize(const BoundedSize& size) +{ + if (size != mSize) + { + mSize = size; + mTransformDirty = true; + } +} + +void BoxGeometry::setMargin(unsigned margin) +{ + setMargin({ margin, margin, margin, margin }); +} + +void BoxGeometry::setMargin(const BoundaryOffset& margin) +{ + if (margin != mMargin) + { + mMargin = margin; + mTransformDirty = true; + } +} + +void BoxGeometry::setPadding(unsigned padding) +{ + setPadding({ padding, padding, padding, padding }); +} + +void BoxGeometry::setPadding(const BoundaryOffset& padding) +{ + if (padding != mPadding) + { + mPadding = padding; + mTransformDirty = true; + } +} + +void BoxGeometry::setBounds(unsigned width, unsigned height) +{ + if (mSize.mMaxWidth > 0 && width > mSize.mMaxWidth) + { + width = mSize.mMaxWidth; + } + + if (mSize.mMaxHeight > 0 && height > mSize.mMaxHeight) + { + height = mSize.mMaxHeight; + } + + if (width != mSize.mWidth || height != mSize.mHeight) + { + mTransformDirty = true; + mSize.mWidth = width; + mSize.mHeight = height; + } +} + +void BoxGeometry::setLocation(const DiscretePoint& loc) +{ + if (mLocation != loc) + { + mLocation = loc; + mTransformDirty = true; + } +} + +void BoxGeometry::setMaxWidth(unsigned maxWidth) +{ + if (mSize.mMaxWidth != maxWidth) + { + mTransformDirty = true; + mSize.mMaxWidth = maxWidth; + } +} + +bool BoxGeometry::contains(const DiscretePoint& loc) const +{ + if (loc.getX() < mLocation.getX()) + { + return false; + } + if (loc.getX() > mLocation.getX() + mSize.mWidth) + { + return false; + } + if (loc.getY() > mLocation.getY() + mSize.mHeight) + { + return false; + } + if (loc.getY() < mLocation.getY()) + { + return false; + } + return true; +} diff --git a/src/ui/ui_elements/widgets/BoxGeometry.h b/src/ui/ui_elements/widgets/BoxGeometry.h new file mode 100644 index 0000000..d8c47ae --- /dev/null +++ b/src/ui/ui_elements/widgets/BoxGeometry.h @@ -0,0 +1,85 @@ +#pragma once + +#include "DiscretePoint.h" + +struct BoundaryOffset +{ + bool operator==(const BoundaryOffset& rhs) const + { + return (mLeft == rhs.mLeft) + && (mRight == rhs.mRight) + && (mTop == rhs.mTop) + && (mBottom == rhs.mBottom); + } + bool operator!=(const BoundaryOffset& rhs) const + { + return !operator==(rhs); + } + + unsigned mLeft = 0; + unsigned mRight = 0; + unsigned mTop = 0; + unsigned mBottom = 0; +}; + +struct BoundedSize +{ + bool operator==(const BoundedSize& rhs) const + { + return (mWidth == rhs.mWidth) + && (mMaxWidth == rhs.mMaxWidth) + && (mMinWidth == rhs.mMinWidth) + && (mHeight == rhs.mHeight) + && (mMaxHeight == rhs.mMaxHeight) + && (mMinHeight == rhs.mMinHeight); + } + bool operator!=(const BoundedSize& rhs) const + { + return !operator==(rhs); + } + + unsigned mWidth = 0; + unsigned mMaxWidth = 0; + unsigned mMinWidth = 0; + unsigned mHeight = 0; + unsigned mMaxHeight = 0; + unsigned mMinHeight = 0; +}; + +class BoxGeometry +{ +public: + BoxGeometry(); + + virtual ~BoxGeometry() = default; + + bool contains(const DiscretePoint& loc) const; + + BoundedSize getSize() const; + + const DiscretePoint& getLocation() const; + + void setBounds(unsigned width, unsigned height); + + void setSize(const BoundedSize& size); + + void setMaxWidth(unsigned maxWidth); + + void setMargin(unsigned margin); + + void setMargin(const BoundaryOffset& margin); + + void setPadding(unsigned padding); + + void setPadding(const BoundaryOffset& padding); + + void setLocation(const DiscretePoint& loc); + +protected: + DiscretePoint mLocation; + BoundedSize mSize; + BoundaryOffset mPadding; + BoundaryOffset mMargin; + + bool mTransformDirty{ true }; +}; \ No newline at end of file diff --git a/src/ui/ui_elements/widgets/Widget.cpp b/src/ui/ui_elements/widgets/Widget.cpp index 4b8d161..3b8adb9 100644 --- a/src/ui/ui_elements/widgets/Widget.cpp +++ b/src/ui/ui_elements/widgets/Widget.cpp @@ -18,10 +18,7 @@ #include Widget::Widget() - : mLocation(DiscretePoint(0, 0)), - mSize({100, 0, 0, 100, 0, 0}), - mPadding(), - mMargin(), + : BoxGeometry(), mRootNode(std::make_unique()), mChildren(), mBorderThickness(0), @@ -50,77 +47,23 @@ void Widget::addWidget(WidgetUPtr widget) mChildren.push_back(std::move(widget)); } -Widget::BoundedSize Widget::getSize() const +void Widget::setName(const std::string& name) { - return mSize; + mName = name; } -const DiscretePoint& Widget::getLocation() const +const std::string& Widget::getName() const { - return mLocation; + return mName; } + TransformNode* Widget::getRootNode() const { return mRootNode.get(); } -void Widget::setSize(const BoundedSize& size) -{ - if (size != mSize) - { - mSize = size; - mTransformDirty = true; - } -} -void Widget::setMargin(unsigned margin) -{ - setMargin({margin, margin, margin, margin}); -} - -void Widget::setMargin(const BoundaryOffset& margin) -{ - if (margin != mMargin) - { - mMargin = margin; - mTransformDirty = true; - } -} - -void Widget::setPadding(unsigned padding) -{ - setPadding({padding, padding, padding, padding}); -} - -void Widget::setPadding(const BoundaryOffset& padding) -{ - if (padding != mPadding) - { - mPadding = padding; - mTransformDirty = true; - } -} - -void Widget::setBounds(unsigned width, unsigned height) -{ - if (mSize.mMaxWidth > 0 && width > mSize.mMaxWidth) - { - width = mSize.mMaxWidth; - } - - if (mSize.mMaxHeight > 0 && height > mSize.mMaxHeight) - { - height = mSize.mMaxHeight; - } - - if (width != mSize.mWidth || height != mSize.mHeight) - { - mTransformDirty = true; - mSize.mWidth = width; - mSize.mHeight = height; - } -} void Widget::setBackgroundColor(const Color& color) { @@ -131,15 +74,6 @@ void Widget::setBackgroundColor(const Color& color) } } -void Widget::setLocation(const DiscretePoint& loc) -{ - if (mLocation != loc) - { - mLocation = loc; - mTransformDirty = true; - } -} - void Widget::setVisible(bool visible) { if (mVisible != visible) @@ -176,15 +110,6 @@ bool Widget::needsUpdate() const return false; } -void Widget::setMaxWidth(unsigned maxWidth) -{ - if (mSize.mMaxWidth != maxWidth) - { - mTransformDirty = true; - mSize.mMaxWidth = maxWidth; - } -} - void Widget::doPaint(const PaintEvent* event) { updateBackground(event); @@ -236,27 +161,6 @@ void Widget::updateChildLocations() } } -bool Widget::contains(const DiscretePoint& loc) const -{ - if(loc.getX() < mLocation.getX()) - { - return false; - } - if(loc.getX() > mLocation.getX() + mSize.mWidth) - { - return false; - } - if(loc.getY() > mLocation.getY() + mSize.mHeight) - { - return false; - } - if(loc.getY() < mLocation.getY()) - { - return false; - } - return true; -} - bool Widget::onKeyboardEvent(const KeyboardEvent* event) { bool inChild = false; diff --git a/src/ui/ui_elements/widgets/Widget.h b/src/ui/ui_elements/widgets/Widget.h index b82a76b..f98ce27 100644 --- a/src/ui/ui_elements/widgets/Widget.h +++ b/src/ui/ui_elements/widgets/Widget.h @@ -1,8 +1,9 @@ #pragma once -#include "DiscretePoint.h" #include "FontItem.h" #include "Color.h" +#include "WidgetState.h" +#include "BoxGeometry.h" #include #include @@ -21,55 +22,9 @@ namespace mt class Window; } -class Widget +class Widget : public BoxGeometry { public: - struct BoundaryOffset - { - bool operator==(const BoundaryOffset& rhs) const - { - return (mLeft == rhs.mLeft) - && (mRight == rhs.mRight) - && (mTop == rhs.mTop) - && (mBottom == rhs.mBottom); - } - bool operator!=(const BoundaryOffset& rhs) const - { - return !operator==(rhs); - } - - unsigned mLeft = 0; - unsigned mRight = 0; - unsigned mTop = 0; - unsigned mBottom = 0; - }; - - struct BoundedSize - { - bool operator==(const BoundedSize& rhs) const - { - return (mWidth == rhs.mWidth) - && (mMaxWidth == rhs.mMaxWidth) - && (mMinWidth == rhs.mMinWidth) - && (mHeight == rhs.mHeight) - && (mMaxHeight == rhs.mMaxHeight) - && (mMinHeight == rhs.mMinHeight); - } - bool operator!=(const BoundedSize& rhs) const - { - return !operator==(rhs); - } - - unsigned mWidth = 0; - unsigned mMaxWidth = 0; - unsigned mMinWidth = 0; - unsigned mHeight = 0; - unsigned mMaxHeight = 0; - unsigned mMinHeight = 0; - }; - -public: - Widget(); virtual ~Widget(); @@ -78,11 +33,13 @@ public: virtual void addWidget(std::unique_ptr widget); - BoundedSize getSize() const; - TransformNode* getRootNode() const; - const DiscretePoint& getLocation() const; + const std::string& getName() const; + + mt::Window* getTopLevelWindow() const; + + bool needsUpdate() const; virtual void onPaintEvent(const PaintEvent* event); @@ -90,44 +47,14 @@ public: virtual bool onKeyboardEvent(const KeyboardEvent* event); - bool contains(const DiscretePoint& loc) const; - void setBackgroundColor(const Color& color); - void setBounds(unsigned width, unsigned height); - - void setSize(const BoundedSize& size); - - void setMaxWidth(unsigned maxWidth); - - void setMargin(unsigned margin); - - void setMargin(const BoundaryOffset& margin); - - void setPadding(unsigned padding); - - void setPadding(const BoundaryOffset& padding); - - void setLocation(const DiscretePoint& loc); - void setVisible(bool visible); - void setName(const std::string& name) - { - mName = name; - } - - const std::string& getName() const - { - return mName; - } - - bool needsUpdate() const; + void setName(const std::string& name); void setWindow(mt::Window* window); - mt::Window* getTopLevelWindow() const; - protected: virtual bool onMyKeyboardEvent(const KeyboardEvent* event); @@ -147,13 +74,9 @@ protected: mt::Window* getWindow() const; - DiscretePoint mLocation; - BoundedSize mSize; - BoundaryOffset mPadding; - BoundaryOffset mMargin; - std::unique_ptr mRootNode; std::vector > mChildren; + unsigned mBorderThickness{0}; Color mBackgroundColor; Color mBorderColor; @@ -161,7 +84,6 @@ protected: std::unique_ptr mBackgroundNode; - bool mTransformDirty{true}; bool mMaterialDirty{true}; bool mVisibilityDirty{true}; diff --git a/src/ui/ui_elements/widgets/WidgetState.h b/src/ui/ui_elements/widgets/WidgetState.h index e69de29..84e8a1a 100644 --- a/src/ui/ui_elements/widgets/WidgetState.h +++ b/src/ui/ui_elements/widgets/WidgetState.h @@ -0,0 +1,9 @@ +#pragma once + +struct WidgetState +{ + bool mIsSelected{ false }; + bool mIsHovered{ false }; + bool mIsPressed{ false }; + bool mIsFocused{ false }; +}; \ No newline at end of file