From 947c25a1c3879db57fa8e9ce7de30b65ade44abd Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 21 Oct 2014 18:18:23 -0400 Subject: [PATCH] Adds new loading style to form, adds loading variation to segment --- gulpfile.js | 42 +++++++------ src/definitions/collections/form.less | 60 ++++++++++++++---- src/definitions/elements/button.less | 9 ++- src/definitions/elements/list.less | 4 +- src/definitions/elements/segment.less | 61 +++++++++++++++++++ src/definitions/globals/site.less | 2 +- src/themes/default/collections/form.variables | 15 +++-- src/themes/default/elements/button.variables | 7 +-- src/themes/default/elements/segment.variables | 15 +++++ src/themes/default/globals/site.variables | 12 ++++ tasks/defaults.js | 4 ++ 11 files changed, 180 insertions(+), 51 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 31d9294d2..f3f39d2a1 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -52,17 +52,16 @@ var settings = require('./tasks/gulp-settings'), // local + runSetup = false, overwrite = true, - - // derived config, package, + // derived base, clean, output, source, - assetPaths, componentGlob, @@ -94,6 +93,7 @@ var getConfigValues = function() { if(!config) { + runSetup = true; config = defaults; } config = extend(true, {}, defaults, config); @@ -136,6 +136,7 @@ var getConfigValues(); + /******************************* Tasks *******************************/ @@ -149,7 +150,7 @@ gulp.task('watch', 'Watch for site/theme changes (Default Task)', function () { console.clear(); console.log('Watching source files'); - if(!fs.existsSync(defaults.files.theme)) { + if(!fs.existsSync(config.files.theme)) { console.error('Cant compile LESS. Run "grunt install" to create a theme config file'); return; } @@ -175,13 +176,14 @@ gulp.task('watch', 'Watch for site/theme changes (Default Task)', function () { // recompile only definition file srcPath = util.replaceExtension(file.path, '.less'); - srcPath = srcPath.replace(source.themes, source.definitions); + srcPath = srcPath.replace(config.regExp.themePath, source.definitions); srcPath = srcPath.replace(source.site, source.definitions); // get relative asset path (path returns wrong path? hardcoded) // assetPaths.source = path.relative(srcPath, path.resolve(source.themes)); assetPaths.source = '../../themes'; + if( fs.existsSync(srcPath) ) { // unified css stream @@ -278,7 +280,7 @@ gulp.task('build', 'Builds all files from source', function(callback) { console.info('Building Semantic'); - if(!fs.existsSync(defaults.files.theme)) { + if(!fs.existsSync(config.files.theme)) { console.error('Cant build LESS. Run "grunt install" to create a theme config file'); return; } @@ -414,7 +416,7 @@ gulp.task('package compressed js', false, function() { gulp.task('check install', false, function () { setTimeout(function() { - if( !config || !fs.existsSync(defaults.files.site)) { + if( runSetup || !fs.existsSync(config.files.site)) { console.log('No semantic.json file found. Starting install...'); gulp.start('install'); } @@ -432,18 +434,18 @@ gulp.task('install', 'Set-up project for first time', function () { var siteVariable = /@siteFolder .*\'(.*)/mg, - siteDestination = answers.site || defaults.folders.site, + siteDestination = answers.site || config.folders.site, - pathToSite = path.relative(path.resolve(defaults.folders.theme), path.resolve(siteDestination)), + pathToSite = path.relative(path.resolve(config.folders.theme), path.resolve(siteDestination)), sitePathReplace = "@siteFolder : '" + pathToSite + "/';", - configExists = fs.existsSync(defaults.files.config), - themeConfigExists = fs.existsSync(defaults.files.theme), + configExists = fs.existsSync(config.files.config), + themeConfigExists = fs.existsSync(config.files.theme), siteExists = fs.existsSync(siteDestination), jsonSource = (configExists) - ? defaults.files.config - : defaults.templates.config, + ? config.files.config + : config.templates.config, json = { paths: { source: {}, @@ -469,22 +471,22 @@ gulp.task('install', 'Set-up project for first time', function () { console.info('Creating site theme folder', siteDestination); } // copy recursively without overwrite - wrench.copyDirSyncRecursive(defaults.templates.site, siteDestination, settings.wrench.recursive); + wrench.copyDirSyncRecursive(config.templates.site, siteDestination, settings.wrench.recursive); // adjust less variable for site folder location console.info('Adjusting @siteFolder', sitePathReplace); if(themeConfigExists) { - gulp.src(defaults.files.site) + gulp.src(config.files.site) .pipe(replace(siteVariable, sitePathReplace)) - .pipe(gulp.dest(defaults.folders.theme)) + .pipe(gulp.dest(config.folders.theme)) ; } else { console.info('Creating src/theme.config (LESS config)'); - gulp.src(defaults.templates.theme) + gulp.src(config.templates.theme) .pipe(rename({ extname : '' })) .pipe(replace(siteVariable, sitePathReplace)) - .pipe(gulp.dest(defaults.folders.theme)) + .pipe(gulp.dest(config.folders.theme)) ; } @@ -539,10 +541,10 @@ gulp.task('install', 'Set-up project for first time', function () { })) .pipe(prompt.prompt(questions.cleanup, function(answers) { if(answers.cleanup == 'yes') { - del(defaults.setupFiles); + del(config.setupFiles); } if(answers.build == 'yes') { - config = require(defaults.files.config); + config = require(config.files.config); getConfigValues(); gulp.start('build'); } diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index b145c7615..ce5612a30 100755 --- a/src/definitions/collections/form.less +++ b/src/definitions/collections/form.less @@ -454,26 +454,63 @@ } -/*-------------------- - Loading State ----------------------*/ +/*-------------- + Loading +---------------*/ -/* On Form */ -.ui.form.loading { +.ui.loading.form { position: relative; -} -.ui.form.loading:after { + cursor: default; + point-events: none; + text-shadow: none !important; + color: transparent !important; + transition: all 0s linear; + z-index: 100; +} +.ui.loading.form:before { position: absolute; + content: ''; top: 0%; left: 0%; - content: ''; - + background: @loaderDimmerColor; width: 100%; height: 100%; - background: @formLoaderDimmerColor url(@formLoaderPath) no-repeat @formLoaderPosition; + z-index: @loaderDimmerZIndex; +} +.ui.loading.form:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: form-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; visibility: visible; + z-index: @loaderLineZIndex; } +@keyframes form-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + + /******************************* Element Types *******************************/ @@ -510,9 +547,6 @@ .ui.inverted.form .ui.checkbox .box { color: @invertedLabelColor; } -.ui.inverted.form.loading:after { - background: @formInvertedLoaderDimmerColor url(@formInvertedLoaderPath) no-repeat @formLoaderPosition; -} /*-------------------- Field Groups diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index 595a4989a..339f4994f 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -148,7 +148,7 @@ height: @loaderSize; border-radius: @circularRadius; - border: @loaderLineWidth solid @loaderFillColor; + border: @loaderLineWidth solid @invertedLoaderFillColor; } .ui.loading.button:after { position: absolute; @@ -165,7 +165,7 @@ border-radius: @circularRadius; - border-color: @loaderLineColor transparent transparent; + border-color: @invertedLoaderLineColor transparent transparent; border-style: solid; border-width: @loaderLineWidth; @@ -185,8 +185,11 @@ } } +.ui.basic.loading.button:not(.inverted):before { + border-color-top: @loaderFillColor; +} .ui.basic.loading.button:not(.inverted):after { - border-color: @invertedLoaderLineColor transparent transparent; + border-color-top: @loaderLineColor; } /*------------------- diff --git a/src/definitions/elements/list.less b/src/definitions/elements/list.less index 20d9bb432..2bc951c73 100755 --- a/src/definitions/elements/list.less +++ b/src/definitions/elements/list.less @@ -177,11 +177,11 @@ ol.ui.list ol, .ui.list .list > a.item, .ui.list > a.item { cursor: pointer; - color: @itemLinkColor !important; + color: @itemLinkColor; } .ui.list .list > a.item:hover, .ui.list > a.item:hover { - color: @itemLinkHoverColor !important; + color: @itemLinkHoverColor; } /* Linked Item Icons */ diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index 8d4c5fe3f..8722941b5 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -246,11 +246,72 @@ States *******************************/ +/*-------------- + Disabled +---------------*/ + .ui.disabled.segment { opacity: @disabledOpacity; color: @disabledTextColor; } +/*-------------- + Loading +---------------*/ + +.ui.loading.segment { + position: relative; + cursor: default; + point-events: none; + text-shadow: none !important; + color: transparent !important; + transition: all 0s linear; + z-index: 100; +} +.ui.loading.segment:before { + position: absolute; + content: ''; + top: 0%; + left: 0%; + background: @loaderDimmerColor; + width: 100%; + height: 100%; + border-radius: @borderRadius; + z-index: @loaderDimmerZIndex; +} +.ui.loading.segment:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: segment-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; + visibility: visible; + z-index: @loaderLineZIndex; +} + +@keyframes segment-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + /******************************* Variations diff --git a/src/definitions/globals/site.less b/src/definitions/globals/site.less index 97c23a517..27ec5053b 100755 --- a/src/definitions/globals/site.less +++ b/src/definitions/globals/site.less @@ -33,6 +33,7 @@ html, body { height: 100%; + font-size: @fontSize; font-smoothing: @fontSmoothing; } @@ -44,7 +45,6 @@ body { background: @pageBackground; font-family: @pageFont; - font-size: @fontSize; line-height: @lineHeight; color: @textColor; overflow-x: @pageOverflowX; diff --git a/src/themes/default/collections/form.variables b/src/themes/default/collections/form.variables index f52339183..fb314fb46 100644 --- a/src/themes/default/collections/form.variables +++ b/src/themes/default/collections/form.variables @@ -133,11 +133,16 @@ @inputErrorPlaceholderColor: lighten(@formErrorColor, 10); @inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5); -/* Loading */ -@formLoaderDimmerColor: rgba(255, 255, 255, 0.6); -@formLoaderPath: "@{imagePath}/loader-large.gif"; -@formLoaderPosition: 50% 50%; +/* Loading Dimmer */ +@loaderDimmerColor: rgba(255, 255, 255, 0.8); +@loaderDimmerZIndex: 100; + +/* Loading Spinner */ +@loaderSize: 3em; +@loaderOffset: -(@loaderSize / 2); +@loaderMargin: @loaderOffset 0em 0em @loaderOffset; +@loaderLineZIndex: 101; /*------------------- Types @@ -149,8 +154,6 @@ /* Inverted */ @invertedLabelColor: @invertedTextColor; -@formInvertedLoaderPath: "@{imagePath}/loader-large-inverted.gif"; -@formInvertedLoaderDimmerColor: rgba(0, 0, 0, 0.8); /*------------------- Variations diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables index 9ac66a01f..1009d1fcf 100644 --- a/src/themes/default/elements/button.variables +++ b/src/themes/default/elements/button.variables @@ -51,12 +51,7 @@ @loaderSize: 1.2857em; @loaderOffset: -(@loaderSize / 2); @loaderMargin: @loaderOffset 0em 0em @loaderOffset; -@loaderLineWidth: 3px; -@loaderSpeed: 0.75s; - -@loaderFillColor: rgba(0, 0, 0, 0.15); -@loaderLineColor: rgba(255, 255, 255, 0.8); -@invertedLoaderLineColor: @darkGrey; +@invertedLoaderFillColor: rgba(0, 0, 0, 0.15); @transition: opacity 0.1s @transitionEasing, diff --git a/src/themes/default/elements/segment.variables b/src/themes/default/elements/segment.variables index 32d33cdbb..27633d151 100644 --- a/src/themes/default/elements/segment.variables +++ b/src/themes/default/elements/segment.variables @@ -29,6 +29,21 @@ @pageGridMargin: (2 * @verticalPadding); +/******************************* + States +*******************************/ + +/* Loading Dimmer */ +@loaderDimmerColor: rgba(255, 255, 255, 0.8); +@loaderDimmerZIndex: 100; + +/* Loading Spinner */ +@loaderSize: 3em; +@loaderOffset: -(@loaderSize / 2); +@loaderMargin: @loaderOffset 0em 0em @loaderOffset; +@loaderLineZIndex: 101; + + /******************************* Variations *******************************/ diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index 90d576785..3f1e4fa58 100644 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -78,6 +78,18 @@ @transparentWhite : rgba(255, 255, 255, 0.05); @strongTransparentWhite : rgba(255, 255, 255, 0.07); +/*------------------- + Loader +--------------------*/ + +@loaderSpeed: 0.75s; + +@loaderLineWidth: 3px; + +@loaderFillColor: rgba(0, 0, 0, 0.1); +@loaderLineColor: rgba(0, 0, 0, 0.3); +@invertedLoaderFillColor: rgba(255, 255, 255, 0.15); +@invertedLoaderLineColor: rgba(255, 255, 255, 0.8); /*------------------- Accents diff --git a/tasks/defaults.js b/tasks/defaults.js index 4bfbecf9c..dbade0f93 100755 --- a/tasks/defaults.js +++ b/tasks/defaults.js @@ -26,6 +26,10 @@ module.exports = { theme : './src/theme.config.example' }, + regExp: { + themeRoot: /.*\/themes\/.*?\//mg + }, + // folder pathsr folders: { config : './',