Various improvements (#325)

* Fix missing translation in roadmap
* Fix resizing of textareas
* Increase line height for small muted texts
* Improve collapsed board list style
* Fix switch on top of header (z-index)
* Fix margin inconsistencies in site settings
* Add user count to site settings

app/assets/stylesheets/common/_custom_texts.scss

@@ -33,7 +33,6 @@
     .m-0;
   
   font-size: smaller;
-  line-height: 95%;
 }
 
 .uppercaseText {

app/assets/stylesheets/common/_header.scss

@@ -85,7 +85,15 @@
     }
   }
 
+  .boards-dropdown {
+    .dropdown-item {
+      padding-top: 0.75rem;
+      padding-bottom: 0.75rem;
+    }
+  }
+
   .dropdown-item:active {
+    color: white !important;
     background-color: var(--primary-color);
   }
 }

app/assets/stylesheets/common/_index.scss

@@ -221,6 +221,8 @@ body {
   & > input:focus ~ label::before {
     border-color: var(--primary-color-dark) !important;
   }
+
+  z-index: auto;
 }
 
 .selectPicker {

app/assets/stylesheets/components/Board.scss

@@ -25,6 +25,12 @@
 
     .newPostForm {
       @extend .my-2;
+
+      #postDescription {
+        height: 100px;
+        min-height: 100px;
+        resize: vertical;
+      }
     }
   }
 

app/assets/stylesheets/components/Comments.scss

@@ -9,11 +9,11 @@
       .mr-2;
 
     height: 80px;
+    min-height: 80px;
+    resize: vertical;
     
     border: thin solid grey;
     border-radius: 4px;
-
-    resize: none;
   }
 
   .newCommentForm {

app/assets/stylesheets/components/Post.scss

@@ -149,6 +149,12 @@
         @extend .my-3;
       }
 
+      .postDescription {
+        height: 150px;
+        min-height: 150px;
+        resize: vertical;
+      }
+
       .postEditFormButtons {
         @extend .d-flex, .justify-content-end;
       }

app/assets/stylesheets/components/SiteSettings/Appearance/index.scss

@@ -1,4 +1,6 @@
 #customCss {
   width: 100%;
   height: 300px;
+  min-height: 100px;
+  resize: vertical;
 }

app/assets/stylesheets/components/SiteSettings/Authentication/index.scss

@@ -1,6 +1,4 @@
 .authenticationIndexPage {
-  h2 { @extend .mb-3; }
-
   .oauthProvidersTitle {
     @extend .d-flex;
 

app/assets/stylesheets/components/SiteSettings/Boards/index.scss

@@ -44,4 +44,10 @@
 
     column-gap: 8px;
   }
+
+  .boardDescriptionTextArea {
+    height: 80px;
+    min-height: 80px;
+    resize: vertical;
+  }
 }

app/assets/stylesheets/components/SiteSettings/Users/index.scss

@@ -1,3 +1,7 @@
+.userCount {
+  text-transform: lowercase;
+}
+
 ul.usersList {
   @extend
     .pl-1;

app/controllers/users_controller.rb

@@ -6,7 +6,7 @@ class UsersController < ApplicationController
 
     @users = User
       .all
-      .order(role: :desc)
+      .order(role: :desc, created_at: :desc)
 
     render json: @users
   end

app/javascript/components/Comments/CommentEditForm.tsx

@@ -58,6 +58,7 @@ class CommentEditForm extends React.Component<Props, State> {
         <textarea
           value={body}
           onChange={e => this.handleCommentBodyChange(e.target.value)}
+          rows={3}
           className="commentForm"
         />
 

app/javascript/components/Roadmap/PostList.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import I18n from 'i18n-js';
 
 import PostListItem from './PostListItem';
 import { CenteredMutedText } from '../common/CustomTexts';
@@ -25,7 +26,7 @@ const PostList = ({ posts, boards }: Props) => (
           />
         ))
       :
-        <CenteredMutedText>There are no posts that have this status.</CenteredMutedText>
+        <CenteredMutedText>{ I18n.t('board.posts_list.empty') }</CenteredMutedText>
     }
   </div>
 );

app/javascript/components/SiteSettings/Boards/BoardForm.tsx

@@ -98,7 +98,7 @@ const BoardForm = ({
       <textarea
         {...register('description')}
         placeholder={I18n.t('site_settings.boards.form.description')}
-        className="formControl"
+        className="boardDescriptionTextArea formControl"
       />
 
       {mode === 'update' && (

app/javascript/components/SiteSettings/Users/UsersSiteSettingsP.tsx

@@ -6,7 +6,7 @@ import Box from '../../common/Box';
 import SiteSettingsInfoBox from '../../common/SiteSettingsInfoBox';
 
 import { UsersState } from '../../../reducers/usersReducer';
-import { UserRoles, USER_STATUS_ACTIVE, USER_STATUS_BLOCKED } from '../../../interfaces/IUser';
+import { UserRoles, USER_STATUS_ACTIVE, USER_STATUS_BLOCKED, USER_STATUS_DELETED } from '../../../interfaces/IUser';
 import HttpStatus from '../../../constants/http_status';
 import Spinner from '../../common/Spinner';
 
@@ -73,11 +73,24 @@ class UsersSiteSettingsP extends React.Component<Props> {
       currentUserEmail,
     } = this.props;
 
+    const numberOfUsers = users.items.length;
+    const numberOfActiveUsers = users.items.filter(u => u.status === USER_STATUS_ACTIVE).length;
+    const numberOfBlockedUsers = users.items.filter(u => u.status === USER_STATUS_BLOCKED).length;
+    const numberOfDeletedUsers = users.items.filter(u => u.status === USER_STATUS_DELETED).length;
+
     return (
       <>
         <Box>
           <h2>{ I18n.t('site_settings.users.title') }</h2>
 
+          <p className="userCount">
+            {numberOfUsers} {I18n.t('activerecord.models.user', {count: users.items.length})}
+            &nbsp;(
+            {numberOfActiveUsers} {I18n.t('site_settings.users.status_active')},&nbsp;
+            {numberOfBlockedUsers} {I18n.t('site_settings.users.status_blocked')},&nbsp;
+            {numberOfDeletedUsers} {I18n.t('site_settings.users.status_deleted')})
+          </p>
+
           <ul className="usersList">
             {
               users.areLoading === false ?

app/views/layouts/_boards_nav_section.html.erb

@@ -3,10 +3,10 @@
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       Boards
     </a>
-    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+    <ul class="dropdown-menu boards-dropdown" aria-labelledby="navbarDropdown">
       <% boards.each do |board| %>
         <li>
-          <%= link_to board.name, board_path(board), class: 'dropdown-item py-2' %>
+          <%= link_to board.name, board_path(board), class: 'dropdown-item' %>
         </li>
       <% end %>
     </ul>