diff --git a/web/App_Themes/dark/input.css b/web/App_Themes/dark/input.css new file mode 100644 index 00000000..b60043db --- /dev/null +++ b/web/App_Themes/dark/input.css @@ -0,0 +1,19 @@ + +input, textarea, checkbox { + color: yellow; + background-color: black; + font-size: larger; + border: solid 1px rgb(128,128,128); + animation-name: flash; + animation-duration: 1s; + animation-iteration-count: 1; + } + +input:hover, textarea:hover { + color: black; + background-color: rgba(0,0,0,.8); +} + +.input-validation-error { border: solid 1px red; } +.field-validation-error { color: red; } + diff --git a/web/App_Themes/dark/style.css b/web/App_Themes/dark/style.css index 0f77001d..c1cb2151 100644 --- a/web/App_Themes/dark/style.css +++ b/web/App_Themes/dark/style.css @@ -1,5 +1,6 @@ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700); @import url(/App_Themes/dark/links.css); +@import url(/App_Themes/dark/input.css); .skillname { background-color: rgba(16,16,64,0.8); diff --git a/web/App_Themes/itclear/style.css b/web/App_Themes/itclear/style.css new file mode 100644 index 00000000..b7067fbb --- /dev/null +++ b/web/App_Themes/itclear/style.css @@ -0,0 +1,204 @@ +@import url(http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext); +@import url(/App_Themes/clear/links.css); +@import url(/App_Themes/clear/input.css); +body { + background-color: white; + color: black; + font-family: 'Josefin Sans', sans-serif; + background: url("/App_Themes/images/p8-av4.jpg") 0 0 repeat fixed ; +} +.tagname { } + +.tagname:hover { background-color: red; } + +/* Start by setting display:none to make this hidden. + Then we position it in relation to the viewport window + with position:fixed. Width, height, top and left speak + for themselves. Background we set to 80% white with + our animation centered, and no-repeating */ +.modal { + background: rgba( 255, 255, 255, .8 ) + url('/App_Themes/images/FhHRx.gif') + 50% 50% + no-repeat; +} + + + +header { float: left; } + +h1 { display: inline-block; } + +nav { + +} +nav li { display: inline-block; } + + + +main { +clear:both; +background-color: rgba(256,256,256,.5); + } + +footer { + background: url("/App_Themes/images/splash-image-2.jpg") 0 0 repeat fixed ; +} + +legend, .skillname { + background-color: rgba(240,240,240,.8); + } +#copyr { } + +#gspacer { + background-color: rgba(209,209,209,.8); } + +fieldset, .performer { + background-color: rgba(216,216,216,0.8); +} + + h1 { + background-color: rgba(256,256,256,.2); + padding: 1em; + color:white; + transition: color 1s; + } + +.postpreview { + background-color: rgba(233,233,233,0.8); + animation-name: slideInDown; + animation-duration: 1s; + animation-iteration-count: 1; +} + +.postpreview > div { + max-height: 0; + overflow: hidden; + transition: max-height 2s; + } + +.postpreview:hover > div { + overflow: auto; + max-height: 15em; + background-color: rgba(233,233,233,0.8); +} +.post { + background-color: rgba(256,256,256,0.8); + } +.hiddenpost { background-color: rgba(160,160,160,0.5); } + + +.panel,.bigpanel, aside { + background-color: rgba(200,200,200,.8); +} + +.usertitleref { + background-color:rgba(256,256,212,0.6); +} +.editable { + border: dashed rgb(200,200,256) 2px; + background-color: rgba(256,256,256,.8); +} + +.notification { + background-color: rgba(264,264,128,0.5); + border: solid green 1px; + } +.dirty { + background-color: rgba(256,228,128,0.5); +} +.error, #error { + color: #f88; + background-color: rgba(256,0,0,.5); +} +.validation-summary-errors{ + color: #f88; + background-color: rgba(256,256,139,0.5); +} + + +ul.preview li:nth-child(n) { + display:none; +} + +.validation-summary-errors{ + color: #f88; +} + +a:active { + background-color:rgba(184,180,132,0.9); +} + +.code { + background-color: rgba(230,230,230,0.5); +} + + + +@media all and (max-width: 640px) { + + + + #logo { + } + + header { + } + nav { + } + main { + + } + footer { + + } +} + +@media all and (max-width: 350px) { + + #logo { + } + header { + } + + nav { + } + main { + + } + footer { + + } +} + + +.input-validation-error { border: solid 1px red; background-color: rgba(128,0,0,0.5); + animation-name: hotzone; + animation-duration: 4s; + animation-iteration-count: infinite; + } + +.field-validation-error { color: rgb(256,200,200); background-color: rgba(128,0,0,0.5); + animation-name: hotzone; + animation-duration: 4s; + animation-iteration-count: infinite; + } + +input[type='submit'].clickme { + animation-name: hotzone; + animation-duration: 4s; + animation-iteration-count: infinite; + } + + +@keyframes hotzone { + from { + background-color: rgba(230,230,230,.8); + color: black; + } + 50% {background-color: rgba(256,150,150,.5);} + to { + background-color: rgba(230,230,230,.8); + color: black; + } +} diff --git a/web/App_Themes/itdark/style.css b/web/App_Themes/itdark/style.css new file mode 100644 index 00000000..56a3a629 --- /dev/null +++ b/web/App_Themes/itdark/style.css @@ -0,0 +1,204 @@ +@import url(http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext); +@import url(/App_Themes/dark/links.css); +@import url(/App_Themes/dark/input.css); +body { + background-color: white; + color: black; + font-family: 'Josefin Sans', sans-serif; + background: url("/App_Themes/images/p8-av4.jpg") 0 0 repeat fixed ; +} +.tagname { } + +.tagname:hover { background-color: red; } + +/* Start by setting display:none to make this hidden. + Then we position it in relation to the viewport window + with position:fixed. Width, height, top and left speak + for themselves. Background we set to 80% white with + our animation centered, and no-repeating */ +.modal { + background: rgba( 255, 255, 255, .8 ) + url('/App_Themes/images/FhHRx.gif') + 50% 50% + no-repeat; +} + + + +header { float: left; } + +h1 { display: inline-block; } + +nav { + +} +nav li { display: inline-block; } + + + +main { +clear:both; +background-color: rgba(256,256,256,.5); + } + +footer { + background: url("/App_Themes/images/splash-image-2.jpg") 0 0 repeat fixed ; +} + +legend, .skillname { + background-color: rgba(240,240,240,.8); + } +#copyr { } + +#gspacer { + background-color: rgba(209,209,209,.8); } + +fieldset, .performer { + background-color: rgba(216,216,216,0.8); +} + + h1 { + background-color: rgba(256,256,256,.2); + padding: 1em; + color:white; + transition: color 1s; + } + +.postpreview { + background-color: rgba(233,233,233,0.8); + animation-name: slideInDown; + animation-duration: 1s; + animation-iteration-count: 1; +} + +.postpreview > div { + max-height: 0; + overflow: hidden; + transition: max-height 2s; + } + +.postpreview:hover > div { + overflow: auto; + max-height: 15em; + background-color: rgba(233,233,233,0.8); +} +.post { + background-color: rgba(256,256,256,0.8); + } +.hiddenpost { background-color: rgba(160,160,160,0.5); } + + +.panel,.bigpanel, aside { + background-color: rgba(200,200,200,.8); +} + +.usertitleref { + background-color:rgba(256,256,212,0.6); +} +.editable { + border: dashed rgb(200,200,256) 2px; + background-color: rgba(256,256,256,.8); +} + +.notification { + background-color: rgba(264,264,128,0.5); + border: solid green 1px; + } +.dirty { + background-color: rgba(256,228,128,0.5); +} +.error, #error { + color: #f88; + background-color: rgba(256,0,0,.5); +} +.validation-summary-errors{ + color: #f88; + background-color: rgba(256,256,139,0.5); +} + + +ul.preview li:nth-child(n) { + display:none; +} + +.validation-summary-errors{ + color: #f88; +} + +a:active { + background-color:rgba(184,180,132,0.9); +} + +.code { + background-color: rgba(230,230,230,0.5); +} + + + +@media all and (max-width: 640px) { + + + + #logo { + } + + header { + } + nav { + } + main { + + } + footer { + + } +} + +@media all and (max-width: 350px) { + + #logo { + } + header { + } + + nav { + } + main { + + } + footer { + + } +} + + +.input-validation-error { border: solid 1px red; background-color: rgba(128,0,0,0.5); + animation-name: hotzone; + animation-duration: 4s; + animation-iteration-count: infinite; + } + +.field-validation-error { color: rgb(256,200,200); background-color: rgba(128,0,0,0.5); + animation-name: hotzone; + animation-duration: 4s; + animation-iteration-count: infinite; + } + +input[type='submit'].clickme { + animation-name: hotzone; + animation-duration: 4s; + animation-iteration-count: infinite; + } + + +@keyframes hotzone { + from { + background-color: rgba(230,230,230,.8); + color: black; + } + 50% {background-color: rgba(256,150,150,.5);} + to { + background-color: rgba(230,230,230,.8); + color: black; + } +} diff --git a/web/ChangeLog b/web/ChangeLog index 9de96243..d5ce7d65 100644 --- a/web/ChangeLog +++ b/web/ChangeLog @@ -1,3 +1,27 @@ +2015-12-16 Paul Schneider + + * input.css: + * style.css: une feuille pour les champs de formulaire thème + sombre + + * style.css: une feuille pour un nouveau thème clair "IT" + + * style.css: une feuille pour un nouveau thème sombre "IT" + + * AccountController.cs: renseigne le combobox des thèmes + disponibles + + * YavscHelpers.cs: Prendre la liste des thème dans un + paramètre de configuration + + * Profile.aspx: Selectionner le thème avec un combo à partir + de la page du profile + + * Web.config: le thème par défaut devient "clear", + le paramètre "Themes" contient la liste des thèmes autorisés. + + * Yavsc.csproj: référencer les nouveaux thèmes + 2015-12-15 Paul Schneider * input.css: refabrication des feuilles de style : la feuille diff --git a/web/Controllers/AccountController.cs b/web/Controllers/AccountController.cs index 20beca03..8a130c59 100644 --- a/web/Controllers/AccountController.cs +++ b/web/Controllers/AccountController.cs @@ -256,9 +256,15 @@ namespace Yavsc.Controllers ProfileEdition model = new ProfileEdition (ProfileBase.Create (id)); model.RememberMe = FormsAuthentication.GetAuthCookie (id, true) == null; SetMEACodeViewData (model); + SetUIThemeViewData (model); return View (model); } - + private void SetUIThemeViewData(Profile model) { + ViewData ["UITheme"] = YavscHelpers.AvailableThemes.Select ( + x => new SelectListItem () { Selected = + model.UITheme == x, Text = x, Value = x }).ToArray(); + + } private void SetMEACodeViewData(Profile model) { var activities = WorkFlowManager.FindActivity ("%", false); var items = new List (); @@ -360,6 +366,7 @@ namespace Yavsc.Controllers YavscHelpers.Notify(ViewData, "Profile enregistré"+((editsTheUserName)?", nom public inclu.":"")); } SetMEACodeViewData (model); + SetUIThemeViewData (model); return View (model); } /// diff --git a/web/Helpers/YavscHelpers.cs b/web/Helpers/YavscHelpers.cs index 27a4c3c1..2fc3c620 100644 --- a/web/Helpers/YavscHelpers.cs +++ b/web/Helpers/YavscHelpers.cs @@ -355,9 +355,9 @@ namespace Yavsc.Helpers /// /// The available themes. /// - public static string[] AvailableThemes = { - "clear", "dark", "blue", "green" - }; + public static string[] AvailableThemes = + ConfigurationManager.AppSettings["Themes"] + .Split(','); /// /// Themes the CSS links. @@ -370,8 +370,11 @@ namespace Yavsc.Helpers this System.Web.Mvc.HtmlHelper html, string theme, string baseName) { if (!AvailableThemes.Contains (theme)) - throw new ArgumentException ("The given theme is not configured: " + - theme); + if (AvailableThemes.Length > 0) + theme = AvailableThemes [0]; + else + return null; + if (string.IsNullOrWhiteSpace(baseName)) throw new ArgumentException ("Specify a base name"); diff --git a/web/Views/Account/Profile.aspx b/web/Views/Account/Profile.aspx index b809c0e5..6ed1ba8d 100644 --- a/web/Views/Account/Profile.aspx +++ b/web/Views/Account/Profile.aspx @@ -170,7 +170,7 @@ Avatar : <%= Html.LabelFor(model => model.UITheme) %> : -<%= Html.TextBox("UITheme") %> +<%= Html.DropDownList("UITheme") %> <%= Html.ValidationMessage("UITheme", "*") %> diff --git a/web/Web.config b/web/Web.config index 222208d6..fa0caf6f 100644 --- a/web/Web.config +++ b/web/Web.config @@ -150,7 +150,7 @@ http://msdn2.microsoft.com/en-us/library/b5ysx397.aspx - + @@ -244,7 +244,7 @@ http://msdn2.microsoft.com/en-us/library/b5ysx397.aspx - + @@ -273,6 +273,7 @@ http://msdn2.microsoft.com/en-us/library/b5ysx397.aspx +