add possibility to align table-column-text, fix row actions styling

src/components/my-table.vue

@@ -1,45 +1,50 @@
 <template>
     <div class="cms_table">
+
+        <!-- Header -->
     	<div class="table_header">
-    		<!-- <div class="table_row"> -->
+            <div v-for="(col, i) in columns"
-	            <div v-for="(col, i) in columns"
+                    :class="['table_cell', {['sortable']: col.orderBy, [`align-${col.align}`]: col.align}]"
-                        :class="['table_cell', {['sortable']: col.orderBy}]"
+                    :key="i">
-                        :key="i">
+
-	                <div @click="orderBy(col.orderBy)" v-if="col.orderBy">
+                <!-- Column with sorting -->
-	                	{{ col.heading }}
+                <div @click="orderBy(col.orderBy)" v-if="col.orderBy">
-	                	<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
+                    {{ col.heading }}
-	                	<i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
+
-	                	<i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
+                	<i class="icon icon-angle-up" aria-hidden="true" v-if="currentOrderBy !== col.orderBy"></i>
-	                </div>
+                	<i class="icon icon-angle-circled-down" aria-hidden="true" v-else-if="currentOrderDesc"></i>
-	                <div v-else>{{ col.heading }}</div>
+                	<i class="icon icon-angle-circled-up" aria-hidden="true" v-else></i>
-	            </div>
+                </div>
-                <div class="table_cell cell_settings" v-if="actions.length"></div>
+
-            <!-- </div> -->
+                <!-- Column without sorting -->
+                <div v-else>{{ col.heading }}</div>
+            </div>
+            <div class="table_cell cell_settings" v-if="actions.length"></div>
     	</div>
+
+        <!-- Content -->
     	<div class="table_content" is="transition-group" name="list">
             <div class="table_row" v-for="(row, ri) in rows" :key="ri">
-                <div class="table_cell" v-for="(col, ci) in columns" :key="ci + 'c'">
+
-                    <span v-if="col.prop">{{ getProp(row, col.prop) }}</span>
+                <!-- Row content -->
+                <div v-for="(col, ci) in columns"
+                    :class="['table_cell', {[`align-${col.align}`]: col.align}]"
+                    :key="ci + 'c'">
+
+                    <span v-if="col.prop" :title="getProp(row, col.prop)">{{ getProp(row, col.prop) }}</span>
                     <span v-else-if="col.render">{{ col.render(row) }}</span>
                 </div>
 
+                <!-- Row actions -->
     			<div class="table_cell cell_settings" v-if="actions.length" ref="row_actions">
-					<div title="Open actions" class="actions_btn" @click="openActions">
-                        <i class="icon icon-cog" aria-hidden="true"></i>
-                    </div>
-
 					<ul class="actions_container">
-                        <li v-for="(a, i) in actions">
+                        <li v-for="(a, i) in actions" :title="a.title" @click="a.action(row)">
-                            <div :title="a.title" @click="a.action(row)">
+                            <i :class="['icon', a.icon]"></i>
-                                <i :class="['icon', a.icon]"></i>
-                            </div>
-                        </li>
-                        <li>
-                            <div title="Close actions" @click="closeActions">
-                                <i class="icon icon-cog"></i>
-                            </div>
                         </li>
 					</ul>
+                    <div title="Open actions" class="actions_btn" @click="toggleActions">
+                        <i class="icon icon-cog" aria-hidden="true"></i>
+                    </div>
 				</div>
             </div>
     	</div>
@@ -97,17 +102,13 @@
 				});
 				return val;
 			},
-            openActions(event) {
+            toggleActions(event) {
                 const parent = event.currentTarget.parentNode;
                 this.$refs.row_actions.forEach((item) => {
                     if (item !== parent)
                         item.classList.remove("open")
                 });
-                parent.classList.add("open");
+                parent.classList.toggle("open");
-            },
-            closeActions(event) {
-                const parent = event.currentTarget.parentNode.parentNode.parentNode;
-                parent.classList.remove("open");
             }
 		}
 	}
@@ -115,6 +116,7 @@
 
 <style lang="less">
 	@import "../mixins";
+
 	.list-item {
 	  display: inline-block;
 	  margin-right: 10px;
@@ -166,19 +168,19 @@
             text-overflow: ellipsis;
             white-space: nowrap;
 
-            &.sortable{
+            &.sortable:hover{cursor: pointer;}
-                &:hover{
+
-                    cursor: pointer;
+            &.align-center{text-align: center;}
-                }
+            &.align-left{text-align: left;}
-            }
+            &.align-right{text-align: right;}
         }
 
-		/*.cell_checkbox {width:40px;}
-		.cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
-		.cell_title {position:relative;}
-		.cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}*/
-
 		/* === Other cell types === */
+        /*.cell_checkbox {width:40px;}
+        .cell_image {width:120px; line-height:0;} .cell_image img {width:100%;}
+        .cell_title {position:relative;}
+        .cell_title a {color:#000;} .cell_title a:hover {color:#28b78d;}*/
+
 		/*.cell_date {}
 		.cell_author {}
 		.cell_category {}
@@ -205,11 +207,16 @@
 		.cell_settings {
             .clearfix();
             position: relative;
-            width: 40px;
+            width: 22.4px + 2*15px;
             text-align: right;
             overflow: visible;
 
+            .icon {
+                font-size: 16px;
+            }
+
             .actions_btn{
+                position: relative;
                 z-index: 20;
                 &:hover{
                     cursor: pointer;
@@ -217,53 +224,45 @@
                 }
             }
 
-            .icon {
-                font-size: 16px;
-            }
-
             .actions_container {
                 position: absolute;
-                z-index: -1;
-                top: -5px;
-                right: 0;
                 padding: 5px 10px;
+                top: 50%;
+                margin-top: -16px;
+                right: 7px;
                 opacity: 0;
-                overflow: hidden;
+                pointer-events: none;
+                transition: opacity 0.3s;
+
+                color: white;
+                background: @cms_brand_primary;
                 border-radius: 20px;
-                background: @cms_bg_lighter;
-                transition: all 0.3s;
-                white-space: nowrap;
 
                 li {
                     display: inline-block;
+                    padding-right: 5px;
 
                     &:last-child{
-                        border-left: 1px solid @text_color;
+                        border-right: 1px solid white;
-                        padding-left: 5px;
+                        padding-right: 10px;
+                        margin-right: 26px;
                         .icon:before{
                             margin-right: 0;
                         }
                     }
                 }
 
-                li+li{
+                .icon:hover{
-                    margin-left: 5px;
+                    cursor: pointer;
-                }
-
-                .icon {
                     color: @text_color;
-                    &:hover{
-                        cursor: pointer;
-                        color: @cms_brand_primary;
-                    }
                 }
             }
 
             &.open {
-                .actions_container{
+                .actions_btn {color: white; &:hover{color: black;}}
+                .actions_container {
+                    z-index: 10;
                     opacity: 1;
-                    z-index: 1;
-                    transition: all 0.3s;
                 }
             }
         }

src/variables.less

@@ -5,9 +5,10 @@
 
 @text_color: black;
 
+@gray_dark: #152129;
+
 @cms_bg_lighter: #e0e0e0;
 @cms_bg_light: #1a2e3b;
-@cms_dark_border: #152129;
 
 @cms_brand_primary: #28b78d;
 @cms_brand_secondary: #152129;

src/views/forms/login.vue

@@ -151,7 +151,7 @@ export default {
         border-color: transparent;
 
         &:focus {
-            border: solid 1px @cms_dark_border;
+            border: solid 1px @gray_dark;
             background: white;
         }
     }

src/views/lists/userlist.vue

@@ -38,12 +38,12 @@ export default {
                 heading: 'ID',
                 prop: 'ID',
                 orderBy: 'id',
-                align: 'left'
+                align: 'right'
             }, {
                 heading: 'Benutzername',
                 prop: 'Username',
                 orderBy: 'username',
-                align: 'center'
+                align: 'left'
             }, {
                 heading: 'Firma',
                 prop: 'Company',