appview/pages: new button for create actions #280

···

       
1
       
 
       
{{ define "layouts/topbar" }}

     

       
2
       
 
       
    <nav class="space-x-4 mb-4 px-6 py-2 rounded bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm">

     

       
3
       
-
       
        <div class="container flex justify-between p-0">

     

       
4
       
 
       
            <div id="left-items">

     

       
5
       
 
       
                <a href="/" hx-boost="true" class="flex gap-2 font-semibold italic">

     

       
6
       
 
       
                  tangled<sub>alpha</sub>

     
···

       
19
       
 
       
                {{ i "code" "size-4" }} source

     

       
20
       
 
       
              </a>

     

       
21
       
 
       
            </div>

     

       
22
       
-
       
            <div id="right-items" class="flex gap-2">

     

       
23
       
 
       
                {{ with .LoggedInUser }}

     

       
24
       
-
       
                    <a href="/repo/new" hx-boost="true">

     

       
25
       
-
       
                      {{ i "plus" "w-6 h-6" }}

     

       
26
       
 
       
                    </a>

     

       
27
       
 
       
                    {{ block "dropDown" . }} {{ end }}

     

       
28
       
 
       
                {{ else }}

     
···

       
47
       
 
       
        <a href="/knots">knots</a>

     

       
48
       
 
       
        <a href="/spindles">spindles</a>

     

       
49
       
 
       
        <a href="/settings">settings</a>

     

       
50
       
-
       
        <a href="#" 

     

       
51
       
-
       
           hx-post="/logout" 

     

       
52
       
-
       
           hx-swap="none" 

     

       
53
       
 
       
           class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">

     

       
54
       
 
       
          logout

     

       
55
       
 
       
        </a>

     

···

       
1
       
 
       
{{ define "layouts/topbar" }}

     

       
2
       
 
       
    <nav class="space-x-4 mb-4 px-6 py-2 rounded bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm">

     

       
3
       
+
       
        <div class="container flex justify-between p-0 items-center">

     

       
4
       
 
       
            <div id="left-items">

     

       
5
       
 
       
                <a href="/" hx-boost="true" class="flex gap-2 font-semibold italic">

     

       
6
       
 
       
                  tangled<sub>alpha</sub>

     
···

       
19
       
 
       
                {{ i "code" "size-4" }} source

     

       
20
       
 
       
              </a>

     

       
21
       
 
       
            </div>

     

       
22
       
+
       
            <div id="right-items" class="flex items-center gap-4">

     

       
23
       
 
       
                {{ with .LoggedInUser }}

     

       
24
       
+
       
                    <a href="/repo/new" hx-boost="true" class="btn-create hover:no-underline hover:text-white">

     

       
25
       
+
       
                      {{ i "plus" "w-4 h-4" }}

     

       
26
       
 
       
                    </a>

     

       
27
       
 
       
                    {{ block "dropDown" . }} {{ end }}

     

       
28
       
 
       
                {{ else }}

     
···

       
47
       
 
       
        <a href="/knots">knots</a>

     

       
48
       
 
       
        <a href="/spindles">spindles</a>

     

       
49
       
 
       
        <a href="/settings">settings</a>

     

       
50
       
+
       
        <a href="#"

     

       
51
       
+
       
           hx-post="/logout"

     

       
52
       
+
       
           hx-swap="none"

     

       
53
       
 
       
           class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">

     

       
54
       
 
       
          logout

     

       
55
       
 
       
        </a>

     

···

       
27
       
 
       
  </div>

     

       
28
       
 
       
  <a

     

       
29
       
 
       
      href="/{{ .RepoInfo.FullName }}/issues/new"

     

       
30
       
-
       
      class="btn text-sm flex items-center justify-center gap-2 no-underline hover:no-underline"

     

       
31
       
 
       
      >

     

       
32
       
 
       
      {{ i "circle-plus" "w-4 h-4" }}

     

       
33
       
 
       
      <span>new</span>

     

···

       
27
       
 
       
  </div>

     

       
28
       
 
       
  <a

     

       
29
       
 
       
      href="/{{ .RepoInfo.FullName }}/issues/new"

     

       
30
       
+
       
      class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"

     

       
31
       
 
       
      >

     

       
32
       
 
       
      {{ i "circle-plus" "w-4 h-4" }}

     

       
33
       
 
       
      <span>new</span>

     

···

       
23
       
 
       
                ></textarea>

     

       
24
       
 
       
            </div>

     

       
25
       
 
       
            <div>

     

       
26
       
-
       
                <button type="submit" class="btn flex items-center gap-2">

     

       
27
       
-
       
                    create

     

       
28
       
-
       
                    <span id="spinner" class="group">

     

       
29
       
-
       
                      {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       
0
       
 
       

     

       
30
       
 
       
                    </span>

     

       
31
       
 
       
                </button>

     

       
32
       
 
       
            </div>

     

···

       
23
       
 
       
                ></textarea>

     

       
24
       
 
       
            </div>

     

       
25
       
 
       
            <div>

     

       
26
       
+
       
                <button type="submit" class="btn-create flex items-center gap-2">

     

       
27
       
+
       
                    {{ i "circle-plus" "w-4 h-4" }}

     

       
28
       
+
       
                    create issue

     

       
29
       
+
       
                    <span id="create-pull-spinner" class="group">

     

       
30
       
+
       
                        {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       
31
       
 
       
                    </span>

     

       
32
       
 
       
                </button>

     

       
33
       
 
       
            </div>

     

···

       
60
       
 
       
    </fieldset>

     

       
61
       
 
       


     

       
62
       
 
       
    <div class="space-y-2">

     

       
63
       
-
       
      <button type="submit" class="btn flex items-center">

     

       
64
       
-
       
        create repo

     

       
65
       
-
       
        <span id="spinner" class="group">

     

       
66
       
-
       
          {{ i "loader-circle" "ml-2 w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       
67
       
-
       
        </span>

     

       
68
       
-
       
      </button>

     

       
69
       
-
       
      <div id="repo" class="error"></div>

     

       
0
       
 
       

     

       
70
       
 
       
    </div>

     

       
71
       
 
       
  </form>

     

       
72
       
 
       
</div>

     

···

       
60
       
 
       
    </fieldset>

     

       
61
       
 
       


     

       
62
       
 
       
    <div class="space-y-2">

     

       
63
       
+
       
        <button type="submit" class="btn-create flex items-center gap-2">

     

       
64
       
+
       
            {{ i "book-plus" "w-4 h-4" }}

     

       
65
       
+
       
            create repo

     

       
66
       
+
       
            <span id="create-pull-spinner" class="group">

     

       
67
       
+
       
                {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       
68
       
+
       
            </span>

     

       
69
       
+
       
        </button>

     

       
70
       
+
       
        <div id="repo" class="error"></div>

     

       
71
       
 
       
    </div>

     

       
72
       
 
       
  </form>

     

       
73
       
 
       
</div>

     

···

       
141
       
 
       
            </div>

     

       
142
       
 
       


     

       
143
       
 
       
            <div class="flex justify-start items-center gap-2 mt-4">

     

       
144
       
-
       
                <button type="submit" class="btn flex items-center gap-2">

     

       
145
       
 
       
                    {{ i "git-pull-request-create" "w-4 h-4" }}

     

       
146
       
 
       
                    create pull

     

       
147
       
 
       
                    <span id="create-pull-spinner" class="group">

     

···

       
141
       
 
       
            </div>

     

       
142
       
 
       


     

       
143
       
 
       
            <div class="flex justify-start items-center gap-2 mt-4">

     

       
144
       
+
       
                <button type="submit" class="btn-create flex items-center gap-2">

     

       
145
       
 
       
                    {{ i "git-pull-request-create" "w-4 h-4" }}

     

       
146
       
 
       
                    create pull

     

       
147
       
 
       
                    <span id="create-pull-spinner" class="group">

     

···

       
34
       
 
       
        </div>

     

       
35
       
 
       
        <a

     

       
36
       
 
       
            href="/{{ .RepoInfo.FullName }}/pulls/new"

     

       
37
       
-
       
            class="btn text-sm flex items-center gap-2 no-underline hover:no-underline"

     

       
38
       
 
       
        >

     

       
39
       
 
       
            {{ i "git-pull-request-create" "w-4 h-4" }}

     

       
40
       
 
       
            <span>new</span>

     

···

       
34
       
 
       
        </div>

     

       
35
       
 
       
        <a

     

       
36
       
 
       
            href="/{{ .RepoInfo.FullName }}/pulls/new"

     

       
37
       
+
       
            class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"

     

       
38
       
 
       
        >

     

       
39
       
 
       
            {{ i "git-pull-request-create" "w-4 h-4" }}

     

       
40
       
 
       
            <span>new</span>

     

···

       
74
       
 
       


     

       
75
       
 
       
    @layer components {

     

       
76
       
 
       
        .btn {

     

       
77
       
-
       
            @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center

     

       
78
       
-
       
            justify-center bg-transparent px-2 pb-[0.2rem] text-base

     

       
79
       
-
       
            text-gray-900 before:absolute before:inset-0 before:-z-10

     

       
80
       
-
       
            before:block before:rounded before:border before:border-gray-200

     

       
81
       
-
       
            before:bg-white before:drop-shadow-sm

     

       
82
       
-
       
            before:content-[''] hover:before:border-gray-300

     

       
83
       
-
       
            hover:before:bg-gray-50

     

       
84
       
-
       
            hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5]

     

       
85
       
-
       
            focus:outline-none focus-visible:before:outline

     

       
86
       
-
       
            focus-visible:before:outline-4 focus-visible:before:outline-gray-500

     

       
87
       
-
       
            active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)]

     

       
88
       
-
       
            disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:before:border-gray-200

     

       
89
       
-
       
            disabled:hover:before:bg-white disabled:hover:before:shadow-none

     

       
90
       
-
       
            dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700

     

       
91
       
-
       
            dark:hover:before:border-gray-600 dark:hover:before:bg-gray-700

     

       
92
       
-
       
            dark:hover:before:shadow-[0_2px_2px_0_rgba(0,0,0,0.2),inset_0_-2px_0_0_#2d3748]

     

       
93
       
-
       
            dark:focus-visible:before:outline-gray-400

     

       
94
       
-
       
            dark:active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.3)]

     

       
95
       
-
       
            dark:disabled:hover:before:bg-gray-800 dark:disabled:hover:before:border-gray-700;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
96
       
 
       
        }

     

       
97
       
 
       


     

       
98
       
 
       
        .prose img {

     

···

       
74
       
 
       


     

       
75
       
 
       
    @layer components {

     

       
76
       
 
       
        .btn {

     

       
77
       
+
       
            @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center

     

       
78
       
+
       
          bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900

     

       
79
       
+
       
          before:absolute before:inset-0 before:-z-10 before:block before:rounded

     

       
80
       
+
       
          before:border before:border-gray-200 before:bg-white

     

       
81
       
+
       
          before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1),0_1px_0_0_rgba(0,0,0,0.04)]

     

       
82
       
+
       
          before:content-[''] before:transition-all before:duration-150 before:ease-in-out

     

       
83
       
+
       
          hover:before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)]

     

       
84
       
+
       
          hover:before:bg-gray-50

     

       
85
       
+
       
          dark:hover:before:bg-gray-700

     

       
86
       
+
       
          active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)]

     

       
87
       
+
       
          focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400

     

       
88
       
+
       
          disabled:cursor-not-allowed disabled:opacity-50

     

       
89
       
+
       
          dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700;

     

       
90
       
+
       
        }

     

       
91
       
+
       


     

       
92
       
+
       
        .btn-create {

     

       
93
       
+
       
            @apply btn text-white

     

       
94
       
+
       
          before:bg-green-600 hover:before:bg-green-700

     

       
95
       
+
       
          dark:before:bg-green-700 dark:hover:before:bg-green-800

     

       
96
       
+
       
          before:border before:border-green-700 hover:before:border-green-800

     

       
97
       
+
       
          focus-visible:before:outline-green-500

     

       
98
       
+
       
          disabled:before:bg-green-400 dark:disabled:before:bg-green-600;

     

       
99
       
 
       
        }

     

       
100
       
 
       


     

       
101
       
 
       
        .prose img {