From 97eea3a7f040a70f5bfbb33e28246a445d74f410 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <mail@davidbenque.com>
Date: Fri, 4 Jun 2021 13:14:11 +0100
Subject: [PATCH] Layout of inline add menu

- one one line and left aligned
- using large cptools icons
---
 www/form/app-form.less | 20 ++++++++++++++++----
 www/form/inner.js      |  2 +-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/www/form/app-form.less b/www/form/app-form.less
index 484033c90..65672ec26 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -13,6 +13,7 @@
     flex-flow: column;
     font: @colortheme_app-font;
     color: @cryptpad_text_col;
+    background-color: @cp_app-bg;
 
     #cp-app-form-editor {
         flex: 1;
@@ -84,7 +85,7 @@
 
                 .cp-form-creator-add-inline {
                     display: flex;
-                    flex-flow: column;
+                    flex-flow: row;
                     align-items: center;
                     margin-bottom: 20px;
                     button {
@@ -94,6 +95,8 @@
                         }
                     }
                     .cp-form-creator-inline-add {
+                        font-size: 25px;
+                        margin-right: 30px;
                         .add-close { display: none; }
                         &.displayed {
                             .add-close { display: inline; }
@@ -103,12 +106,21 @@
                     .cp-form-creator-control-inline {
                         display: flex;
                         justify-content: space-around;
-                        margin-top: 10px;
                         button:not(:last-child) {
                             margin-right: 5px;
                         }
-                        .cp-form-creator-types:first-child {
-                            margin-right: 50px;
+                        .cp-form-creator-types {
+                            button {
+                                border: 0px;
+                                //padding-bottom: 3px;
+                                i {
+                                    font-size: 35px;
+                                    line-height: 35px;
+                                }
+                            }
+                            &:first-child {
+                                margin-right: 50px;
+                            }
                         }
                     }
                 }
diff --git a/www/form/inner.js b/www/form/inner.js
index 1baecd238..6a866c4e0 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -1547,7 +1547,7 @@ define([
             var full = !uid;
             var idx = content.order.indexOf(uid);
             var addControl = function (type) {
-                var btn = h('button.btn.small', {
+                var btn = h('button.btn.btn-default', {
                     title: full ? undefined : Messages['form_type_'+type]
                 }, [
                     (TYPES[type] || STATIC_TYPES[type]).icon.cloneNode(),