Refactor the room settings menu to look like the user profile

resources/icons/ui/edit.svg

@@ -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>

resources/icons/ui/world.svg

@@ -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>

resources/res.qrc

@@ -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>

src/CommunitiesListItem.cpp

@@ -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

src/dialogs/RoomSettings.cpp

@@ -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"));
+        topicInput_->setLabel(tr("Topic").toUpper());
-
-        QFont font;
-        font.setPixelSize(conf::modals::errorFont);
 
         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);
+
+        setMinimumWidth(QFontMetrics(doubleFont).averageCharWidth() * 30 - 2 * WIDGET_MARGIN);
+        setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum);
 
         auto layout = new QVBoxLayout(this);
-        layout->setSpacing(15);
+        layout->setSpacing(WIDGET_SPACING);
-        layout->setMargin(20);
+        layout->setContentsMargins(WIDGET_MARGIN, TOP_WIDGET_MARGIN, WIDGET_MARGIN, WIDGET_MARGIN);
 
-        okBtn_ = new FlatButton(tr("OK"), this);
+        QFont font;
-        okBtn_->setFontSize(conf::btn::fontSize);
+        font.setWeight(65);
-        cancelBtn_ = new FlatButton(tr("CANCEL"), this);
+        font.setPointSizeF(font.pointSizeF() * 1.2);
-        cancelBtn_->setFontSize(conf::btn::fontSize);
+        auto settingsLabel = new QLabel(tr("Settings").toUpper(), this);
+        settingsLabel->setFont(font);
 
-        auto btnLayout = new QHBoxLayout();
-        btnLayout->setSpacing(0);
-        btnLayout->setMargin(0);
-        btnLayout->addStretch(1);
-        btnLayout->addWidget(okBtn_);
-        btnLayout->addWidget(cancelBtn_);
-
-        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);
+        auto accessOptionLayout = new QHBoxLayout();
-        accessOptionLayout->addWidget(accessCombo);
+        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;
+        avatar_ = new Avatar(this);
-        font.setPixelSize(18);
+        avatar_->setSize(128);
-        font.setWeight(70);
+        if (avatarImg_.isNull())
+                avatar_->setLetter(utils::firstChar(QString::fromStdString(info_.name)));
+        else
+                avatar_->setImage(avatarImg_);
 
-        auto menuLabel = new QLabel("Room Settings", this);
+        auto roomNameLabel = new QLabel(QString::fromStdString(info_.name), this);
-        menuLabel->setFont(font);
+        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;
+        auto textLayout = new QVBoxLayout;
-        editLayout_->setMargin(0);
+        textLayout->addWidget(roomNameLabel);
-        editLayout_->addWidget(topSection_);
+        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->addWidget(avatar_, Qt::AlignCenter | Qt::AlignTop);
-        layout->addLayout(editLayout_);
+        layout->addLayout(textLayout);
+        layout->addLayout(btnLayout_);
+        layout->addWidget(settingsLabel, Qt::AlignLeft);
         layout->addLayout(notifOptionLayout_);
         layout->addLayout(accessOptionLayout);
         layout->addLayout(encryptionOptionLayout);
-        layout->addLayout(btnLayout);
+        layout->addStretch(1);
-
-        connect(cancelBtn_, &QPushButton::clicked, this, &RoomSettings::closing);
-        connect(okBtn_, &QPushButton::clicked, this, &RoomSettings::saveSettings);
 
         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 = utils::localUser().toStdString();
-                auto userId = settings.value("auth/user_id").toString().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_->setFixedSize(BUTTON_SIZE, BUTTON_SIZE);
-        editFieldsBtn_->setCornerRadius(iconSize);
+        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) {
+                connect(modal, &EditModal::nameChanged, this, [](const QString &newName) {
-                        topSection_->setRoomName(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_);
-        }
-}

src/dialogs/RoomSettings.h

@@ -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_;
+        QHBoxLayout *btnLayout_;
-
-        // Button section
-        FlatButton *okBtn_;
-        FlatButton *cancelBtn_;
 
         FlatButton *editFieldsBtn_;
 
@@ -117,8 +89,6 @@ private:
         QString room_id_;
         QImage avatarImg_;
 
-        TopSection *topSection_;
-
         QComboBox *accessCombo;
         Toggle *encryptionToggle_;
 };