Created components: InputMultiLines, InputSingleLine

dyatlov-a · Oct 7, 2024 · f046f25 · f046f25
1 parent 2643364
commit f046f25
Show file tree

Hide file tree

Showing 28 changed files with 291 additions and 143 deletions.
diff --git a/src/Inc.TeamAssistant.Stories/Components/Forms/InputMultiLines.stories.razor b/src/Inc.TeamAssistant.Stories/Components/Forms/InputMultiLines.stories.razor
@@ -0,0 +1,23 @@
+@attribute [Stories("Components/Forms/InputMultiLines")]
+
+<Stories TComponent="InputMultiLines" Layout="typeof(DarkLayout)">
+    <Story Name="Default">
+        <Template>
+            <InputMultiLines FieldId="@_fieldId" @bind-Value="Text" @attributes="context.Args" />
+        </Template>
+    </Story>
+    <Story Name="Disabled">
+        <Arguments>
+            <Arg For="c => c.IsDisabled" Value="true" />
+        </Arguments>
+        <Template>
+            <InputMultiLines FieldId="@_fieldId" @bind-Value="Text" @attributes="context.Args"/>
+        </Template>
+    </Story>
+</Stories>
+
+@code {
+    private readonly string _fieldId = "input-multilines";
+
+    public string Text { get; set; } = "Text";
+}
diff --git a/src/Inc.TeamAssistant.Stories/Components/Forms/InputSingleLine.stories.razor b/src/Inc.TeamAssistant.Stories/Components/Forms/InputSingleLine.stories.razor
@@ -0,0 +1,23 @@
+@attribute [Stories("Components/Forms/InputSingleLine")]
+
+<Stories TComponent="InputSingleLine" Layout="typeof(DarkLayout)">
+    <Story Name="Default">
+        <Template>
+            <InputSingleLine FieldId="@_fieldId" @bind-Value="Text" @attributes="context.Args" />
+        </Template>
+    </Story>
+    <Story Name="Disabled">
+        <Arguments>
+            <Arg For="c => c.IsDisabled" Value="true" />
+        </Arguments>
+        <Template>
+            <InputSingleLine FieldId="@_fieldId" @bind-Value="Text" @attributes="context.Args"/>
+        </Template>
+    </Story>
+</Stories>
+
+@code {
+    private readonly string _fieldId = "input-multilines";
+
+    public string Text { get; set; } = "Text";
+}
diff --git a/src/Inc.TeamAssistant.WebUI/Components/InputMultiLines.razor b/src/Inc.TeamAssistant.WebUI/Components/InputMultiLines.razor
@@ -0,0 +1,32 @@
+@inherits InputBase<string>
+
+<div>
+    @if (IsDisabled)
+    {
+        <InputTextArea
+            @bind-Value="Value"
+            class="form-control form-control_multilines form-control_disabled"
+            id="@FieldId"
+            disabled="disabled" />
+    }
+    else
+    {
+        <InputTextArea
+            @bind-Value="Value"
+            class="form-control form-control_multilines form-control_enabled"
+            id="@FieldId" />
+    }
+</div>
+
+@code {
+    [Parameter, EditorRequired]
+    public string FieldId { get; set; } = string.Empty;
+
+    [Parameter]
+    public bool IsDisabled { get; set; }
+
+    protected override bool TryParseValueFromString(string? value, out string result, out string validationErrorMessage)
+    {
+        throw new NotImplementedException();
+    }
+}
diff --git a/src/Inc.TeamAssistant.WebUI/Components/InputMultiLines.razor.css b/src/Inc.TeamAssistant.WebUI/Components/InputMultiLines.razor.css
@@ -0,0 +1,20 @@
+::deep .form-control {
+    width: 100%;
+    padding: .625rem .3125rem;
+    border: 3px solid #555;
+    border-radius: 0;
+    color: #000;
+    background-color: #dfdfdf;
+    transition: border 0.3s;
+}
+::deep .form-control_multilines {
+    resize: none;
+    height: 102px;
+}
+::deep .form-control:focus, .form-control_enabled:hover {
+    border: 3px solid #000;
+}
+::deep .form-control_disabled {
+    background-color: #aaa;
+    cursor: default;
+}
diff --git a/src/Inc.TeamAssistant.WebUI/Components/InputMultiSelectList.razor.css b/src/Inc.TeamAssistant.WebUI/Components/InputMultiSelectList.razor.css
@@ -1,3 +1,19 @@
+.form-control {
+    width: 100%;
+    padding: .625rem .3125rem;
+    border: 3px solid #555;
+    border-radius: 0;
+    color: #000;
+    background-color: #dfdfdf;
+    transition: border 0.3s;
+}
+.form-control:focus, .form-control_enabled:hover {
+    border: 3px solid #000;
+}
+.form-control_disabled {
+    background-color: #aaa;
+    cursor: default;
+}
 .multiselect__item {
     display: inline-block;
     padding: 5px;

diff --git a/src/Inc.TeamAssistant.WebUI/Components/InputSelectList.razor b/src/Inc.TeamAssistant.WebUI/Components/InputSelectList.razor
@@ -3,42 +3,44 @@
 
 @inherits InputBase<TValue>
 
-@if (IsDisabled)
-{
-    <InputSelect
-        id="@FieldId"
-        Value="_value"
-        ValueExpression="@(() => _value)"
-        class="form-control form-control_select-list form-control_disabled"
-        disabled="disabled">
-        @if (HasEmptyValue)
-        {
-            <option value=""></option>
-        }
-        @foreach (var item in Items)
-        {
-            <option value="@ValueSelector(item)">@TitleSelector(item)</option>
-        }
-    </InputSelect>
-}
-else
-{
-    <InputSelect
-        id="@FieldId"
-        Value="_value"
-        ValueExpression="@(() => _value)"
-        ValueChanged="@((TValue? v) => SetCurrentValue(v))"
-        class="@($"form-control form-control_select-list form-control_enabled {CssClass} {ParentCssClass}")">
-        @if (HasEmptyValue)
-        {
-            <option value=""></option>
-        }
-        @foreach (var item in Items)
-        {
-            <option value="@ValueSelector(item)">@TitleSelector(item)</option>
-        }
-    </InputSelect>
-}
+<div>
+    @if (IsDisabled)
+    {
+        <InputSelect
+            id="@FieldId"
+            Value="_value"
+            ValueExpression="@(() => _value)"
+            class="form-control form-control_select-list form-control_disabled"
+            disabled="disabled">
+            @if (HasEmptyValue)
+            {
+                <option value=""></option>
+            }
+            @foreach (var item in Items)
+            {
+                <option value="@ValueSelector(item)">@TitleSelector(item)</option>
+            }
+        </InputSelect>
+    }
+    else
+    {
+        <InputSelect
+            id="@FieldId"
+            Value="_value"
+            ValueExpression="@(() => _value)"
+            ValueChanged="@((TValue? v) => SetCurrentValue(v))"
+            class="@($"form-control form-control_select-list form-control_enabled {CssClass} {ParentCssClass}")">
+            @if (HasEmptyValue)
+            {
+                <option value=""></option>
+            }
+            @foreach (var item in Items)
+            {
+                <option value="@ValueSelector(item)">@TitleSelector(item)</option>
+            }
+        </InputSelect>
+    }
+</div>
 
 @code {
     [Parameter, EditorRequired]

diff --git a/src/Inc.TeamAssistant.WebUI/Components/InputSelectList.razor.css b/src/Inc.TeamAssistant.WebUI/Components/InputSelectList.razor.css
@@ -0,0 +1,23 @@
+::deep .form-control {
+    width: 100%;
+    padding: .625rem .3125rem;
+    border: 3px solid #555;
+    border-radius: 0;
+    color: #000;
+    background-color: #dfdfdf;
+    transition: border 0.3s;
+}
+::deep .form-control:focus, .form-control_enabled:hover {
+    border: 3px solid #000;
+}
+::deep .form-control_disabled {
+    background-color: #aaa;
+    cursor: default;
+}
+::deep .form-control_select-list {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: #dfdfdf url('imgs/arrow-down.png') calc(100% - 5px) center no-repeat;
+    padding-right: 20px;
+}
diff --git a/src/Inc.TeamAssistant.WebUI/Components/InputSingleLine.razor b/src/Inc.TeamAssistant.WebUI/Components/InputSingleLine.razor
@@ -0,0 +1,32 @@
+@inherits InputBase<string>
+
+<div>
+    @if (IsDisabled)
+    {
+        <InputText
+            @bind-Value="Value"
+            class="form-control form-control_disabled"
+            id="@FieldId"
+            disabled="disabled" />
+    }
+    else
+    {
+        <InputText
+            @bind-Value="Value"
+            class="form-control form-control_enabled"
+            id="@FieldId" />
+    }
+</div>
+
+@code {
+    [Parameter, EditorRequired]
+    public string FieldId { get; set; } = string.Empty;
+
+    [Parameter]
+    public bool IsDisabled { get; set; }
+
+    protected override bool TryParseValueFromString(string? value, out string result, out string validationErrorMessage)
+    {
+        throw new NotImplementedException();
+    }
+}
diff --git a/src/Inc.TeamAssistant.WebUI/Components/InputSingleLine.razor.css b/src/Inc.TeamAssistant.WebUI/Components/InputSingleLine.razor.css
@@ -0,0 +1,16 @@
+::deep .form-control {
+    width: 100%;
+    padding: .625rem .3125rem;
+    border: 3px solid #555;
+    border-radius: 0;
+    color: #000;
+    background-color: #dfdfdf;
+    transition: border 0.3s;
+}
+::deep .form-control:focus, .form-control_enabled:hover {
+    border: 3px solid #000;
+}
+::deep .form-control_disabled {
+    background-color: #aaa;
+    cursor: default;
+}
diff --git a/src/Inc.TeamAssistant.WebUI/Features/AcceptCookieDialog.razor b/src/Inc.TeamAssistant.WebUI/Features/AcceptCookieDialog.razor
@@ -34,7 +34,7 @@
         {
             _cookieModule = await JsRuntime.InvokeAsync<IJSObjectReference>(
                 "import",
-                "./Features/Dialogs/AcceptCookieDialog.razor.js");
+                "./Features/AcceptCookieDialog.razor.js");
 
             var rightsValue = await _cookieModule.InvokeAsync<string>("readCookie", _rightsCookieName);
             if (!_rightsCookieValue.Equals(rightsValue, StringComparison.InvariantCultureIgnoreCase))

diff --git a/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionHistoryPage.razor b/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionHistoryPage.razor
@@ -18,7 +18,7 @@
     <div class="assessment-history-header">
         <div class="assessment-history-header__container">
             <Breadcrumbs Items="_breadcrumbs" />
-            <h1 class="title">@Resources[Messages.GUI_StoryList]</h1>
+            <h1 class="assessment-history__title">@Resources[Messages.GUI_StoryList]</h1>
         </div>
     </div>
     <div class="assessment-history-switcher">

diff --git a/...Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionHistoryPage.razor.css b/...Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionHistoryPage.razor.css
@@ -17,6 +17,10 @@
 .assessment-history-switcher {
     padding-top: 20px;
 }
+.assessment-history__title {
+    font-size: 2.4rem;
+    line-height: 3.4rem;
+}
 ::deep .loading {
     height: calc(100vh - 400px);
 }
diff --git a/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionPage.razor b/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionPage.razor
@@ -23,11 +23,11 @@
             <div class="assessment-session__header">
                 <div class="assessment-session__about">
                     <Breadcrumbs Items="_breadcrumbs" />
-                    <h1 class="title">@Resources[Messages.GUI_TaskAssess]</h1>
-                    <p class="assessment-session__text text">
+                    <h1 class="assessment-session__title">@Resources[Messages.GUI_TaskAssess]</h1>
+                    <p class="assessment-session__text">
                         @string.Format(Resources[Messages.GUI_AssessmentSessionAbout], _item.TeamName)
                     </p>
-                    <p class="assessment-session__text text">@Resources[Messages.GUI_AssessmentSessionConnect]</p>
+                    <p class="assessment-session__text">@Resources[Messages.GUI_AssessmentSessionConnect]</p>
                 </div>
                 <div class="assessment-session__link">
                     <Loading State="_state" IsDark="true" Retry="() => Load()">

diff --git a/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionPage.razor.css b/src/Inc.TeamAssistant.WebUI/Features/AssessmentSession/AssessmentSessionPage.razor.css
@@ -24,11 +24,17 @@
     margin: 0 0 0 40px;
 }
 .assessment-session__text {
+    font-size: 1.2rem;
+    line-height: 1.6rem;
     margin-top: 10px;
 }
 .assessment-session-switcher {
     padding-top: 20px;
 }
+.assessment-session__title {
+    font-size: 2.4rem;
+    line-height: 3.4rem;
+}
 ::deep .no-data {
     height: calc(100vh - 640px);
 }

diff --git a/src/Inc.TeamAssistant.WebUI/Features/Constructor/ConstructorPage.razor b/src/Inc.TeamAssistant.WebUI/Features/Constructor/ConstructorPage.razor
@@ -12,7 +12,7 @@
 
 <div class="constructor">
     <div class="constructor__container">
-        <h1 class="title">@Resources[Messages.Constructor_Title]</h1>
+        <h1 class="constructor__title">@Resources[Messages.Constructor_Title]</h1>
         <AuthorizeView>
             <Authorized>
                 <p class="text constructor__text">@Resources[Messages.Constructor_SelectBotText]</p>

diff --git a/src/Inc.TeamAssistant.WebUI/Features/Constructor/ConstructorPage.razor.css b/src/Inc.TeamAssistant.WebUI/Features/Constructor/ConstructorPage.razor.css
@@ -3,4 +3,8 @@
 }
 .constructor__text {
     margin: 40px 0;
+}
+.constructor__title {
+    font-size: 2.4rem;
+    line-height: 3.4rem;
 }
diff --git a/src/Inc.TeamAssistant.WebUI/Features/Constructor/Stages/Stage1/CheckBot.razor b/src/Inc.TeamAssistant.WebUI/Features/Constructor/Stages/Stage1/CheckBot.razor
@@ -26,19 +26,18 @@
                         FieldId="bot-token"
                         Label="@Resources[Messages.Constructor_FormSectionTokenFieldTokenLabel]">
                         <Content>
-                            <InputText @bind-Value="_formModel.Token" class="form-control form-control_enabled" id="bot-token"/>
+                            <InputSingleLine FieldId="bot-token" @bind-Value="_formModel.Token" />
                             <ValidationMessage For="@(() => _formModel.Token)"/>
                         </Content>
                     </FormFieldSet>
                     <FormFieldSet
                         FieldId="bot-username"
                         Label="@Resources[Messages.Constructor_FormSectionTokenFieldUserNameLabel]">
                         <Content>
-                            <InputText
+                            <InputSingleLine
+                                FieldId="bot-username"
                                 @bind-Value="_formModel.UserName"
-                                class="form-control form-control_disabled"
-                                id="bot-username"
-                                disabled="disabled"/>
+                                IsDisabled="true" />
                             <ValidationMessage For="@(() => _formModel.UserName)"/>
                         </Content>
                     </FormFieldSet>

diff --git a/src/Inc.TeamAssistant.WebUI/Features/Constructor/Stages/Stage2/FeatureCard.razor.css b/src/Inc.TeamAssistant.WebUI/Features/Constructor/Stages/Stage2/FeatureCard.razor.css
@@ -2,6 +2,7 @@
     margin-bottom: 20px;
     background-color: #555;
     width: 100%;
+    cursor: grab;
 }
 .feature-card__name {
     font-size: 1.1rem;