Improved motion state dropdown element.

openslides/core/static/css/app.css

@@ -51,7 +51,13 @@ h4 {
     font-size: 18px;
     color: #222;
 }
-
+.heading a {
+    color: #444;
+}
+.heading a:hover {
+    color: #2b6883;
+    text-decoration: none;
+}
 
 p {
     padding-bottom: 14px;
@@ -284,11 +290,6 @@ img {
     color: #444;
 }
 
-.col1 .meta h3 {
-    padding-bottom: 0;
-    margin-bottom: 5px;
-}
-
 .col1 .details {
     padding: 20px;
     width: auto;
@@ -317,14 +318,25 @@ img {
     width: 70px;
 }
 
-#content .col2 h4, .col1 .meta h3 {
+#content .col2 h4 {
     font-size: 22px;
     line-height: 24px;
     font-family: 'Roboto Condensed Light';
     font-weight: 300;
     color: #444;
 }
-
+#content .col1 .meta .heading, #content .col1 .meta h3 {
+    font-size: 22px;
+    line-height: 24px;
+    font-weight: 300;
+    color: #444;
+    padding-bottom: 0;
+    margin-top: 20px;
+    margin-bottom: 5px;
+}
+#content .col1 .meta .heading .drop-down-name, #content .col1 .meta h3 {
+    font-family: 'Roboto Condensed Light';
+}
 
 #content .col2 a:hover h4 {
     text-decoration: none;

openslides/motions/static/js/motions/base.js

@@ -248,6 +248,8 @@ angular.module('OpenSlidesApp.motions', ['OpenSlidesApp.users'])
                             return operator.hasPerms('motions.can_manage');
                         case 'reset_state':
                             return operator.hasPerms('motions.can_manage');
+                        case 'can_manage':
+                            return operator.hasPerms('motions.can_manage');
                         default:
                             return false;
                     }

openslides/motions/static/templates/motions/motion-detail.html

@@ -90,22 +90,27 @@
           </span>
 
           <!-- State -->
-          <h3 translate>State</h3>
+          <h3 ng-if="!motion.isAllowed('change_state')" class="heading" translate>State</h3>
-          <span class="label" ng-class="'label-'+motion.state.css_class">
+          <div ng-if="motion.isAllowed('change_state')" class="heading">
+            <span uib-dropdown>
+              <a href id="state-dropdown" class="drop-down-name" uib-dropdown-toggle>
+                <translate>State</translate>
+                <i class="fa fa-cog"></i>
+              </a>
+              <ul uib-dropdown-menu aria-labelledby="state-dropdown">
+                <li ng-repeat="state in motion.state.getNextStates()">
+                  <a href ng-click="updateState(state.id)">{{ state.action_word | translate }}</a>
+                <li class="divider" ng-if="motion.state.getNextStates().length">
+                <li>
+                  <a href ng-if="motion.isAllowed('reset_state')" ng-click="reset_state()">
+                    <i class="fa fa-exclamation-triangle"></i>
+                    <translate>Reset state</translate>
+                  </a>
+              </ul>
+            </span>
+          </div>
+          <div class="label" ng-class="'label-'+motion.state.css_class">
             {{ motion.state.name | translate }}
-          </span>
-          <div ng-if="motion.isAllowed('change_state')" class="spacer">
-            <select ng-if="motion.state.getNextStates().length > 0" ng-model="stateSelect" class="form-control" ng-change="updateState(stateSelect)">
-              <option value="" translate>--- Set next state ---</option>
-              <option ng-repeat="state in motion.state.getNextStates()" value="{{ state.id }}">
-                {{ state.action_word | translate }}
-              </option>
-            </select>
-            <button ng-if="motion.isAllowed('reset_state')" ng-click="reset_state()"
-                class="btn btn-danger btn-xs spacer">
-              <i class="fa fa-exclamation-triangle"></i>
-              <translate>Reset state</translate>
-            </button>
           </div>
       </div>
       <div class="col-md-4">