mirror
/
nheko
mirror of https://github.com/Nheko-Reborn/nheko
2
0
Fork 1
Code Issues Releases Wiki Activity

Refactor the room settings menu to look like the user profile

Browse Source
pull/1/head
Konstantinos Sideris 6 years ago
parent 5dfd26abc5
commit 0247b47553
10 changed files with 94 additions and 196 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. BIN
      resources/icons/ui/edit.png
  2. 1
      resources/icons/ui/edit.svg
  3. BIN
      resources/icons/ui/edit@2x.png
  4. BIN
      resources/icons/ui/world.png
  5. 1
      resources/icons/ui/world.svg
  6. BIN
      resources/icons/ui/world@2x.png
  7. 8
      resources/res.qrc
  8. 2
      src/CommunitiesListItem.cpp
  9. 240
      src/dialogs/RoomSettings.cpp
  10. 36
      src/dialogs/RoomSettings.h

BIN
resources/icons/ui/edit.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 592 B

1
resources/icons/ui/edit.svg
Unescape View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 587 B

BIN
resources/icons/ui/edit@2x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 858 B

BIN
resources/icons/ui/world.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
resources/icons/ui/world.svg
Unescape View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 818 B

BIN
resources/icons/ui/world@2x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

8
resources/res.qrc
Unescape View File

@ -39,7 +39,6 @@
<file>icons/ui/paper-clip-outline@2x.png</file>
<file>icons/ui/angle-pointing-to-left.png</file>
<file>icons/ui/angle-pointing-to-left@2x.png</file>
<file>icons/ui/world.svg</file>
<file>icons/ui/angle-arrow-down.png</file>
<file>icons/ui/angle-arrow-down@2x.png</file>
<file>icons/ui/arrow-pointing-down.png</file>
@ -50,7 +49,12 @@
<file>icons/ui/pause-symbol@2x.png</file>
<file>icons/ui/remove-symbol.png</file>
<file>icons/ui/remove-symbol@2x.png</file>
<file>icons/ui/edit.svg</file>
<file>icons/ui/world.png</file>
<file>icons/ui/world@2x.png</file>
<file>icons/ui/edit.png</file>
<file>icons/ui/edit@2x.png</file>
<file>icons/emoji-categories/people.png</file>
<file>icons/emoji-categories/people@2x.png</file>

2
src/CommunitiesListItem.cpp
Unescape View File

@ -18,7 +18,7 @@ CommunitiesListItem::CommunitiesListItem(QString group_id, QWidget *parent)
rippleOverlay_->setClipping(true);
if (groupId_ == "world")
avatar_ = QPixmap(":/icons/icons/ui/world.svg");
avatar_ = QPixmap(":/icons/icons/ui/world.png");
}
void

240
src/dialogs/RoomSettings.cpp
Unescape View File

@ -4,7 +4,6 @@
#include <QMessageBox>
#include <QPainter>
#include <QPixmap>
#include <QSettings>
#include <QSharedPointer>
#include <QStyleOption>
#include <QVBoxLayout>
@ -26,40 +25,55 @@
using namespace dialogs;
using namespace mtx::events;
constexpr int BUTTON_SIZE = 36;
constexpr int BUTTON_RADIUS = BUTTON_SIZE / 2;
constexpr int WIDGET_MARGIN = 20;
constexpr int TOP_WIDGET_MARGIN = 2 * WIDGET_MARGIN;
constexpr int WIDGET_SPACING = 15;
constexpr int TEXT_SPACING = 4;
constexpr int BUTTON_SPACING = 2 * TEXT_SPACING;
EditModal::EditModal(const QString &roomId, QWidget *parent)
: QWidget(parent)
, roomId_{roomId}
{
setMinimumWidth(360);
setAutoFillBackground(true);
setAttribute(Qt::WA_DeleteOnClose, true);
setWindowFlags(Qt::Tool | Qt::WindowStaysOnTopHint);
setWindowModality(Qt::WindowModal);
QFont doubleFont;
doubleFont.setPointSizeF(doubleFont.pointSizeF() * 2);
setMinimumWidth(QFontMetrics(doubleFont).averageCharWidth() * 30 - 2 * WIDGET_MARGIN);
setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum);
auto layout = new QVBoxLayout(this);
QFont buttonFont;
buttonFont.setPointSizeF(buttonFont.pointSizeF() * 1.3);
applyBtn_ = new FlatButton(tr("APPLY"), this);
applyBtn_->setFontSize(conf::btn::fontSize);
applyBtn_->setFont(buttonFont);
applyBtn_->setRippleStyle(ui::RippleStyle::NoRipple);
applyBtn_->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum);
cancelBtn_ = new FlatButton(tr("CANCEL"), this);
cancelBtn_->setFontSize(conf::btn::fontSize);
cancelBtn_->setFont(buttonFont);
cancelBtn_->setRippleStyle(ui::RippleStyle::NoRipple);
cancelBtn_->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum);
auto btnLayout = new QHBoxLayout;
btnLayout->setContentsMargins(5, 20, 5, 5);
btnLayout->setMargin(5);
btnLayout->addStretch(1);
btnLayout->addWidget(applyBtn_);
btnLayout->addWidget(cancelBtn_);
nameInput_ = new TextField(this);
nameInput_->setLabel(tr("Name"));
nameInput_->setLabel(tr("Name").toUpper());
topicInput_ = new TextField(this);
topicInput_->setLabel(tr("Topic"));
QFont font;
font.setPixelSize(conf::modals::errorFont);
topicInput_->setLabel(tr("Topic").toUpper());
errorField_ = new QLabel(this);
errorField_->setFont(font);
errorField_->setWordWrap(true);
errorField_->hide();
@ -154,79 +168,46 @@ EditModal::setFields(const QString &roomName, const QString &roomTopic)
topicInput_->setText(roomTopic);
}
TopSection::TopSection(const RoomInfo &info, const QImage &img, QWidget *parent)
: QWidget{parent}
, info_{std::move(info)}
{
textColor_ = palette().color(QPalette::Text);
avatar_ = utils::scaleImageToPixmap(img, AvatarSize);
QSizePolicy policy(QSizePolicy::Minimum, QSizePolicy::Minimum);
setSizePolicy(policy);
}
void
TopSection::setRoomName(const QString &name)
{
info_.name = name.toStdString();
update();
}
QSize
TopSection::sizeHint() const
{
QFont font;
font.setPixelSize(18);
return QSize(340, AvatarSize + QFontMetrics(font).ascent());
}
RoomSettings::RoomSettings(const QString &room_id, QWidget *parent)
: QFrame(parent)
, room_id_{std::move(room_id)}
{
setMaximumWidth(420);
retrieveRoomInfo();
constexpr int SettingsMargin = 2;
QFont doubleFont;
doubleFont.setPointSizeF(doubleFont.pointSizeF() * 2);
auto layout = new QVBoxLayout(this);
layout->setSpacing(15);
layout->setMargin(20);
setMinimumWidth(QFontMetrics(doubleFont).averageCharWidth() * 30 - 2 * WIDGET_MARGIN);
setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum);
okBtn_ = new FlatButton(tr("OK"), this);
okBtn_->setFontSize(conf::btn::fontSize);
cancelBtn_ = new FlatButton(tr("CANCEL"), this);
cancelBtn_->setFontSize(conf::btn::fontSize);
auto layout = new QVBoxLayout(this);
layout->setSpacing(WIDGET_SPACING);
layout->setContentsMargins(WIDGET_MARGIN, TOP_WIDGET_MARGIN, WIDGET_MARGIN, WIDGET_MARGIN);
auto btnLayout = new QHBoxLayout();
btnLayout->setSpacing(0);
btnLayout->setMargin(0);
btnLayout->addStretch(1);
btnLayout->addWidget(okBtn_);
btnLayout->addWidget(cancelBtn_);
QFont font;
font.setWeight(65);
font.setPointSizeF(font.pointSizeF() * 1.2);
auto settingsLabel = new QLabel(tr("Settings").toUpper(), this);
settingsLabel->setFont(font);
auto notifOptionLayout_ = new QHBoxLayout;
notifOptionLayout_->setMargin(SettingsMargin);
auto notifLabel = new QLabel(tr("Notifications"), this);
auto notifCombo = new QComboBox(this);
notifCombo->setDisabled(true);
notifCombo->addItem(tr("Muted"));
notifCombo->addItem(tr("Mentions only"));
notifCombo->addItem(tr("All messages"));
notifLabel->setStyleSheet("font-size: 15px;");
notifOptionLayout_->addWidget(notifLabel);
auto notifOptionLayout_ = new QHBoxLayout;
notifOptionLayout_->setMargin(0);
notifOptionLayout_->addWidget(notifLabel, Qt::AlignBottom | Qt::AlignLeft);
notifOptionLayout_->addWidget(notifCombo, 0, Qt::AlignBottom | Qt::AlignRight);
auto accessOptionLayout = new QHBoxLayout();
accessOptionLayout->setMargin(SettingsMargin);
auto accessLabel = new QLabel(tr("Room access"), this);
accessCombo = new QComboBox(this);
accessCombo->addItem(tr("Anyone and guests"));
accessCombo->addItem(tr("Anyone"));
accessCombo->addItem(tr("Invited users"));
accessCombo->setDisabled(true);
accessLabel->setStyleSheet("font-size: 15px;");
if (info_.join_rule == JoinRule::Public) {
if (info_.guest_access) {
@ -238,24 +219,19 @@ RoomSettings::RoomSettings(const QString &room_id, QWidget *parent)
accessCombo->setCurrentIndex(2);
}
accessOptionLayout->addWidget(accessLabel);
accessOptionLayout->addWidget(accessCombo);
auto accessOptionLayout = new QHBoxLayout();
accessOptionLayout->setMargin(0);
accessOptionLayout->addWidget(accessLabel, Qt::AlignBottom | Qt::AlignLeft);
accessOptionLayout->addWidget(accessCombo, 0, Qt::AlignBottom | Qt::AlignRight);
auto encryptionOptionLayout = new QHBoxLayout;
encryptionOptionLayout->setMargin(SettingsMargin);
auto encryptionLabel = new QLabel(tr("Encryption"), this);
encryptionLabel->setStyleSheet("font-size: 15px;");
encryptionToggle_ = new Toggle(this);
connect(encryptionToggle_, &Toggle::toggled, this, [this](bool isOn) {
if (isOn)
return;
QFont font;
font.setPixelSize(conf::fontSize);
QMessageBox msgBox;
msgBox.setIcon(QMessageBox::Question);
msgBox.setFont(font);
msgBox.setWindowTitle(tr("End-to-End Encryption"));
msgBox.setText(tr(
"Encryption is currently experimental and things might break unexpectedly. <br>"
@ -279,7 +255,9 @@ RoomSettings::RoomSettings(const QString &room_id, QWidget *parent)
}
});
encryptionOptionLayout->addWidget(encryptionLabel);
auto encryptionOptionLayout = new QHBoxLayout;
encryptionOptionLayout->setMargin(0);
encryptionOptionLayout->addWidget(encryptionLabel, Qt::AlignBottom | Qt::AlignLeft);
encryptionOptionLayout->addWidget(encryptionToggle_, 0, Qt::AlignBottom | Qt::AlignRight);
// Disable encryption button.
@ -296,30 +274,37 @@ RoomSettings::RoomSettings(const QString &room_id, QWidget *parent)
encryptionLabel->hide();
}
QFont font;
font.setPixelSize(18);
font.setWeight(70);
avatar_ = new Avatar(this);
avatar_->setSize(128);
if (avatarImg_.isNull())
avatar_->setLetter(utils::firstChar(QString::fromStdString(info_.name)));
else
avatar_->setImage(avatarImg_);
auto menuLabel = new QLabel("Room Settings", this);
menuLabel->setFont(font);
auto roomNameLabel = new QLabel(QString::fromStdString(info_.name), this);
roomNameLabel->setFont(doubleFont);
topSection_ = new TopSection(info_, avatarImg_, this);
auto membersLabel =
new QLabel(QString::fromStdString("%1 members").arg(info_.member_count), this);
editLayout_ = new QHBoxLayout;
editLayout_->setMargin(0);
editLayout_->addWidget(topSection_);
auto textLayout = new QVBoxLayout;
textLayout->addWidget(roomNameLabel);
textLayout->addWidget(membersLabel);
textLayout->setAlignment(roomNameLabel, Qt::AlignCenter | Qt::AlignTop);
textLayout->setAlignment(membersLabel, Qt::AlignCenter | Qt::AlignTop);
textLayout->setSpacing(TEXT_SPACING);
textLayout->setMargin(0);
setupEditButton();
layout->addWidget(menuLabel);
layout->addLayout(editLayout_);
layout->addWidget(avatar_, Qt::AlignCenter | Qt::AlignTop);
layout->addLayout(textLayout);
layout->addLayout(btnLayout_);
layout->addWidget(settingsLabel, Qt::AlignLeft);
layout->addLayout(notifOptionLayout_);
layout->addLayout(accessOptionLayout);
layout->addLayout(encryptionOptionLayout);
layout->addLayout(btnLayout);
connect(cancelBtn_, &QPushButton::clicked, this, &RoomSettings::closing);
connect(okBtn_, &QPushButton::clicked, this, &RoomSettings::saveSettings);
layout->addStretch(1);
connect(this, &RoomSettings::enableEncryptionError, this, [this](const QString &msg) {
encryptionToggle_->setState(true);
@ -332,9 +317,12 @@ RoomSettings::RoomSettings(const QString &room_id, QWidget *parent)
void
RoomSettings::setupEditButton()
{
btnLayout_ = new QHBoxLayout;
btnLayout_->setSpacing(BUTTON_SPACING);
btnLayout_->setMargin(0);
try {
QSettings settings;
auto userId = settings.value("auth/user_id").toString().toStdString();
auto userId = utils::localUser().toStdString();
hasEditRights_ = cache::client()->hasEnoughPowerLevel(
{EventType::RoomName, EventType::RoomTopic}, room_id_.toStdString(), userId);
@ -342,20 +330,17 @@ RoomSettings::setupEditButton()
nhlog::db()->warn("lmdb error: {}", e.what());
}
constexpr int buttonSize = 36;
constexpr int iconSize = buttonSize / 2;
if (!hasEditRights_)
return;
QIcon editIcon;
editIcon.addFile(":/icons/icons/ui/edit.svg");
editIcon.addFile(":/icons/icons/ui/edit.png");
editFieldsBtn_ = new FlatButton(this);
editFieldsBtn_->setFixedSize(buttonSize, buttonSize);
editFieldsBtn_->setCornerRadius(iconSize);
editFieldsBtn_->setFixedSize(BUTTON_SIZE, BUTTON_SIZE);
editFieldsBtn_->setCornerRadius(BUTTON_RADIUS);
editFieldsBtn_->setIcon(editIcon);
editFieldsBtn_->setIcon(editIcon);
editFieldsBtn_->setIconSize(QSize(iconSize, iconSize));
editFieldsBtn_->setIconSize(QSize(BUTTON_RADIUS, BUTTON_RADIUS));
connect(editFieldsBtn_, &QPushButton::clicked, this, [this]() {
retrieveRoomInfo();
@ -364,12 +349,14 @@ RoomSettings::setupEditButton()
modal->setFields(QString::fromStdString(info_.name),
QString::fromStdString(info_.topic));
modal->show();
connect(modal, &EditModal::nameChanged, this, [this](const QString &newName) {
topSection_->setRoomName(newName);
connect(modal, &EditModal::nameChanged, this, [](const QString &newName) {
Q_UNUSED(newName);
});
});
editLayout_->addWidget(editFieldsBtn_, 0, Qt::AlignRight | Qt::AlignTop);
btnLayout_->addStretch(1);
btnLayout_->addWidget(editFieldsBtn_);
btnLayout_->addStretch(1);
}
void
@ -439,64 +426,3 @@ RoomSettings::paintEvent(QPaintEvent *)
QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}
void
TopSection::paintEvent(QPaintEvent *)
{
Painter p(this);
PainterHighQualityEnabler hq(p);
constexpr int textStartX = AvatarSize + 5 * Padding;
const int availableTextWidth = width() - textStartX;
constexpr int nameFont = 15;
constexpr int membersFont = 14;
p.save();
p.setPen(textColor());
p.translate(textStartX, 2 * Padding);
// Draw the name.
QFont font;
font.setPixelSize(membersFont);
const auto members = QString("%1 members").arg(info_.member_count);
font.setPixelSize(nameFont);
const auto name = QFontMetrics(font).elidedText(
QString::fromStdString(info_.name), Qt::ElideRight, availableTextWidth - 4 * Padding);
font.setWeight(60);
p.setFont(font);
p.drawTextLeft(0, 0, name);
// Draw the number of members
p.translate(0, QFontMetrics(p.font()).ascent() + 2 * Padding);
font.setPixelSize(membersFont);
font.setWeight(50);
p.setFont(font);
p.drawTextLeft(0, 0, members);
p.restore();
if (avatar_.isNull()) {
font.setPixelSize(AvatarSize / 2);
font.setWeight(60);
p.setFont(font);
p.translate(Padding, Padding);
p.drawLetterAvatar(utils::firstChar(name),
QColor("white"),
QColor("black"),
AvatarSize + Padding,
AvatarSize + Padding,
AvatarSize);
} else {
QRect avatarRegion(Padding, Padding, AvatarSize, AvatarSize);
QPainterPath pp;
pp.addEllipse(avatarRegion.center(), AvatarSize, AvatarSize);
p.setClipPath(pp);
p.drawPixmap(avatarRegion, avatar_);
}
}

36
src/dialogs/RoomSettings.h
Unescape View File

@ -49,32 +49,6 @@ private:
FlatButton *cancelBtn_;
};
class TopSection : public QWidget
{
Q_OBJECT
Q_PROPERTY(QColor textColor WRITE setTextColor READ textColor)
public:
TopSection(const RoomInfo &info, const QImage &img, QWidget *parent = nullptr);
QSize sizeHint() const override;
void setRoomName(const QString &name);
QColor textColor() const { return textColor_; }
void setTextColor(QColor &color) { textColor_ = color; }
protected:
void paintEvent(QPaintEvent *event) override;
private:
static constexpr int AvatarSize = 72;
static constexpr int Padding = 5;
RoomInfo info_;
QPixmap avatar_;
QColor textColor_;
};
namespace dialogs {
class RoomSettings : public QFrame
@ -102,14 +76,12 @@ private:
void retrieveRoomInfo();
void enableEncryption();
Avatar *avatar_;
//! Whether the user would be able to change the name or the topic of the room.
bool hasEditRights_ = true;
bool usesEncryption_ = false;
QHBoxLayout *editLayout_;
// Button section
FlatButton *okBtn_;
FlatButton *cancelBtn_;
QHBoxLayout *btnLayout_;
FlatButton *editFieldsBtn_;
@ -117,8 +89,6 @@ private:
QString room_id_;
QImage avatarImg_;
TopSection *topSection_;
QComboBox *accessCombo;
Toggle *encryptionToggle_;
};

Write Preview
Loading…
Cancel
Save