[TASK] Add widget title and drapdrop styling + icons #41

TYPO3-Initiatives · Oct 8, 2019 · ff3df41 · ff3df41
1 parent 8963171
commit ff3df41
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 96 deletions.
diff --git a/Resources/Private/Styles/Base/_dashboardButton.scss b/Resources/Private/Styles/Base/_dashboardButton.scss
@@ -1,5 +1,6 @@
 .dashBoardButton-addItem {
 	display: inline-block;
+	float: right;
 	padding: 20px;
 	background-color: #868e96;
 	color: #fff;

diff --git a/Resources/Private/Styles/Base/_dashboardWidget.scss b/Resources/Private/Styles/Base/_dashboardWidget.scss
@@ -1,4 +1,3 @@
 .dashboard-widget {
-	display: flex;
 	height: 100%;
 }
diff --git a/Resources/Private/Styles/Base/_widget.scss b/Resources/Private/Styles/Base/_widget.scss
@@ -4,19 +4,24 @@
 	right: 0;
 	bottom: 0;
 	left: 0;
-	padding: 30px;
 	background-color: #fff;
 	box-shadow: 0 5px 10px 0 rgba(#000, 0.05);
 	color: #333;
 
 	&:hover {
-		> .widget-remove,
-		> .widget-move {
+		.widget-remove,
+		.widget-move {
 			display: block;
 		}
 	}
 }
 
+.widget-content-main {
+	width: 100%;
+	height: 100%;
+	padding: 20px 30px;
+}
+
 .widget-waiting {
 	position: absolute;
 	top: 50%;
@@ -37,52 +42,45 @@
 	text-align: left;
 }
 
-.widget-remove {
+.widget-actions {
 	position: absolute;
-	top: 5px;
-	right: 5px;
-	display: none;
-	width: 30px;
-	height: 30px;
-	line-height: 30px;
-	font-weight: 400;
-	font-size: 20px;
-	color: #868e96;
-	text-align: center;
-	cursor: pointer;
-
-	&:hover,
-	&:focus {
-		color: #f49702;
-	}
+	top: 20px;
+	right: 20px;
+	display: flex;
 }
 
+.widget-remove,
 .widget-move {
-	position: absolute;
-	top: 5px;
-	right: 35px;
+	position: relative;
 	display: none;
-	width: 30px;
-	height: 30px;
-	line-height: 30px;
-	font-weight: 400;
-	font-size: 20px;
+	width: 15px;
+	height: 15px;
 	color: #868e96;
 	text-align: center;
-	cursor: move;
 
 	&:hover,
 	&:focus {
 		color: #f49702;
 	}
+
+	.icon {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.widget-move {
+	margin-right: 10px;
+	cursor: grab;
 }
 
 .widget-content {
 	height: 100%;
 }
 
 .widget-content-title {
-	margin-bottom: 20px;
+	padding: 15px 30px;
+	border-bottom: 1px solid #ededed;
 	font-weight: 900;
 	font-size: 16px;
 }

diff --git a/Resources/Private/Styles/Dashboard.scss b/Resources/Private/Styles/Dashboard.scss
@@ -1 +1,2 @@
 @import "temp_base";
+@import "temp_utilities";
diff --git a/Resources/Private/Styles/Utilities/_flex.scss b/Resources/Private/Styles/Utilities/_flex.scss
@@ -0,0 +1,3 @@
+.u-flex {
+	display: flex;
+}
diff --git a/Resources/Private/Templates/Dashboard/Main.html b/Resources/Private/Templates/Dashboard/Main.html
@@ -1,13 +1,17 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers" data-namespace-typo3-fluid="true">
-<h1><f:translate key="title" extensionName="dashboard" /></h1>
+<h1>
+    <f:translate key="title" extensionName="dashboard"/>
+</h1>
 
 <div class="dashboardTabs">
     <f:for each="{availableDashboards}" as="dashboardConfig" key="dashboardKey">
         <f:if condition="{dashboardKey} == {currentDashboard}">
-            <f:then><f:variable name="activeClass" value="dashboardTab--active" /></f:then>
+            <f:then>
+                <f:variable name="activeClass" value="dashboardTab--active"/>
+            </f:then>
         </f:if>
         <f:be.link route="dashboard" parameters="{action: 'setActiveDashboard', currentDashboard: dashboardKey}" class="dashboardTab {activeClass}">
-            <f:translate key="{dashboardConfig.label}" />
+            <f:translate key="{dashboardConfig.label}"/>
         </f:be.link>
     </f:for>
 </div>
@@ -18,11 +22,17 @@ <h1><f:translate key="title" extensionName="dashboard" /></h1>
             <div class="dashboard-item-content">
                 <div class="widget">
                     <div class="widget-waiting">
-                        <core:icon identifier="spinner-circle" size="large" />
+                        <core:icon identifier="spinner-circle" size="large"/>
                     </div>
                     <div class="widget-content hide"></div>
-                    <div class="widget-move"><core:icon identifier="dragdrop"></core:icon></div>
-                    <f:be.link class="widget-remove" route="dashboard" parameters="{action: 'removeWidget', widgetHash: widgetHash}" data="{title: '{f:translate(key: \'widget.remove.confirm.title\', extensionName: \'dashboard\')}', message: '{f:translate(key: \'widget.remove.confirm.message\', extensionName: \'dashboard\')}', button-ok-text: '{f:translate(key: \'widget.remove.button.ok\', extensionName: \'dashboard\')}', button-close-text: '{f:translate(key: \'widget.remove.button.close\', extensionName: \'dashboard\')}'}"><i class="fa fa-times"></i></f:be.link>
+                    <div class="widget-actions">
+                        <div class="widget-move">
+                            <core:icon identifier="dragdrop" alternativeMarkupIdentifier="inline"/>
+                        </div>
+                        <f:be.link class="widget-remove" route="dashboard" parameters="{action: 'removeWidget', widgetHash: widgetHash}" data="{title: '{f:translate(key: \'widget.remove.confirm.title\', extensionName: \'dashboard\')}', message: '{f:translate(key: \'widget.remove.confirm.message\', extensionName: \'dashboard\')}', button-ok-text: '{f:translate(key: \'widget.remove.button.ok\', extensionName: \'dashboard\')}', button-close-text: '{f:translate(key: \'widget.remove.button.close\', extensionName: \'dashboard\')}'}">
+                            <core:icon identifier="timesCircle" alternativeMarkupIdentifier="inline"/>
+                        </f:be.link>
+                    </div>
                 </div>
             </div>
         </div>
@@ -31,15 +41,17 @@ <h1><f:translate key="title" extensionName="dashboard" /></h1>
 
 <div class="dashboard-add-item">
     <a href="{addWidgetUri}" class="js-dashboard-addWidget dashBoardButton-addItem" data-modal-title="{f:translate(key: 'widget.add', extensionName: 'dashboard')}" data-button-close-text="{f:translate(key: 'widget.add.button.close', extensionName: 'dashboard')}" data-button-ok-text="{f:translate(key: 'widget.add.button.ok', extensionName: 'dashboard')}">
-        <i class="fa fa-plus fa-fw"></i><span class="sr-only"><f:translate key="widget.add" extensionName="dashboard" /></span>
+        <i class="fa fa-plus fa-fw"></i><span class="sr-only"><f:translate key="widget.add" extensionName="dashboard"/></span>
     </a>
 </div>
 
 <div id="widgetSelector" class="hide">
     <div>
         <select name="widget">
             <f:for each="{availableWidgets}" as="availableWidgetConfig" key="availableWidgetKey">
-                <option value="{availableWidgetKey}"><f:translate key="{availableWidgetConfig.title}" default="{availableWidgetConfig.title}" /></option>
+                <option value="{availableWidgetKey}">
+                    <f:translate key="{availableWidgetConfig.title}" default="{availableWidgetConfig.title}"/>
+                </option>
             </f:for>
         </select>
     </div>

diff --git a/Resources/Private/Templates/Widgets/NumberWidget.html b/Resources/Private/Templates/Widgets/NumberWidget.html
@@ -1,13 +1,15 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers" data-namespace-typo3-fluid="true">
 <div class="dashboard-widget dashboard-widget-number">
-    <f:if condition="{icon}">
-        <div class="dashboard-widget-number--icon">
-            <core:icon identifier="{icon}" size="large" alternativeMarkupIdentifier="inline" />
+    <div class="widget-content-main u-flex">
+        <f:if condition="{icon}">
+            <div class="dashboard-widget-number--icon">
+                <core:icon identifier="{icon}" size="large" alternativeMarkupIdentifier="inline" />
+            </div>
+        </f:if>
+        <div class="dashboard-widget-number--content">
+            <div class="dashboard-widget-number--title">{title}</div>
+            <div class="dashboard-widget-number--number">{number}</div>
         </div>
-    </f:if>
-    <div class="dashboard-widget-number--content">
-        <div class="dashboard-widget-number--title">{title}</div>
-        <div class="dashboard-widget-number--number">{number}</div>
     </div>
 </div>
 </html>
diff --git a/Resources/Public/Icons/Drag.svg b/Resources/Public/Icons/Drag.svg
diff --git a/Resources/Public/Icons/Times-circle.svg b/Resources/Public/Icons/Times-circle.svg
diff --git a/Resources/Public/Icons/grip-vertical.svg b/Resources/Public/Icons/grip-vertical.svg
diff --git a/build/grunt/Gruntfile.js b/build/grunt/Gruntfile.js
@@ -1,61 +1,55 @@
-/*global module, require, process, console */
-
-// USAGE
-// Install the latest LTS version of node
-// `npm install` in this folder
-// Create an environment variable 'HTTPS_KEY', which points to server.key
-// Create an environment variable 'HTTPS_CERT', which points to server.crt
-// Start the default task with `grunt`, or set a custom project url with `grunt --url=https://example.org`
 module.exports = function (grunt) {
-    var fs = require('fs'),
+    const fs = require('fs'),
         path = require('path'),
         url = require('url'),
-        extDirectory = path.normalize('../..'),
-        projectDirectory = extDirectory,
-        cssFilePaths = [];
+        extDirectory = path.normalize('../../../');
 
     require('jit-grunt')(grunt, {
         sasslint: 'grunt-sass-lint'
     });
 
-    var config = {
+    const config = {
         pkg: grunt.file.readJSON('package.json'),
         extDirectory: extDirectory,
-        projectDirectory: projectDirectory,
-        sassDirectory: path.join(projectDirectory, 'Resources/Private/Styles'),
-        cssDirectory: path.join(projectDirectory, 'Resources/Public/CSS'),
-        styleParts: {
-            'dashboard': {
-                stylesheets: ['Dashboard'],
-                scssFilePaths: [],
-                cssFilePaths: []
-            },
-            'numberWidget': {
-                stylesheets: ['NumberWidget'],
-                scssFilePaths: [],
-                cssFilePaths: []
-            },
-        },
-        cssJsonFiles: grunt.file.expand([path.join(projectDirectory, 'css-bundle.*.json')]),
-        scssFilePaths: [],
+        scssDirectory: 'Resources/Private/Styles',
+        cssDirectory: 'Resources/Public/CSS',
+        globPattern: '**/!(*_tmp*).scss'
     };
 
-    for (var stylePart in config.styleParts) {
-        if (config.styleParts.hasOwnProperty(stylePart)) {
-            config.styleParts[stylePart].stylesheets.forEach(function (fileName) {
-                // The SCSS-file has a upperCamelCase filename, but for the CSS-file we want a lowerCamelCase filename
-                // So take the first char, make it lowercase and keep the rest the same
-                var css = config.cssDirectory + '/' + (fileName.charAt(0).toLowerCase() + fileName.substr(1)) + '.css';
-
-                config.styleParts[stylePart].cssFilePaths.push({
-                    src: css,
-                    dest: css
-                });
-            });
+    /**
+     * The `defaultExtConfig` object contains all possible keys to configure an extension. All those settings can be
+     * overridden with Object.assign(). When a setting is not overriden, the default value will be used.
+     * For example see the `sassLinting` item, which is true by default. For some extensions this config item is
+     * overriden by false, since those extensions aren't lint valid.
+     *
+     * @namespace
+     * @property {string} name - The name of the extension (same as the folder name in typo3conf/ext/)
+     * @property {string} sassFile - Name of the main sass file for the extension (usually Style.scss)
+     * @property {string} cssOutputFile - Name of the file where the CSS has to be exported to (usually Style.min.css)
+     * @property {array} globbingFolderNames - Array of folder names that are used in sass globbing
+     * @property {boolean} sassLinting - Indicates whether the SCSS-files should be linted by sasslint
+     */
+    var defaultExtConfig = {
+        name: 'dashboard',
+        sassFile: 'Style.scss',
+        cssOutputFile: 'style.min.css',
+        globbingFolderNames: [],
+        sassLinting: true
+    };
 
-            cssFilePaths = cssFilePaths.concat(config.styleParts[stylePart].cssFilePaths);
-        }
-    }
+    // The list of sass files that is used in the grunt tasks
+    // Each sass file has to extend the defaultExtConfig with own config (since the name is required)
+    config.extensions = [
+        Object.assign({}, defaultExtConfig, {
+            sassFile: 'Dashboard.scss',
+            cssOutputFile: 'dashboard.min.css',
+            globbingFolderNames: ['base', 'utilities'],
+        }),
+        Object.assign({}, defaultExtConfig, {
+            sassFile: 'NumberWidget.scss',
+            cssOutputFile: 'numberWidget.min.css',
+        })
+    ];
 
     grunt.initConfig(config);
 
@@ -70,9 +64,7 @@ module.exports = function (grunt) {
         }
     });
 
-    for (var stylePart in config.styleParts) {
-        grunt.registerTask(stylePart, ['sass_globbing:generate', 'sass:' + stylePart, 'postcss:' + stylePart, 'watch:' + stylePart]);
-    }
+    grunt.registerTask('default', ['sass_globbing:generate', 'sass:dev', 'postcss:dev', 'watch']);
     grunt.registerTask('lint', ['sasslint:dev']);
     grunt.registerTask('build', ['sasslint:build', 'sass_globbing:generate', 'sass:build', 'postcss:build', 'cssmin:build']);
 };
diff --git a/ext_localconf.php b/ext_localconf.php
@@ -16,7 +16,12 @@
 $iconRegistry->registerIcon(
     'dragdrop', // Icon-Identifier, z.B. tx-myext-action-preview
     \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
-    ['source' => 'EXT:dashboard/Resources/Public/Icons/grip-vertical.svg']
+    ['source' => 'EXT:dashboard/Resources/Public/Icons/Drag.svg']
+);
+$iconRegistry->registerIcon(
+    'timesCircle', // Icon-Identifier, z.B. tx-myext-action-preview
+    \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
+    ['source' => 'EXT:dashboard/Resources/Public/Icons/Times-circle.svg']
 );
 $iconRegistry->registerIcon(
     'dashboard-admin',