diff --git a/assets/fonts/config.json b/assets/fonts/config.json index 97ecf73..1875bba 100644 --- a/assets/fonts/config.json +++ b/assets/fonts/config.json @@ -302,6 +302,48 @@ "code": 61702, "src": "fontawesome" }, + { + "uid": "e99461abfef3923546da8d745372c995", + "css": "cog", + "code": 59395, + "src": "fontawesome" + }, + { + "uid": "d35a1d35efeb784d1dc9ac18b9b6c2b6", + "css": "pencil", + "code": 59396, + "src": "fontawesome" + }, + { + "uid": "c8585e1e5b0467f28b70bce765d5840c", + "css": "docs", + "code": 61637, + "src": "fontawesome" + }, + { + "uid": "7fd683b2c518ceb9e5fa6757f2276faa", + "css": "eye-off", + "code": 59397, + "src": "fontawesome" + }, + { + "uid": "5211af474d3a9848f67f945e2ccaf143", + "css": "cancel", + "code": 59398, + "src": "fontawesome" + }, + { + "uid": "12f4ece88e46abd864e40b35e05b11cd", + "css": "ok", + "code": 59399, + "src": "fontawesome" + }, + { + "uid": "f48ae54adfb27d8ada53d0fd9e34ee10", + "css": "trash-empty", + "code": 59400, + "src": "fontawesome" + }, { "uid": "efb8e2c22ada5ce5b02631e8b4be473d", "css": "ion-alert-circled", diff --git a/assets/fonts/iconfont.eot b/assets/fonts/iconfont.eot index 6a6d86a..9e5d950 100644 Binary files a/assets/fonts/iconfont.eot and b/assets/fonts/iconfont.eot differ diff --git a/assets/fonts/iconfont.svg b/assets/fonts/iconfont.svg index d7fc15f..fbc1d30 100644 --- a/assets/fonts/iconfont.svg +++ b/assets/fonts/iconfont.svg @@ -12,6 +12,20 @@ + + + + + + + + + + + + + + diff --git a/assets/fonts/iconfont.ttf b/assets/fonts/iconfont.ttf index 82219cf..86f2b92 100644 Binary files a/assets/fonts/iconfont.ttf and b/assets/fonts/iconfont.ttf differ diff --git a/assets/fonts/iconfont.woff b/assets/fonts/iconfont.woff index cc6906a..2518b20 100644 Binary files a/assets/fonts/iconfont.woff and b/assets/fonts/iconfont.woff differ diff --git a/assets/fonts/iconfont.woff2 b/assets/fonts/iconfont.woff2 index 692216c..cd0f995 100644 Binary files a/assets/fonts/iconfont.woff2 and b/assets/fonts/iconfont.woff2 differ diff --git a/src/components/my-table.vue b/src/components/my-table.vue index 2057543..9326b0d 100644 --- a/src/components/my-table.vue +++ b/src/components/my-table.vue @@ -11,6 +11,7 @@
{{ col.heading }}
+
@@ -19,6 +20,25 @@
{{ getProp(row, col.prop) }}
{{ col.render(row) }}
+ +
+
+ +
+ +
    +
  • +
    + +
    +
    • +
  • +
    + +
    +
    • +
+
@@ -28,11 +48,11 @@ export default { name: 'My-Table', props: { - currentOrderBy: { - type: String - }, - currentOrderDesc: { - type: Boolean + actions: { + type: Array, + default() { + return [ ]; + } }, columns: { type: Array, @@ -45,6 +65,12 @@ default() { return [ ]; } + }, + currentOrderBy: { + type: String + }, + currentOrderDesc: { + type: Boolean } }, data() { @@ -68,7 +94,19 @@ } }); return val; - } + }, + openActions(event) { + const parent = event.currentTarget.parentNode; + this.$refs.row_actions.forEach((item) => { + if (item !== parent) + item.classList.remove("open") + }); + parent.classList.add("open"); + }, + closeActions(event) { + const parent = event.currentTarget.parentNode.parentNode.parentNode; + parent.classList.remove("open"); + } } } @@ -150,44 +188,69 @@ */ /* === Cell settings === */ - /*.cell_settings {text-align:right; width:150px; position:relative; right:0px;} - .cell_settings a {color:#000; list-style-type:none;} - .cell_settings .fa-cog {font-size:20px;} - .cell_settings_inner { - position:absolute; - width:205px; height:40px; - top:50%; - right:-3px; - margin-top:-21px; - border-radius:20px; - background:#e0e0e0; - padding:0px 10px; - z-index:-1; - overflow:hidden; - opacity:0; - -webkit-opacity:0; - -moz-opacity:0; - transition:all 0.3s; - } - .cell_settings_inner_container {float:right;} - .cell_settings_inner_section {float:left; border-right:solid 1px #999; padding:0px 10px;} - .cell_settings_inner_section_last {border:none; padding-right:3px;} - .cell_settings_inner_section ul {list-style-type:none;} - .cell_settings_inner_section ul li {float:left; padding-right:7px;} - .cell_settings_inner_section_last ul li {padding:0px;} - .cell_settings_inner_section ul li a {color:#000;} - .cell_settings_inner_section ul li .fa {line-height:40px; font-size:20px;} + .cell_settings { + .clearfix(); + position:relative; + width: 40px; + text-align: right; - .cell_settings_click, .cell_settings_close {cursor:pointer;} - .cell_settings a:hover, .cell_settings_click:hover {color:#28b78d!important;} + .actions_btn{ + z-index: 20; + &:hover{ + cursor: pointer; + color: @cms_brand_primary; + } + } - .cell_settings_inner_open { - opacity:1; - -webkit-opacity:1; - -moz-opacity:1; - width:205px; - z-index:600; - transition:all 0.3s; - }*/ + .icon { + font-size: 16px; + } + + .actions_container { + position: absolute; + z-index: -1; + top: -5px; + right: 0; + padding: 5px 10px; + opacity: 0; + overflow: hidden; + border-radius: 20px; + background: @cms_bg_lighter; + transition: all 0.3s; + white-space: nowrap; + + li { + display: inline-block; + + &:last-child{ + border-left: 1px solid @text_color; + padding-left: 5px; + .icon:before{ + margin-right: 0; + } + } + } + + li+li{ + margin-left: 5px; + } + + .icon { + color: @text_color; + &:hover{ + cursor: pointer; + color: @cms_brand_primary; + } + } + } + + &.open { + .actions_container{ + opacity: 1; + z-index: 1; + transition: all 0.3s; + } + } + } } diff --git a/src/components/scroll-table.vue b/src/components/scroll-table.vue index c2830fa..73b2e00 100644 --- a/src/components/scroll-table.vue +++ b/src/components/scroll-table.vue @@ -1,7 +1,7 @@