feat(color): LVGLify and improve layout of theme details edit dialog (#3078)
This commit is contained in:
@@ -59,7 +59,7 @@
|
||||
#if (LCD_W > LCD_H)
|
||||
constexpr int BUTTON_HEIGHT = 30;
|
||||
constexpr int BUTTON_WIDTH = 75;
|
||||
constexpr rect_t detailsDialogRect = {50, 50, 400, 170};
|
||||
constexpr rect_t detailsDialogRect = {30, 30, LCD_W - 60, LCD_H - 60};
|
||||
constexpr int labelWidth = 150;
|
||||
|
||||
constexpr int COLOR_BOX_LEFT = 5;
|
||||
@@ -68,7 +68,7 @@ constexpr int COLOR_BOX_HEIGHT = 27;
|
||||
#else
|
||||
constexpr int BUTTON_HEIGHT = 30;
|
||||
constexpr int BUTTON_WIDTH = 65;
|
||||
constexpr rect_t detailsDialogRect = {5, 50, LCD_W - 10, 340};
|
||||
constexpr rect_t detailsDialogRect = {10, 50, LCD_W - 20, 220};
|
||||
constexpr int labelWidth = 120;
|
||||
|
||||
constexpr int COLOR_BOX_LEFT = 3;
|
||||
@@ -79,8 +79,66 @@ constexpr int COLOR_BUTTON_WIDTH = COLOR_BOX_WIDTH;
|
||||
constexpr int COLOR_BUTTON_HEIGHT = 20;
|
||||
#endif
|
||||
|
||||
constexpr int BOX_MARGIN = 2;
|
||||
constexpr int MAX_BOX_WIDTH = 15;
|
||||
|
||||
|
||||
class ThemeColorPreview : public FormField
|
||||
{
|
||||
public:
|
||||
ThemeColorPreview(Window *parent, const rect_t &rect, std::vector<ColorEntry> colorList) :
|
||||
FormField(parent, rect, NO_FOCUS),
|
||||
colorList(colorList)
|
||||
{
|
||||
setBoxWidth();
|
||||
}
|
||||
~ThemeColorPreview()
|
||||
{
|
||||
}
|
||||
|
||||
void setColorList(std::vector<ColorEntry> colorList)
|
||||
{
|
||||
this->colorList.assign(colorList.begin(), colorList.end());
|
||||
setBoxWidth();
|
||||
invalidate();
|
||||
}
|
||||
|
||||
void paint(BitmapBuffer *dc) override
|
||||
{
|
||||
int totalNessessarySpace = colorList.size() * (boxWidth + 2);
|
||||
int axis = rect.w > rect.h ? rect.w : rect.h;
|
||||
axis = (axis - totalNessessarySpace) / 2;
|
||||
for (auto color: colorList) {
|
||||
if (rect.w > rect.h) {
|
||||
dc->drawSolidFilledRect(axis, 0, boxWidth, boxWidth, COLOR2FLAGS(color.colorValue));
|
||||
dc->drawSolidRect(axis, 0, boxWidth, boxWidth, 1, COLOR2FLAGS(BLACK));
|
||||
} else {
|
||||
dc->drawSolidFilledRect(0, axis, boxWidth, boxWidth, COLOR2FLAGS(color.colorValue));
|
||||
dc->drawSolidRect(0, axis, boxWidth, boxWidth, 1, COLOR2FLAGS(BLACK));
|
||||
}
|
||||
axis += boxWidth + BOX_MARGIN;
|
||||
}
|
||||
}
|
||||
|
||||
protected:
|
||||
std::vector<ColorEntry> colorList;
|
||||
int boxWidth = MAX_BOX_WIDTH;
|
||||
void setBoxWidth()
|
||||
{
|
||||
auto winSize = rect.w > rect.h ? rect.w : rect.h;
|
||||
boxWidth = winSize / (colorList.size() + BOX_MARGIN);
|
||||
boxWidth = min(boxWidth, MAX_BOX_WIDTH);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
static const lv_coord_t d_col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(3),
|
||||
LV_GRID_TEMPLATE_LAST};
|
||||
static const lv_coord_t b_col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1),
|
||||
LV_GRID_TEMPLATE_LAST};
|
||||
static const lv_coord_t row_dsc[] = {LV_GRID_CONTENT,
|
||||
LV_GRID_TEMPLATE_LAST};
|
||||
|
||||
class ThemeDetailsDialog: public Dialog
|
||||
{
|
||||
public:
|
||||
@@ -89,33 +147,50 @@ class ThemeDetailsDialog: public Dialog
|
||||
theme(theme),
|
||||
saveHandler(saveHandler)
|
||||
{
|
||||
FormGridLayout grid(detailsDialogRect.w);
|
||||
grid.setLabelWidth(labelWidth);
|
||||
grid.spacer(8);
|
||||
lv_obj_set_style_bg_color(content->getLvObj(), makeLvColor(COLOR_THEME_SECONDARY3), 0);
|
||||
lv_obj_set_style_bg_opa(content->getLvObj(), LV_OPA_100, LV_PART_MAIN);
|
||||
auto form = new FormWindow(&content->form, rect_t{});
|
||||
form->setFlexLayout();
|
||||
|
||||
new StaticText(&content->form, grid.getLabelSlot(), STR_NAME, 0, COLOR_THEME_PRIMARY1);
|
||||
new TextEdit(&content->form, grid.getFieldSlot(), this->theme.getName(), NAME_LENGTH);
|
||||
grid.nextLine();
|
||||
new StaticText(&content->form, grid.getLabelSlot(), STR_AUTHOR, 0, COLOR_THEME_PRIMARY1);
|
||||
new TextEdit(&content->form, grid.getFieldSlot(), this->theme.getAuthor(), AUTHOR_LENGTH);
|
||||
grid.nextLine();
|
||||
new StaticText(&content->form, grid.getLineSlot(), STR_DESCRIPTION, 0, COLOR_THEME_PRIMARY1);
|
||||
grid.nextLine();
|
||||
new TextEdit(&content->form, grid.getLineSlot(), this->theme.getInfo(), INFO_LENGTH);
|
||||
grid.nextLine();
|
||||
FlexGridLayout grid(d_col_dsc, row_dsc, 2);
|
||||
|
||||
rect_t r = {detailsDialogRect.w - (BUTTON_WIDTH + 5), grid.getWindowHeight() + 5, BUTTON_WIDTH, BUTTON_HEIGHT };
|
||||
new TextButton(&content->form, r, STR_SAVE, [=] () {
|
||||
auto line = form->newLine(&grid);
|
||||
|
||||
new StaticText(line, rect_t{}, STR_NAME, 0, COLOR_THEME_PRIMARY1);
|
||||
auto te = new TextEdit(line, rect_t{}, this->theme.getName(), NAME_LENGTH);
|
||||
lv_obj_set_grid_cell(te->getLvObj(), LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1);
|
||||
|
||||
line = form->newLine(&grid);
|
||||
|
||||
new StaticText(line, rect_t{}, STR_AUTHOR, 0, COLOR_THEME_PRIMARY1);
|
||||
te = new TextEdit(line, rect_t{}, this->theme.getAuthor(), AUTHOR_LENGTH);
|
||||
lv_obj_set_grid_cell(te->getLvObj(), LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1);
|
||||
|
||||
FlexGridLayout grid2(b_col_dsc, row_dsc, 2);
|
||||
|
||||
line = form->newLine(&grid2);
|
||||
|
||||
new StaticText(line, rect_t{}, STR_DESCRIPTION, 0, COLOR_THEME_PRIMARY1);
|
||||
line = form->newLine(&grid2);
|
||||
te = new TextEdit(line, rect_t{}, this->theme.getInfo(), INFO_LENGTH);
|
||||
lv_obj_set_grid_cell(te->getLvObj(), LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_CENTER, 0, 1);
|
||||
|
||||
line = form->newLine(&grid2);
|
||||
line->padTop(20);
|
||||
|
||||
auto button = new TextButton(line, rect_t{0, 0, lv_pct(30), 32}, STR_SAVE, [=] () {
|
||||
if (saveHandler != nullptr)
|
||||
saveHandler(this->theme);
|
||||
deleteLater();
|
||||
return 0;
|
||||
});
|
||||
r.x -= (BUTTON_WIDTH + 5);
|
||||
new TextButton(&content->form, r, STR_CANCEL, [=] () {
|
||||
lv_obj_set_grid_cell(button->getLvObj(), LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 1);
|
||||
|
||||
button = new TextButton(line, rect_t{0, 0, lv_pct(30), 32}, STR_CANCEL, [=] () {
|
||||
deleteLater();
|
||||
return 0;
|
||||
});
|
||||
lv_obj_set_grid_cell(button->getLvObj(), LV_GRID_ALIGN_CENTER, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1);
|
||||
}
|
||||
|
||||
protected:
|
||||
|
||||
@@ -19,61 +19,9 @@
|
||||
* GNU General Public License for more details.
|
||||
*/
|
||||
#include "tabsgroup.h"
|
||||
#include "color_editor.h"
|
||||
#include "file_preview.h"
|
||||
#include "file_carosell.h"
|
||||
|
||||
constexpr int BOX_MARGIN = 2;
|
||||
constexpr int MAX_BOX_WIDTH = 15;
|
||||
|
||||
class ThemeColorPreview : public FormField
|
||||
{
|
||||
public:
|
||||
ThemeColorPreview(Window *parent, const rect_t &rect, std::vector<ColorEntry> colorList) :
|
||||
FormField(parent, rect, NO_FOCUS),
|
||||
colorList(colorList)
|
||||
{
|
||||
setBoxWidth();
|
||||
}
|
||||
~ThemeColorPreview()
|
||||
{
|
||||
}
|
||||
|
||||
void setColorList(std::vector<ColorEntry> colorList)
|
||||
{
|
||||
this->colorList.assign(colorList.begin(), colorList.end());
|
||||
setBoxWidth();
|
||||
invalidate();
|
||||
}
|
||||
|
||||
void paint(BitmapBuffer *dc) override
|
||||
{
|
||||
int totalNessessarySpace = colorList.size() * (boxWidth + 2);
|
||||
int axis = rect.w > rect.h ? rect.w : rect.h;
|
||||
axis = (axis - totalNessessarySpace) / 2;
|
||||
for (auto color: colorList) {
|
||||
if (rect.w > rect.h) {
|
||||
dc->drawSolidFilledRect(axis, 0, boxWidth, boxWidth, COLOR2FLAGS(color.colorValue));
|
||||
dc->drawSolidRect(axis, 0, boxWidth, boxWidth, 1, COLOR2FLAGS(BLACK));
|
||||
} else {
|
||||
dc->drawSolidFilledRect(0, axis, boxWidth, boxWidth, COLOR2FLAGS(color.colorValue));
|
||||
dc->drawSolidRect(0, axis, boxWidth, boxWidth, 1, COLOR2FLAGS(BLACK));
|
||||
}
|
||||
axis += boxWidth + BOX_MARGIN;
|
||||
}
|
||||
}
|
||||
|
||||
protected:
|
||||
std::vector<ColorEntry> colorList;
|
||||
int boxWidth = MAX_BOX_WIDTH;
|
||||
void setBoxWidth()
|
||||
{
|
||||
auto winSize = rect.w > rect.h ? rect.w : rect.h;
|
||||
boxWidth = winSize / (colorList.size() + BOX_MARGIN);
|
||||
boxWidth = min(boxWidth, MAX_BOX_WIDTH);
|
||||
}
|
||||
};
|
||||
|
||||
class ThemeColorPreview;
|
||||
|
||||
class ThemeSetupPage: public PageTab {
|
||||
public:
|
||||
|
||||
Reference in New Issue
Block a user